Update Image Gallery — Astro Template Guide

documentation

Publih On: 2023-12-02

Learn how to add and update image gallery entries on the Blacks Astro JS template.

Full documentation: Image gallery guide →

---

Where Image Gallery Entries Live

All image gallery entries are in the folder:

src/pages/gallery/image

Each Markdown file in this folder becomes one entry in the image gallery.

Important: Do not delete the [...page].astro file. This file handles pagination and is required for the gallery to work.

---

Create a New Image Entry

To add a new image to the gallery:

1. Create a new .md file inside src/pages/gallery/image/
2. Name it with a short slug — for example: morning-light.md
3. Open it in your code editor
4. Add the frontmatter (see below)
5. Write your content in Markdown
6. Save the file

The filename becomes the URL. For example:

• src/pages/gallery/image/morning-light.md → /gallery/image/morning-light/

---

Frontmatter Format

---
layout: ../../../design/gallery/imagepost.astro
title: Insert title in here..
description: Description in here..
image: insert url image here...
pubDate: 2023-12-05
tags: ["insert tag here", "tag1", "tag2"]
categories: ["insert categories here.."]
---

Write content in here...

---

What Each Field Does

Field	Purpose
layout	Image post layout template. Don’t change this.
title	Image title — appears on the gallery listing and detail page
description	Short description — used for SEO and social previews
image	URL of the image
pubDate	Publication date — format: YYYY-MM-DD
tags	Array of tags. Creates keyword archive pages automatically.
categories	Array of categories. Creates concept archive pages automatically.

---

Tips for Image Gallery Entries

1. Filename = URL. Keep filenames short, lowercase, and hyphenated.
2. Use consistent image sizes. Around 1200×800 works well for gallery images.
3. Write useful descriptions. They help with SEO and accessibility.
4. Use consistent tags. If you use portrait in one entry, don’t use portraits in another.
5. Keep categories broad. Tags specific — categories broad.

---

Quick Method

For a faster workflow:

1. Copy an existing entry from src/pages/gallery/image/
2. Rename it to match your new image
3. Update the frontmatter and content
4. Save

No configuration required. The gallery index updates automatically.

---

Need Help?

If you need custom work or a headless CMS integrated, our team can help.

Headless CMS Integration →