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"
    location: "City, Country"  # Optional: Location will appear with 📍 icon in lightbox
  - url: /assets/photos/your-project-name/photo2.jpg
    image_path: /assets/photos/your-project-name/photo2.jpg
    alt: "Photo 2 description"
    location: "Another location"
  # Add more photos as needed
---

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

Note about EXIF metadata: Camera settings (ISO, aperture, shutter speed, focal length, camera model) are automatically extracted from your JPG files and displayed in the lightbox when you click on an image. You don’t need to add them manually!

Step 4: Add to Main Gallery Page

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

gallery:
  # ... existing projects ...
  - url: /photos/your-project-name/
    image_path: /assets/photos/your-project-name/thumbnail-image.jpg
    alt: "Your Project Title"
    title: "Your Project Title"

The main gallery page uses clickable image thumbnails with overlaid titles.

Photo Metadata & Location

EXIF Data (Automatic): Camera settings are automatically extracted from your photos:

• 📷 Camera model
• ISO speed
• Aperture (f-stop)
• Shutter speed
• Focal length

This information appears in the lightbox when you click on an image. No manual entry needed!

Location (Manual): Add the location field to display where the photo was taken:

gallery:
  - url: /assets/photos/northern-lights/photo.jpg
    image_path: /assets/photos/northern-lights/photo.jpg
    alt: "Aurora Borealis"
    location: "Tromsø, Norway"  # Will show as "📍 Tromsø, Norway"

When viewing an image in the lightbox:

• Left side: Camera metadata (auto-extracted)
• Right side: Location (if you added it)

Gallery Layout Options

The project gallery displays images in a horizontal scrollable layout by default. Images are clickable to open in a lightbox viewer where you can:

• View full-size images
• Navigate between photos with arrow keys or buttons
• See EXIF metadata and location information

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
• Keep your original photos - EXIF data is read directly from the image files
• Compress images for web (recommended: 1200-1600px width, 75-85% quality)
• Location is optional - only add it if you want it displayed
• Right-click is disabled to prevent easy image downloads

Image Protection

The gallery includes basic protection features:

• Right-click disabled on all images
• Drag-and-drop disabled
• Works on thumbnails, gallery view, and lightbox

Note: This only deters casual users. For better protection, consider adding watermarks to your images.

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