Creating a Photo Gallery in Hugo

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>

“`

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.

Table of Contents