Photo Gallery Instructions

How to Add a New Photo Project

Adding a new photo project is easy! Just follow these 3 simple steps:

Step 1: Create a Subfolder for Your Project

Create a new folder inside assets/photos/ with your project name:

assets/photos/your-project-name/

For example:

• assets/photos/trip-to-prague/
• assets/photos/street-photography/
• assets/photos/portraits/

Step 2: Add Your Photos

Copy all the images for this project into the new folder. Supported formats: JPG, PNG, etc.

Step 3: Create a Project Page

Create a new markdown file in collections/_photo-projects/ with the same name as your folder:

collections/_photo-projects/your-project-name.md

Use this template:

---
title: "Your Project Title"
permalink: /photos/your-project-name/
description: "Brief description of this photo collection"
header:
  image: /assets/photos/your-project-name/cover-image.jpg
  teaser: /assets/photos/your-project-name/thumbnail-image.jpg

gallery:
  - url: /assets/photos/your-project-name/photo1.jpg
    image_path: /assets/photos/your-project-name/photo1.jpg
    alt: "Photo 1 description"
    title: "Caption for photo 1"
  - url: /assets/photos/your-project-name/photo2.jpg
    image_path: /assets/photos/your-project-name/photo2.jpg
    alt: "Photo 2 description"
    title: "Caption for photo 2"
  # Add more photos as needed
---

Write a description of your photo project here. This text will appear above the gallery.

Step 4: Add to Main Gallery Page

Edit collections/_pages/photos.md and add your project to the feature_row:

feature_row:
  # ... existing projects ...
  - image_path: /assets/photos/your-project-name/thumbnail-image.jpg
    alt: "Your Project Title"
    title: "Your Project Title"
    excerpt: "Brief description of this photo collection"
    url: "/photos/your-project-name/"
    btn_label: "View Project"
    btn_class: "btn--primary"

Gallery Layout Options

In your project page (gallery section), you can control how photos are displayed:

• Default (half): Images appear in a 2-column grid - this is set in the layout
• You can change it by editing _layouts/photo-project.html and modifying the gallery include:
  • layout="third" - 3 columns
  • layout="half" - 2 columns
  • layout="" - single column (scrollable left-to-right on mobile)

Tips

• Use descriptive folder names (lowercase, use hyphens instead of spaces)
• The teaser image is what appears on the main gallery page
• The header: image is the banner at the top of the project page
• Photos will maintain their aspect ratios and be responsive
• The gallery supports horizontal scrolling on all devices

Project Structure

eloMG.github.io/
├── assets/photos/
│   ├── your-project-1/
│   │   ├── photo1.jpg
│   │   ├── photo2.jpg
│   │   └── ...
│   └── your-project-2/
│       ├── photo1.jpg
│       └── ...
├── collections/
│   ├── _pages/
│   │   └── photos.md          # Main gallery page
│   └── _photo-projects/
│       ├── your-project-1.md   # Individual project pages
│       └── your-project-2.md
└── _layouts/
    └── photo-project.html      # Layout template

Examples

Check out these example projects:

• collections/_photo-projects/landscapes.md
• collections/_photo-projects/black-and-white.md