Наложение текста поверх картинок на сайте с разметкой Markdown

Очередной пост в рамках «возвращения на форум», чтобы не растекаться по другим ресурсам. Может, кому-то пригодится по-мелочи.

Жена на сайте делает ссылки на разделы в виде картинок. И накладывает на них надписи вручную в графическом редакторе:

Сейчас ей, похоже, надоело и она спросила, нельзя ли это как-то автоматизировать :)

Пишет страницы она в Grav'е в разметке Markdown. Понятно, что при этом можно делать вставки на чистом HTML и написать что угодно, но это не спортивно! Мне давно интересно реализовывать что-то расширенное в рамках синтаксиса и идеологии Markdown. Кстати, этот пост эксперимента ради как раз на Markdown пишется. Форум его уже неплохо поддерживает, кроме ряда привычных многим фишек, типа сниппетов ссылок и кеширования внешних картинок.

Картинки в Markdown вставляются с таким синтаксисом:

![](http://ссылка)

Или, в неурезанном варианте:

![Alt-текст](http://ссылка)

Ага! Первое же, что приходит в голову, использовать Alt-текст для визуального вывода поверх картинки. Ну и сама картинка может быть произвольного формата, а выводить нужно в фиксированном размере, в нашем случае 250x200px. Укажем всю эту обработку, задав CSS-класс картинки:

![Лабораторные животные](lab-mouse.jpg){.cover}

Транслируется оно в HTML вида:

<img src="lab-mouse.jpg" alt="Лабораторные животные" title="" class="cover">

Оформление

Сперва опишем лимит размера картинки. Делаем её без полей, вписывая и обрезая лишнее в 250x500. Это сегодня совсем просто:

img.cover {
    width: 250px;
    height: 200px;
    object-fit: cover;
}

А вот дальше — сложнее. Вытащить поле alt из img средствами CSS невозможно. Нужно переходить к JavaScript. На том же jQuery поле alt достаётся в одно действие. И, раз мы уже это делаем, то оформим картинку с подписью в рамках современных стандартов. Сегодня это рекомендуется делать примерно так:

<figure>
  <img src="image.jpg" alt="Картинка">
  <figcaption>Заголовок картинки</figcaption>
</figure>

Поехали:

$('img.cover').each(function()
{
    var img=$(this);
    var alt = img.attr('alt');
    img.wrap("<figure class=\"cover\"></figure>");
    img.after("<figcaption>"+alt+"</figcaption>");
});

Готово. Теперь после загрузки страницы текст из поля alt рисуется под картинкой в виде:

<figure class="cover">
    <img src="lab-mouse.jpg" alt="Лабораторные животные" title="" class="cover"> 
   <figcaption>Лабораторные животные</figcaption>
</figure>

Осталось только раскрасить надпись и наложить её поверх картинки:

figure.cover {
    position: relative;
    width: fit-content;
    display: inline-block;
}

figure.cover figcaption {
    position: absolute;
    bottom: 0;
    color: white;
    font-size: 24px;
    padding: 0 4px 4px 4px;
    display: block;
    width: 100%;
    text-align: center;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9), 0 0 2em rgba(0, 0, 0, 0.7);
    line-height: 1.0;
}

Результат: