Как добавить эффект увеличения картинок (как в medium) в Hugo

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.