FORKED FROM HERE: Eleventy Photo Gallery

THIS IS THE REPO

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

• Build-time image transformations and responsive image markup in templates using @11ty/eleventy-img
• High performance scalable site with 100s across the board on each page using Lighthouse
• Home page with CSS grid displaying the gallery of images
• Featured image pages
• Gallery page
• About me page
• CSS preprocessor SCSS

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

Add images to a folder such as images in your project and then supply an array of image metadata objects in a global data file _data/gallery.json:

{
    "title": "Highway covered in water",
    "date": "October 20, 2020",
    "credit": "Photo by Josh Hild",
    "linkToAuthor": "https://www.pexels.com/photo/highway-covered-in-water-2524368/",
    "src": "highway-water.jpg",
    "alt": "Skybridge over highway covered in water",
    "imgDir": "/images/"
}

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> using @11ty/eleventy-img.

If you don't want to use a global data file simply define the image metadata elsewhere such as in your templates front matter or directly inside the img shortcode.

Creating responsive images in templates

1. Get a large image from somewhere (your file system, a stock photo website, etc)
2. Add the original image to the src/images/ folder (or a folder of your choice)
3. Use the img shortcode to generate responsive image markup using <picture>
4. This performs image transformations at build-time, creating varying image dimensions in the specified formats (.jpg, .webp, etc) from the original image, which outputs to the specified outputDir in the img shortcode within .eleventy.js

{% img 
    src="car.jpg",
    alt="A photo of a car",
    sizes="(max-width: 450px) 33.3vw, 100vw",
    className="my-img",
%}

Compiling SCSS to CSS

All of the projects CSS is compiled from Sass at build-time. The main SCSS 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 directly in style.scss for the changes to be compiled and used.

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 report any issues and contribute to this project by suggesting a new feature or modification. I built this template for others to use so don't hesitate to let me know what you'd like to see added or modified.

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

yugen-lego-gallery