Mainroad обработка изображений

Специфика изображений Хьюго в Mainroad, типы и размеры

Содержимое страницы

Mainroad — это тема для статического генератора сайтов Hugo, и, кроме того, что она выглядит хорошо, она имеет плохое управление изображениями

Как вы видите, этот сайт использует ту же подход: пишите текст в markdown, добавляйте изображения, а затем с помощью hugo — генерируйте красивый набор html, js и css файлов.

topimage

Где

Миниатюры определяются в front matter страницы

thumbnail: img/thumb.jpg

Видимость миниатюр настраивается в config.toml

[Params.thumbnail]
  visibility = ["list", "post"]

Существуют некоторые трудности с Mainroad

  • Mainroad ищет миниатюрные изображения в папке /static, а не в page bundle.
  • По умолчанию одно изображение используется как миниатюра для страницы списка и как верхнее изображение на странице деталей.
  • Миниатюры не изменяются по размеру, а просто копируются в публичную папку

Неприятные моменты…

  • Вышеизложенное приводит к очень неэффективному использованию пропускной способности, когда изображение страницы деталей используется как миниатюра
  • Очень неудобно (для меня) хранить изображения в статической папке, даже если они организованы в параллельной структуре дерева постов, а не в page bundle

Типы и размеры изображений

Миниатюры

  • маленький список (мобильный вид) 73x53
  • средний список (десктопный вид) 235x171

Страница деталей — внутренняя

  • максимальный десктоп 678x495
  • ipad pro 597x436
  • iphone xr 374x273
  • iphone 14 max 390x285
  • ipad mini 479x350

Решение

Сохранять

  • в статической папке — миниатюрные изображения для среднего списка (десктопный вид) 235x171
  • иметь предопределённый набор миниатюр — например, 10 таких, и использовать наиболее подходящую или вращать
  • в page bundle — десктопные изображения 678x495
  • в тексте страницы ссылаться на них ![img](localimg.png)
  • настроить видимость миниатюр = [“list”]

Полезные ссылки