Очередной пост в рамках «возвращения на форум», чтобы не растекаться по другим ресурсам. Может, кому-то пригодится по-мелочи.
Жена на сайте делает ссылки на разделы в виде картинок. И накладывает на них надписи вручную в графическом редакторе:
Сейчас ей, похоже, надоело и она спросила, нельзя ли это как-то автоматизировать :)
Пишет страницы она в 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; }
А вот
…