Creating a photo gallery in Hugo, a popular static site generator, is a great way to showcase images on your website. Hugo offers flexible options to display images in a grid or slideshow format, making your site more engaging for visitors.
Step 1: Prepare Your Images
Start by gathering all the images you want to include in your gallery. Organize them in a dedicated folder within your Hugo project's static directory, such as static/images/gallery. This makes it easy to reference them later.
Step 2: Create a Gallery Page
Next, create a new content file for your gallery. In your Hugo site's content folder, add a new Markdown file named gallery.md. Use front matter to specify the title and layout:
```yaml
title: "Photo Gallery"
layout: "gallery"
```
Step 3: Create the Gallery Layout
Design a custom layout for your gallery. In your Hugo theme, create a new template file at layouts/_default/gallery.html. Use HTML and Hugo templating to loop through images:
```html
<div class="gallery">
{{ range $index, $image := .Site.Data.gallery.images }}
<div class="gallery-item">
<img src="{{ "images/gallery/" | relURL }}{{ $image }}" alt="Gallery Image {{ add $index 1 }}">
</div>
{{ end }}
</div>
```
Step 4: Add Image Data
Create a data file at data/gallery/images.yaml and list your image filenames:
```yaml
- image1.jpg
- image2.jpg
- image3.jpg
```
Step 5: Style Your Gallery
Add some CSS to style your gallery. In your theme's stylesheet, include styles like:
```css
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
.gallery-item img {
width: 100%;
height: auto;
display: block;
}
Conclusion
By following these steps, you can create a beautiful and responsive photo gallery in Hugo. Customize the layout and styles to match your website's design and make your images stand out.