Zoom on click!

Краткая инструкция на тему того, как добавить в Hugo framework опцию увеличения картинок при клике, по аналогии с medium или картинкой выше.

Использовать будем готовое решение medium-zoom:

• Переходим на страницу в github medium-zoom
• Скачиваем JS файл
• Копируем скачанный файл в директорию static/js/ с hugo страницей
  (на моем примере .../artydev/static/js/zoom.js)
• Создаем файл my-zoom.js в static/js/
• Создаем shortcode zoompic.html в
  .../themes/<your-theme>/layout/shortcodes/zoompic.html
• Оборачиваем каждую вставленную картинку в shortcode
• Пересобираем сайт: hugo --gc --minify
• profit.

Содержимое файла my-zoom.js:

mediumZoom('.zoomx', {
  margin: 25,
  background: '#e2e0de',
  scrollOffset: 50,
}) 

Содержимое файла zoompic.html:

<p><img class="zoomx" src="{{ index .Params 0 }}" alt="img"></p>

Если на выходе должен быть тег figure:

<figure>
    <p><img class="zoomx" src="{{ index .Params 0 }}" alt="img"></p>
</figure>

Пример вставки картинки (необходимо обернуть в двойные фигурные скобки {{ }}):

< zoompic "/img/hugo/h.jpg" >

По вопросам можно писать в telegramm @artydevx.