Eleventy Photo Gallery

A starter site for creating your own photo or art gallery using the Eleventy static site generator.

Live demo - View the project live
Deploy on Netlify - Host your own custom gallery

Getting Started

Clone this repo: git clone https://github.com/tannerdolby/eleventy-photo-gallery.git
Navigate to your local copy of the project: cd eleventy-photo-gallery
Install dependencies: npm install
Build: npm run build
Serve locally: npm run serve

Features ✨

Responsive and optimized images using <picture>
Home page with CSS Grid representing gallery of images
Featured image page
About me page

Usage 🚀

Edit _data/gallery.json to include the appropiate image metadata. See CONTRIBUTING.md for more on customizing your own photo/art gallery.

Use the sharpImages function inside .eleventy.js to create three resized versions of the original image.

Get an image from somewhere (your file system, a stock photo website, etc)
Add the original image to the /images/ folder.
Go into .eleventy.js and utilize sharpImages
This creates three resized images from the original, which outputs to the /images/ folder:

sharpImages("./images/road-fog.jpg");

road-fog-large.webp
road-fog-med.webp
road-fog-small.webp

Include the images in /images/ if you create the resized images externally.
Go into _data/gallery.json and create a new object with the image metadata

See CONTRIBUTING.md for more on customizing the image gallery.

Contributing

Feel free to contribute to this project by suggesting a new feature or modification. I built this template for others to use, so let me know what you'd like to see added/modified.

Open an issue for any features/modifications you'd like to see!
Have a look at the contributing guidelines before submitting a PR!

Maintainer

@tannerdolby

License

This project is under the MIT license.