Update Video Gallery — Astro Template Guide

documentation

Publih On: 2023-12-02

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

Full documentation: Video gallery guide →

---

Where Video Gallery Entries Live

All video gallery entries are in the folder:

src/pages/gallery/video

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

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

---

Get the YouTube Video ID

When embedding a video, you only need the video ID — the part after v= in the YouTube URL.

Example:

• Full URL: https://www.youtube.com/watch?v=B6RpLTSCz5o
• Video ID: B6RpLTSCz5o

Copy only the ID, not the full URL.

---

Create a New Video Entry

To add a new video to the gallery:

1. Create a new .md file inside src/pages/gallery/video/
2. Name it with a short slug — for example: behind-the-scenes.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/video/behind-the-scenes.md → /gallery/video/behind-the-scenes/

---

Frontmatter Format

---
layout: ../../../design/gallery/videopost.astro
title: Insert title in here..
description: Description in here..
image: insert url image here...
video: B6RpLTSCz5o
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	Video post layout template. Don’t change this.
title	Video title — appears on the gallery listing and detail page
description	Short description — used for SEO and social previews
image	Cover image for the video entry
video	YouTube video ID — the part after v= in the URL
pubDate	Publication date — format: YYYY-MM-DD
tags	Array of tags. Creates genre archive pages automatically.
categories	Array of categories. Creates style archive pages automatically.

---

Tips for Video Gallery Entries

1. Filename = URL. Keep filenames short, lowercase, and hyphenated.
2. Use high-quality cover images. Around 1280×720 works best for video thumbnails.
3. Write useful descriptions. They help with SEO and accessibility.
4. Use consistent tags. If you use tutorial in one entry, don’t use tutorials in another.
5. Double-check the video ID. A wrong ID means a broken embed.

---

Quick Method

For a faster workflow:

1. Copy an existing entry from src/pages/gallery/video/
2. Rename it to match your new video
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 →