Eleventy Photo Gallery

A starter site for creating your own photo or art gallery using the Eleventy static site generator.

• Live demo - View the project live
• Deploy on Netlify - Host your own custom gallery

Getting Started

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.

Features

• Responsive and optimized images using <picture>
• Home page with CSS Grid representing gallery of images
• Featured image page
• Gallery page
• About me page
• Build-time image transformations which generate responsive image markup using the respimg paired shortcode
• Sass preprocessor used to generate CSS

Local Setup

1. Clone this repo: git clone https://github.com/tannerdolby/eleventy-photo-gallery.git
2. Navigate to your local copy of the project: cd eleventy-photo-gallery
3. Install dependencies: npm install
4. Build: npm run build
5. Serve locally: npm run start or npm run dev

Usage

To add images to the home page gallery and featured image pages. Edit _data/gallery.json to include image metadata like this:

{
        "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
    }

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> after the sets of images are generated by respimg.

Or simply define the image metadata in frontmatter or directly inside the shortcode. Any of the options work to generate responsive images (if not already generated) with the corresponding markup. If the image is already generated in your project files, the utility will only render the responsive image markup with <picture>.

Transforming Images

The respimg paired shortcode performs build-time image transformations and generates responsive image markup with <picture>. Once images are resized/transformed you can use them anywhere in your project, this plugin removes the need for users to resize images on their own.

Next, make sure to include the necessary parameters when using the respimg utility:

Parameter	Description
src	The filename for an image.
alt	A text description of the image.
inputDir	The input directory in your Eleventy config file.
imgDir	Directory where the image file is located. Relative to inputDir.
widths	The desired image widths. Supports any three integer values.
sizes	The sizes attribute which defines a set of media conditions.
className	Class attribute for the fallback image.
id	The id attribute for fallback image.
width	The fallback image width attribute.
height	The fallback image height attribute.

Using the respimg utility

1. Get a large image from somewhere (your file system, a stock photo website, etc)
2. Add the original image to the /images/ folder.
3. Use the respimg paired shortcode if you need to resize and reformat images.
4. This performs image transformations at build-time, creating varying image dimensions and .jpg plus .webp formats from the original image, which outputs to the /images/ folder:

Using the paired shortcode for a single large image like this:

{% respimg 
    src="car.jpg",
    alt="A photo of a car",
    inputDir="./src",
    imgDir="/images/",
    widths=[320, 640, 1024],
    sizes="(max-width: 450px) 33.3vw, 100vw",
    className="my-img",
    width=1024,
    height=768
%}

will generate responsive image markup using <picture> tags like this:

 <picture>
    <source 
        type="image/webp"
        srcSet="/images/car-1024.webp 1024w,
                /images/car-640.webp 640w,
                /images/car-320.webp 320w"
        sizes="(min-width: 450px) 33.3vw, 100vw"
    >
    <img 
        srcSet="/images/car-1024.jpg 1024w,
                /images/car-640.jpg 640w,
                /images/car-320.jpg 320w"
        sizes="(min-width: 450px) 33.3vw, 100vw"
        src="/images/car-320.jpg"
        alt="A photo of a car"
        loading="lazy"
        class="my-img"
        width="1024"
        height="768"
    >
</picture>

If you have already transformed an image and wish to only generate the responsive image markup using <picture>, simply use the respimg shortcode again anywhere within your project. Read more on the plugin docs.

Transforming multiple images

You can also transform multiple images dynamincally at build-time using global data or front matter to handle all image resizing and reformatting needs in one go using a for loop.

Refer to eleventy-plugin-sharp-respimg documentation for more information on usage.

Compiling Sass to CSS

All of the projects CSS is compiled from Sass at build-time. The main Sass 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 Sass (or CSS) directly in style.scss for the changes to be compiled and used. Otherwise, if you want to continue using a "modular" approach like the project follows. You can:

1. Create a new partial file in a specific directory ('sass/partials', 'sass/mixins', 'sass/vars') like _some-file.scss where the underscore prefixed at the beginning signals that the file is a partial. These files are meant to be loaded as modules and not directly compiled.

2. Write Sass code and style away!

3. Load the stylesheets with a @forward rule in the index files like @forward "./some-file"; within _index.scss within the directory so they can be loaded with @use in the scss file that is compiled to CSS.

4. Load the stylesheets using @use rules from the directory in which you need a specific file. Therefore, if I created a new file within sass/mixins called _url-short.scss and wanted to load that file in style.scss, I would use @use "mixins" as * to load the stylesheets within the mixins directory as one module while also ensuring the module isn't loaded with a namespace.

Read more about loading members and namespaces here in Sass docs

Contributing

Feel free to contribute to this project by suggesting a new feature or modification. I built this template for others to use, so let me know what you'd like to see added/modified.

• Open an issue for any features/modifications you'd like to see!
• Have a look at the contributing guidelines before submitting a PR!

Maintainer

@tannerdolby

License

This project is under the MIT license.