Лента тем форума «Компьютерный» и его подфорумов за год

 

Balancer

администратор
★★★★★

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

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

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

Пишет страницы она в 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; } 

Результат:

 

в начало страницы | новое
 
Поиск
Настройки
Твиттер сайта
Статистика
Рейтинг@Mail.ru