Как сделать галерею в сайте на hugo

Когда я делал пост про отдых в Сочи, у меня появилась необходимость в добалении галерей с изображениями.

Какие были требования:

  1. Необходимо иметь возможность добавлять несколько галерей на одну страницу.
  2. Необходимо иметь подготовленные превью изображений.
  3. Превью изображений должны генерироваться автоматически при сборке сайта.

Результаты поиска по интернету привели меня к:

  1. https://github.com/liwenyip/hugo-easy-gallery
  2. https://christianspecht.de/2020/08/10/creating-an-image-gallery-with-hugo-and-lightbox2/

Первый пример работает, но необходимо генерировать привью руками до сборки сайта. Второй вариант более жизнеспособный. Его я и взял за базу и доработал возможность использования отдельных папок под каждую галерею.

Что сделано в результате:

  1. Старые посты были сделаны на основе .MD файлов с заголовком, сгенерированным на основе имени файла. Они были переработаны. Теперь контент находится в файлах index.md, которые находятся в папках. на основе названий этих папок генерируются заголовки страниц.

    Changed folder hierarchy

  2. Изображения для поста помещены в “img/” подпапку. Изображение заголовка теперь размещено тоже там.

    New folder structure

    Шаблоны были изменены следующим образом:

    Изменение в layouts/_default/single.html:

            {{ if .Page.Resources.Match "img/header.png" }}
                {{ $header := .Page.Resources.GetMatch "img/header.png" }}
            <div class="post type-post status-publish format-standard has-post-thumbnail hentry category-design tag-design tag-standard-2 tag-tagalicious tag-travel entry full-without-featured odd excerpt-1">
                <div class='featured-image lazy lazy-bg-image' data-background="{{ $header.Permalink }}" ></div>
            {{ else }}
                <div class="post type-post status-publish format-standard hentry category-standard category-travel entry full-without-featured odd excerpt-1">
            {{ end }}   
    
  3. I made a simple shortcut for gallery insert with simple param ‘dir’. Gallery made from images in this subfolder with lightbox2.

    shortcuts/gallery.html

    {{ $dir := print (.Get "dir") "/*"}}
    {{ with .Page.Resources.Match $dir }}
    {{ range . }}
        {{ $full := .Fit "1980x1080"}}
        {{ $resized := .Fill "135x120 q80" }}
        <a href="{{ $full.Permalink }}" data-lightbox="x"><img src="{{ $resized.Permalink }}"/></a>
        {{ end }}
    {{ end }}
    

    Shortcut usage:

    New folder structure

  4. I add lightbox2 styles and scripts to ‘head.html’ and ‘scripts.html’ templates. It enables by ‘useGallery’ parameter in post header.

layouts/partials/head.html modification:

{{ if .Page.Params.useGallery}}
    <link rel="stylesheet async" as="style" href="{{(resources.Get "css/lightbox.min.css").Permalink }}">
{{ end }}

layouts/partials/scripts.html modification:

{{ if .Page.Params.useGallery}}
    <script src="{{ "js/lightbox.min.js" | absURL }}"></script>
{{ end }}

Добавьте заголовок для поста, например такой:

+++
draft = false
showonlyimage = false
date = "2020-10-21T20:16:19+03:00"
title = "How to create gallery in hugo"
categories = [ "tech" ]
tags = ["hugo", "gallery", "image processing", "lightbox2"]
weight = 1
writer= "Alexey Nevinsky"
description = "How to create a beautiful and usable gallery with hugo, lightbox2 and jquery."
useGallery = true
+++

In next posts I plan to create a repo with some features, which I explane in my posts of Hugo.

Thanks for reading=)