На информационном ресурсе применяются рекомендательные технологии (информационные технологии предоставления информации на основе сбора, систематизации и анализа сведений, относящихся к предпочтениям пользователей сети "Интернет", находящихся на территории Российской Федерации)

artydev & Co

1 подписчик

Добавление zoom-эффекта на картинки в Hugo

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

img

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.

Ссылка на первоисточник
наверх