A starter repository intended to help you build a photo gallery website using the Eleventy static site generator.

• Netlify demo - live template gallery
• Deploy on Netlify - host your own custom gallery

git clone https://github.com/tannerdolby/eleventy-stock-gallery.git

cd eleventy-stock-gallery

npm install

Edit _data/gallery.json to include the appropiate image metadata for new images added.

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

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

# Output to /images/ directory
road-fog-large.jpg
road-fog-med.jpg
road-fog-small.jpg

• Squoosh - Make images smaller using best-in-class codecs, right in the browser.
• eleventy-img - Utility to perform build-time image transformations.

To build your _site output

npm run build

To build your _site and serve it locally

npm run --serve

To run in debug mode

npm run debug

• Global Data Files:
  • _data/gallery.json - Holds all image metadata
  • _data/site.json - Some site data
  • _data/speedlify.js - Speedlify API data files (static API with cached speedlify instance generated JSON)

• .eleventy.js is currently configured to use manual passthrough file copy to include the following directories in the _site output.

  • /images/
  • /css/
  • /favicon_data/
  • /js/

• /_includes/ houses the two layouts for this project.

  • _includes/layouts/base.njk: home page template

  • _includes/layouts/feature.njk: featured image page template