Изображения

Изображения - это хранилище различных картинок, используемых в материале сайта.

Изображения находятся в каталоге images.

Все исходные изображения загружаются в каталог images/original/<год>/<месяц>/<название статьи|страницы|коллекции без даты>. Например: images/original/2023/09/welcome-to-jekyll.

Внутри данного каталога размещаются картинки формата jpg, png. Далее при сборке шаблона Jekyll на основе этих картинок создает такие же картинки только другого разрешения, а так же добавляет к каждой картинке формат webp.

Настройки для картинок определяются в конфигурационном файле _config.yml.

Разрешения картинок

Для автоматического создания изображений различной ширины и длины на основе оригинальной, отредактируйте конфигурационный файл _config.yml.

# настройки расширения mini_magick, отвечающего за создания картинок
mini_magick:
  # имя типа картинки, можно добавлять сколько угодно типов
  thumbnail:
    # от куда будет браться оригинальное изображения
    source: images/original

    # куда будет сохраняться новое изображение
    destination: images/thumbnail

    # новое разрешение картинки, ^ означает что картинка будет сохранять пропорции
    resize: "530x390^"

    # при обрезке изображения какая часть должна сохраняться
    gravity: "center" # NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast

    # новое разрешение картинки
    # без сохранения пропорция, следует указывать оба параметра
    extent: "530x390"

  # Раскоментируйте если необходимо использовать этот тип, либо создать свой
  #steps:
    #source: images/original
    #destination: images/steps
    #resize: "550x450^"
    #gravity: "center"
    #extent: "550x450"

Формат webp

Для настройки формата webp отредактируйте конфигурационный файл _config.yml.

# настройки расширения jekyll-webp, отвечающего за конвертацию картинок в формат webp
webp:
  # конвертация включена
  enabled: true

  # качество сжатия
  quality: 75

  # в каких каталогах конвертировать картинки
  img_dir: ['/assets/images/', '/images/']

  # проверять вложенные каталоги
  nested: true

  # поддерживаемые форматы изображений
  formats: ['.jpeg', '.jpg', '.png']

  # заного создавать webp изображения для уже созданных
  regenerate: false

  # исключить каталоги
  exclude: ['icons']

  # добавить расширение
  append_ext: true

Добавление картинки на сайт

Предположим, что мы добавили в каталог images/original/2023/09/welcome-to-jekyll изображение cover.jpg. Теперь, для того чтобы отобразить картинку на сайте, вставим в файл следующую разметку.

<picture>
  <source srcset="{{ site.baseurl }}/images/thumbnail/2023/09/welcome-to-jekyll/cover.webp" type="image/webp">
  <img src="{{ site.baseurl }}/images/thumbnail/2023/09/welcome-to-jekyll/cover.jpg" alt="">
</picture>

При сборке проекта картинки копируются в каталог _site/images. Так как каталог _site является корневым для веб сервера, то при обращении к каталогу images картинки будут браться от сюда _site/images.

Далее в пути указывается название расширения изображения, которое было указанно в файле _config.yml, например thumbnail. После чего год, месяц и название статьи и только потом название картинки которую нужно отобразить.

В шаблоне имеется компонент picture, который будет вставлять подобную конструкцию одной строкой кода.

{% include component/picture.html fancybox='true' slug=page.slug img='img-3.jpg' type='original' alt='Исходный код главной страницы' %}

Ознакомимся с каждым параметром.

# включаемый файл
include component/picture.html

# параметр для расширения fancybox, по умолчанию отключен
fancybox='true'

# название статьи
slug=page.slug

# подключаемая картинка
img='img-3.jpg'

# тип подключаемой картинки original, thumbnail.. тот формат который был обозначен в файле _config.yml
type='original'

# текс для картинки
alt='Исходный код главной страницы'

Другие статьи

Другие сниппеты

← К оглавлению