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.json
to include the appropiate image metadata for new images added. The fields afterlinkToAuthor
must be provided in order to use therespimg
utility 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
respimg
for transforming images. - This creates resized and reformatted
.jpeg
and.webp
images 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)