hugo-theme-gallery

Hugo Gallery Theme

A very simple and opinionated photo gallery theme for Hugo.

• Demo
• Example site source

---

---

Features

• Responsive design
• Dark color scheme (can be set per page)
• Private albums
• Justified album views with Flickr's Justified Layout
• Lightbox with PhotoSwipe
• SEO with Open Graph tags
• Automatic (or manual) selection of feature/cover images

Important note: do not try to use WebP images. The golang WebP implementation used in Hugo has a bug which leads to wrong image levels (dull looking images) upon resize. See nicokaiser/hugo-theme-gallery#102 for more details.

Installation

This theme requires Hugo Extended >= 0.123.0. Dependencies are bundled, so no Node.js/NPM and PostCSS is needed.

As a Hugo Module

Requires the Go binary installed.

hugo mod init github.com//

Then add the theme to your hugo.toml:

[module]
  [[module.imports]]
    path = "github.com/nicokaiser/hugo-theme-gallery/v4"

As Git Submodule

git submodule add --depth=1 https://github.com/nicokaiser/hugo-theme-gallery.git themes/gallery

Usage

Page bundles which contain at least one image are listed as album or gallery:

…

plain

title: Nature resources:

• src: tree.jpg params: cover: true

---

You can hide images from the gallery and use them only as cover image:

```plain
---
title: Nature
resources:
  - src: nature-cover.jpg
    params:
      cover: true
      hidden: true
---

Image Metadata

Image titles for the lightbox view are either taken from the ImageDescription EXIF tag, or the title in the resource metadata.

EXIF tags can be written using software like Adobe Lightroom or by using command line tools like exiftool:

exiftool -ImageDescription="A closeup of a gray cat's face" cat-4.jpg

Alternatively, the image title can be set in the front matter:

---
date: 2024-02-18T14:12:44+0100
title: Cats
resources:
  - src: cat-1.jpg
    title: Brown tabby cat on white stairs
    params:
      date: 2024-02-18T13:04:30+0100
  - src: cat-4.jpg
    title: A closeup of a gray cat's face
---

This also enables custom ordering:

---
sort_by: Params.weight
resources:
  - src: image-1.jpg
    params:
      weight: 20
  - src: image-2.jpg
    params:
      weight: 10
---

Categories

If you use categories in your albums, the homepage displays a list of categories. Make sure term is not included in disableKinds in the site config.

content/dogs/index.md:

---
date: 2023-01-12
title: Dogs
categories: ["animals", "nature"]
resources:
  - src: dogs-title-image.jpg
    params:
      cover: true
---

Categories can also have custom titles and descriptions (by default, the "animals" category will have "Animals" as title and no description). Just create a content/categories//_index.md:

content/categories/animals/_index.md:

---
title: Cute Animals
description: This is the description text of the "animals" category.
---

…

plain
---
title: Featured Album
params:
  featured: true
---

…

toml
[related]
  includeNewer = true
  threshold = 10
  toLower = false
  [[related.indices]]
    applyFilter = false
    cardinalityThreshold = 0
    name = 'categories'
    pattern = ''
    toLower = false
    type = 'basic'
    weight = 10
  [[related.indices]]
    applyFilter = false
    cardinalityThreshold = 0
    name = 'keywords'
    pattern = ''
    toLower = false
    type = 'basic'
    weight = 50

Social Icons

Use the socialIcons configuration key to add social icons on the bottom of each page:

[params]
  ...
  [params.socialIcons]
    facebook = "https://www.facebook.com/"
    instagram = "https://www.instagram.com/"
    github = "https://github.com/nicokaiser/hugo-theme-gallery/"
    youtube = "https://www.youtube.com/"
    email = "mailto:[email protected]"
    linkedin = "https://linkedin.com/"

Exclude original photos

To exclude the original photos from the published site, and to disable the "Download" button, you can use the build.publishResources configuration option. Either add it to a specific album, or use cascade to omit the originals from all sub-albums. With publishResources: false only the resized images (without any metadata) are included in the published site, which can save quite some disk space.

cascade:
  build:
    publishResources: false

Custom CSS

CSS is generated with Hugo Pipes, so you can add additional CSS in assets/css/custom.css (see example in exampleSite).

Custom JavaScript

You can add additional JavaScript in assets/js/custom.js.

Author

• Nico Kaiser