A very simple and opinionated photo gallery theme for Hugo.
- Responsive design
- Dark theme
- Private albums
- Automatic (or manual) selection of feature images
- Justified album views with Flickr's Justified Layout
- Lightbox with PhotoSwipe
- SEO with Open Graph tags
This theme requires Hugo >= 0.113.
Requires the Go binary installed.
$ hugo mod init github.com/<your_user>/<your_project>
Add the theme to your hugo.toml
theme = ["github.com/nicokaiser/hugo-theme-gallery/v2"]
$ git submodule add --depth=1 https://github.com/nicokaiser/hugo-theme-gallery.git themes/gallery
Page bundles which contain at least one image are listed as album or gallery:
content/
├── _index.md
├── about.md <-- not listed in album list
├── animals/
│ ├── _index.md
│ ├── cats/
│ | ├── index.md
│ | ├── cat1.jpg
│ | └── feature.jpg <-- album thumbnail
│ ├── dogs/
│ | ├── index.md
│ | ├── dog1.jpg <-- album thumbnail
│ | └── dog2.jpg
│ └── feature.jpg
├── bridge.jpg <-- site thumbnail (OpenGraph, etc.)
└── nature/
├── index.md <-- contains `featured_image: images/tree.jpg`
├── images/
| └── tree.jpg <-- album thumbnail
├── nature1.jpg
└── nature2.jpg
/about.md
is not a Page Bundle and does not have image resources. It is not displayed in the album list./nature
is a Leaf Bundle (hasindex.md
and no children) => displayed as gallery (single
layout)./animals
is a Branch Bundle (has_index.md
and has children) => displayed as album list (list
layout).- The image resource with
*feature*
in its name or the first image found is used as thumbnail image for album lists. - Albums without an image are not shown.
title
-- title of the album, shown in the album list and on the album page.date
-- album date, used for sorting (newest first).description
-- description shown on the album page.featured_image
-- name of the image file used for the album thumbnail. If not set, the first image which containsfeature
in its filename is used, otherwise the first image in the album.weight
-- can be used to adjust sort order.private
-- if set totrue
, this album is not shown in the album overview and is excluded from RSS feeds.featured
-- if set totrue
, this album is listed on the homepage (even if private).sort_by
-- property used for sorting images in an album. Default isName
(filename), but can also beExif.Date
(only works if all images have EXIF tags).sort_order
-- sort order. Default isasc
.
This theme uses Tailwind CSS and comes with a pre-built styles.css
, so installing Node.js, PostCSS, etc. is not required. Some CSS variables can be used to create a customized look:
Add a assets/css/custom.css
to your site and adjust the values to your needs (see the example in exampleSite
).
In some cases it might be desirable to show images and sub-albums on one page. To achive this, a local version of list.html
needs to be added with something like this:
{{ define "main" }}
{{ partial "title.html" . }}
{{ partial "albums.html" . }}
+ {{ partial "gallery.html" . }}
{{ end }}
In this case, featured images for albums which only contain other albums need to be moved to a sub-directory to avoid being displayed.
Albums with no images are hidden by default. This is a design decision to keep the structure as simple as possible and hides pages like about.md
or imprint.md
from the album list without the need of defining a layout/section for each gallery.
@baekgaard made a Pull request about handling of empty albums, which allows to modify this behaviour (which, for simplicity reasons, is not merged).