I welcome any and all community contributions to this project. Feel free to open an issue or submit a PR. I'd love to hear about any features or modifications you think the project should have. If you need more info about a feature or want to discuss things, feel free to open an issue with the education label.
-
Clone this Repository:
git clone https://github.com/tannerdolby/eleventy-photo-gallery.git -
Navigate to project folder:
cd eleventy-photo-gallery -
Install dependencies:
npm install -
Update
_data/gallery.jsonto include the appropiate image metadata for new images added. The fields afterlinkToAuthormust be provided in order to use therespimgutility for transforming images at build-time.
[
{
"title": "Terrace with green plants on night street",
"date": "October 20, 2020",
"credit": "Photo by Aldiyar Seitkassymov",
"linkToAuthor": "https://www.pexels.com/photo/terrace-with-green-plants-on-night-street-3100835/",
"src": "terrace-window.jpg",
"alt": "Terrace outside shop window with green plants and pink tree on night street",
"imgDir": "./images/",
"widths": [320, 640, 1024],
"sizes": "(min-width: 450px) 33.3vw, 100vw",
"class": "my-img",
"width": 1024,
"height": 768
}
]If you don't need unique class, width, and height attributes, then simply use the shortcode like this:
{% for image in gallery %}
{% respimg
image.src,
image.alt,
image.imgDir,
image.widths,
image.sizes,
"showcase-img",
"1024",
"768"
%}{% endrespimg %}
{% endfor %}
- Get an image from somewhere (your file system, a stock photo website, etc)
- Add the original image to the
/images/folder. - Utilize
respimgfor transforming images. - This creates resized and reformatted
.jpegand.webpimages from the original, which outputs to the/images/folder and generates responsive image markup using<picture>in the template where the shortcode was used.
- Build:
npm run build - Serve locally:
npm run serve - Debug:
npm run debug
- Create a new branch or simply push from
master:git checkout -b <branch> - Add changes to staging area:
git add <filename>or to add everything thats been changedgit add . - Commit changes:
git commit -m "Commit message" - Push changes:
git push -u origin master - Open a PR and wait for changes to be reviewed.
Thank you for all of your help and contributions! 🚀
The eleventy configuration file, .eleventy.js is currently configured to use manual passthrough file copy to include the following directories in the _site output.
./src/images/./src/css/./src/favicon_data/./src/js/
- Global Data Files:
_data/gallery.json- Holds all image metadata_data/site.json- Some site data
All .html files have been validated using the Nu HTML Checker.
#4 (Top 5) - 07/22/2021 - https://www.11ty.dev/speedlify
As of July 7, 2021 12:24pm (PST)
