Хочу сделать shortcode для генератора статических сайтов hugo для быстрой и аккуратной вставки множества картинок на страницу одним блоком в виде сетки с подписью.
Нужно:
- превью адекватного размера как на больших экранах, так и на смартфонах
Не нужно:
- анимации
- увеличение фотографии в пределах страницы
- перелистывание кнопками или жестами
Желательно:
- без js
- адаптивное построение сетки
Подскажите, пожалуйста, как наиболее адекватно это сделать?
На данный момент наговнокодил такое:
<figure>
<a href = "1_orig.jpg">
<img src="1_preview.jpg" style="float: left; width: 32%; margin-left: 1%;">
</a>
<a href = "2_orig.jpg">
<img src="2_preview.jpg" style="float: left; width: 32%; margin-left: 1%;">
</a>
<a href = "3_orig.jpg">
<img src="3_preview.jpg" style="float: left; width: 32%; margin-left: 1%;">
</a>
<figcaption>Caption...</figcaption>
</figure>
