Sample Gallery

#photography #demo

Gallery Shortcode Demo

This post demonstrates how to embed a Masonry Gallery directly inside a markdown file using the custom Shortcode.

The images are defined in the YAML Front Matter of this file (see post_images), which gives you full control over captions and order per post.

River valley
Winter River Valley

Canyon cliffs
Canyon Depths

Mountain range
High Altitude

Forest path
Morning Walk

Bear in woods
Wildlife Encounter

Misty forest
Foggy Morning

Night sky stars
Stargazing

Red bicycle
Urban Commute

Vulture flying
Bird of Prey

Pug in blanket
Cozy Dog

Waterfall
Hidden Falls

Snowy mountains
Alpine Ridge

Forest campfire
Camp Vibes

Road tunnel
Into the Unknown

Waterfall close up
Power of Water

Castle view
Historic Sites

Waves crashing
Ocean Fury

Red flowers
Garden Blooms

Keyboard close up
Coding Late

Ocean horizon
Blue Calm

Desert dunes
Sand Waves

Train station
Departure

Factory smoke
Industrial Sunset

Bridge view
Over Troubled Water

Forest coast
Where Land Meets Sea

How it works

  1. Define Data: Add a list of images (src, thumb, caption) to the Front Matter.
  2. Use Shortcode: pass the variable name to the shortcode {% gallery post_images %}.
  3. Result: A responsive masonry grid that uses your existing lightbox.js and CSS variables.