A starter site for creating your own photo or art gallery using the Eleventy static site generator.
Quickly generate a highly performant photo gallery from this template by clicking the green Use Template button. Creating a template repository provides the same directory structure and files as the original project.
git clone https://github.com/tannerdolby/eleventy-photo-gallery.git
cd eleventy-photo-gallery
npm install
npm run build
npm run start
or npm run dev
Add images to a folder such as images
in your project and then supply an array of image metadata objects in a global data file _data/gallery.json
:
{
"title": "Highway covered in water",
"date": "October 20, 2020",
"credit": "Photo by Josh Hild",
"linkToAuthor": "https://www.pexels.com/photo/highway-covered-in-water-2524368/",
"src": "highway-water.jpg",
"alt": "Skybridge over highway covered in water",
"imgDir": "/images/"
}
Once the image data is supplied within the global data file _data/gallery.json
then the home page gallery images and featured image pages will display responsive images with <picture>
using @11ty/eleventy-img
.
If you don't want to use a global data file simply define the image metadata elsewhere such as in your templates front matter or directly inside the img
shortcode.
src/images/
folder (or a folder of your choice)img
shortcode to generate responsive image markup using <picture>
.jpg
, .webp
, etc) from the original image, which outputs to the specified outputDir
in the img
shortcode within .eleventy.js
{% img
src="https://github.com/tannerdolby/eleventy-photo-gallery/raw/master/car.jpg",
alt="A photo of a car",
sizes="(max-width: 450px) 33.3vw, 100vw",
className="my-img",
%}
All of the projects CSS is compiled from Sass at build-time. The main SCSS file is src/_includes/sass/style.scss
and thats where partials, mixins, and variables are loaded in with @use
rules.
If you want to change up the styles, you can write directly in style.scss
for the changes to be compiled and used.
Feel free to report any issues and submit feature requests. I built this template for others to use so don't hesitate to let me know what you'd like to see added or modified.