Fotorama в Jekyll

4 мин на чтение

Выкладывать фотографии через Jekyll это боль. Редактура заметки о поездке Новосибирск заняла около 2 часов. За это время я бы мог написать ещё две таких. Собственно по этой же причине я пока не перенёс посты из старого блога и поддерживаю его работоспособность. Ситуация будет постепенно меняться и начало уже положено.

Самая напрягающая часть это отсутствие вменяемой дефолтной галереи. В Jekyll из коробки её вообще нет, все картинки это просто html теги проецируемые из markdown и никакого фронтенда над ними. В шаблоне, который используется у меня в данный момент есть встроенная Magnific Popup, но это кошмар на который больно смотреть.

В Эгее используется библиотека Fotorama и мне всегда нравилась там работать с картинками, так как автору движка не плевать. Он сам фотографирует, путешествует, понимает всю важность удобного и изящного инструмента. Сначала я поискал на гитхабе популярные jquery решения для организации галерей, но фотораме по прежнему мне кажется самой крутой. Очень жаль, что проект закрыт с 2015 года. Впрочем, работать это ему не мешает, поэтому почему бы не прикрутить его к Jekyll.

Сказано — сделано. Подключается фоторама простым добавлением css и js библиотеки к шаблону сайта. А вот дальше сложней, ведь надо ещё оборачивать все необходимые картинки в div с нужным набором классов. Jekyll не очень приспособлен под работу с динамикой, но благодаря Liquid кое-какие механизмы всё же есть.

Для начала определим переменные для хранения всех картинок сайта и запишем их в отдельный файл assets.yml внутри папки _data. Это Можно сделать и в основном конфиге сайта, но рекомендуется использовать именно _data для хранения персональных переменных:

images: "/assets/images/"
files: "/assets/files/"

Теперь добавляем в каталог _includes файл с названием fotorama со следующим содержимым:

{% assign images = page[include.id] %}
{% assign assets = site.data.assets.images %}
{% assign slug = page.slug %}
<div class="fotorama" data-nav="thumbs" data-allowfullscreen="true">
  {% for items in images %}
    <img src="{{ site.url }}{{ assets }}{{ slug }}/{{ items }}" data-thumb="{{ site.url }}{{ assets }}{{ slug }}/{{ items }}" width="144" height="96">
  {% endfor %}
</div>

Как видите, Liquid очень похож на какой-нибудь веб фреймворк и работать с ним вполне удобно. Пути для ссылок строятся с использованием переменных, а значит в любой момент их можно переопределить, поменяв, скажем, иерархическое расположение самих файлов или использовать CDN хранилище. Заметки при этом трогать не придётся. Самое главное для нас, что теперь можно работать с изображениями внутри markdown заметок как с отдельной фичей и сейчас я покажу как.

Создадим какую-нибудь заметку и включим в Front Matter массив с двумя изображениями:

---
title: "Fotorama в Jekyll"
gallery:
  - image1.jpg
  - image2.jpg
---

Для использования достаточно вызвать Liquid код, импортирующий созданный нами модуль:

{% include fotorama id="gallery" %}

Значение id это есть ни что иное как ссылка на массив картинок из Front Matter с одноимённым названием. Они попадают в цикл модуля fotorama и формируют список картинок в обёртке специфичных классов фоторамы. То есть в чистом html всё что мы сделали в итоге будет выглядеть примерно вот так:

<div class="fotorama" data-nav="thumbs" data-allowfullscreen="true">
    <img src="https://snupt.github.io/assets/images/test/image1.jpg" data-thumb="https://snupt.github.io/assets/images/test/image1.jpg" width="144" height="96">
    <img src="https://snupt.github.io/assets/images/test/image2.jpg" data-thumb="https://snupt.github.io/assets/images/test/image2.jpg" width="144" height="96">
</div>

Значение id может быть любым, именуйте как хотите, а фотографий в массеве любое количество.

Настройки фоторамы определяются также внутри модуля. Картинки для thumb по желанию можно использовать другие, уменьшенных версий, но это уже вопрос автоматизации процесса формирования самих фотографий о котором я, возможно, расскажу в другой раз. По большому счёту можно сделать скрипт, который будет брать импортируемые из фоторедактора файлы, переименовывать их, класть в нужную папку, конвертировать превью и формировать текстовый список в виде yaml массива. Проще простого.

Фотки можно выкладывать как по одной (обратите внимание на возможность открыть её в полном размере):

001.jpg

Так и в группе:

002.jpg 003.jpg 004.jpg 005.jpg 006.jpg 007.jpg

Фоторама работает прекрасно как на декстопе, так и на современных мобильных устройствах.

Дополнительного удобства можно достичь используя сниппеты. Если вы, как и я, любите VS Code, то ниже делюсь готовым.

Для заполнения Front Matter нужен yaml сниппет:

"Gallery": {
  "prefix": "img",
  "body": [
    "img_0${1:1}:",
    "  - $2"
  ],
  "description": "Create img gallery"
}

А этот сработает в markdown части заметки:

"Fotorama": {
  "prefix": "fr",
  "body": [
    "{% include fotorama id=\"img_0$1\" %}{: .full}"
  ],
  "description": "Add fotorama images"
}

Метки:

Разделы:

Дата публикации:

Оставить комментарий