Photo Gallery

Tried out creating a quick photo gallery in hugo.
The plan was to be able to put photos in a directory. All photos in the directory should automatically render in the gallery section.

Also I wanted to be able to link to the photos.

It was quite easy to make something basic.

Create a new section.

hugo new --kind section gallery/_index.md

Put all new photos in the gallery directory.

content/
├─ gallery/
│  ├─ _index.md
│  ├─ test1.jpg

Create a lists.html for the layout.
Create the directory layouts/gallery and put list.html in the directory.

layouts/
├─ gallery/
│  ├─ list.html

This was a quick example (chatgpt generated).

{{ define "main" }}
<h1>Gallery</h1>
<div class="gallery">
  {{ range .Resources.ByType "image" }}
  <figure>
    <img src="{{ .RelPermalink }}" alt="{{ .Name }}" width="600" />
    <figcaption>{{ .Name }}</figcaption>
  </figure>
  {{ end }}
</div>
{{ end }}

I will probably modify this later, its just a proof of concept for now.

I can also reference the images in future posts using markdown or hugo short code.

![Test Image](/gallery/test1.jpg)

Hugo shortcode:

{{< figure src="/gallery/test2.jpg" caption="Another reusable image" >}}

Test Image