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
-