tannerdolby/eleventy-photo-gallery

Starter site for creating a responsive image gallery using the Eleventy static site generator

eleventy-photo-gallery's Issues

Utilize local image transformations with sharp to automate adding new images

The current setup of forcing users to generate multiple formats and widths needs to be automated.

As brought up in #9, the fact that users will have to get a photo and then generate multiple widths and formats themselves needs to be automated.

I tried reducing the number of image formats by removing the need for generating medium and small .jpg formats, which meant 3 .webp images (large 1024px, med 640px, small 320px) and the original .jpg image (or whatever extension the original was).

This was not valid as @nhoizey pointed out,

I believe JPEG is still mandatory as 15% of Web users still don't have WebP support: https://caniuse.com/webp

Proposed Fix

• Use Sharp more effectively to add local build time image transformations.
• Have a go at using eleventy-plugin-images-responsiver to generate the HTML.

This way the user puts a single photo in of any size (assuming they do not control the original image dimensions) and the project generates the multiple .webp and .jpg formats and widths to be iterated over in the base.njk layout, and feature.njk

Add sitemap.xml

This project really needs a sitemap for helping search engines crawl the sites data. If someone wants to help do this, it would be much appreciated!

Resources:

• Create a Sitemap

letterboxing issue when using object-fit: contain on featured image page

Unfortunately, not all images are going to be the same aspect ratio and intrinsic size when downloading them from third party sites.

Since using object-fit: contain will resize the image to be displayed with its aspect ratio preserved, this is where the letterboxing occurs and causes a large amount of whitespace above/below the image making the nav menu look way above and the image title waaay below.

To combat this, I'm using object-fit: cover for images on the featured image page to ensure a "better" viewing experience for the time being. I'm going to keep this issue open to come back to and if anyone wants to join the discussion.

Responsive images on home page skip 640 size

On https://eleventy-gallery.netlify.app/, if you resize the width of the browser and watch the network tab, you can see that the 640 size images never load.

I don't know enough about <picture> and <source> to debug, but it looks like you want a 640 size to load in there at some point.

<source type="image/webp" srcset="/images/terrace-window-320.webp 320w, /images/terrace-window-480.webp 480w, /images/terrace-window-640.webp 640w, /images/terrace-window-1024.webp 1024w" sizes="(max-width: 480px) 33.3vw, (max-width: 640px) 50vw, 100vw">

eleventy-photo-gallery/src/_includes/layouts/base.njk

Lines 46 to 56 in 7993fc6

	{% respimg
	src=image.src,
	alt=image.alt,
	inputDir="./src",
	imgDir=image.imgDir,
	widths=[320, 480, 640, 1024],
	sizes="(max-width: 480px) 33.3vw, (max-width: 640px) 50vw, 100vw",
	className="grid-image",
	width=640,
	height=800
	%}

As a side note, it looks like the widest those home pages images get is 354px.

Fine tuning of sizes attr for gallery and featured image pages

In light of #18, I think it's necessary to fine tune the '/gallery' and '/gallery/some-img' pages to ensure that the appropriate image sources are being used. Verifiable in the Network tab or by opening DevTools and hovering mouse of the fallback nested <img> element inside <picture>

• Tune sizes for '/gallery'
• Tune sizes for '/gallery/featured-img'

Optimize images more on home page gallery

Lighthouse audit issue: "Properly Size images" - https://web.dev/uses-responsive-images/

For each image on the page, Lighthouse compares the size of the rendered image against the size of the actual image. The rendered size also accounts for device pixel ratio. If the rendered size is at least 4KiB smaller than the actual size, then the image fails the audit.

Since the audit is being run on mobile devices I think the gap between 640px and 320px for images in the srcset is too large and that is whats making Lighthouse notify us of images failing the audit. Updating the srcset for both <source> and fallback <img> elements along with tweaking the sizes attribute should resolve this issue.

Adds more detailed documentation for adding new images to the gallery

It was pointed out by @ljc-dev on twitter today that its a bit unclear on what sizes and formats the images need to be in before adding them to _data/gallery.json as an object.

In total: 4 pictures

1. Original picture (intrinsic size - probably bigger than 1024px)
2. Large .webp source (1024px)
3. Medium .webp source (640px)
4. Small .webp source (320px)
5. Large .jpg source (1024px) or just use the original picture

Note:

• For ease of use, the fallback img src can be whatever size as the browser will most likely be able to support the .webp sources. But use the 1024px large source for best results.

I recommend including a image-name-large.jpg format as the src for the fallback <img> in case the .webp sources cannot be used.

Removes the following srcSet from the fallback <img> inside <picture>. Applying this update to feature.njk and base.njk.

Clear things up about usage:

1. Get an image from somewhere (your file system, a stock photo website, etc)
2. Add the original image to the /images/ folder.
3. Go into .eleventy.js and utilize sharpImages("/images/image-name.jpg")
   • This creates three resized images from the original, which outputs to the /images/ folder:
     • image-name-large.webp (1024px, 768px)
     • image-name-med.webp (640px, 480px)
     • image-name-small.webp (320px, 240px)
   • I have the image formats for this function set to .webp but the sharp package has many options (I think .avif is supported)
4. If you don't use the above method, just head over to squoosh.app and create the three resized versions from your original (1024px, 640px, 320px) and the height will be calculated based on the original image aspect ratio.
5. Include the images in /images/ if you create the resized images externally.
6. Go into _data/gallery.json and create a new object with the image metadata (This is the last step)

Filename: _data/gallery.json

{
        "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/",
        "imageData": {
            "alt": "Terrace outside shop window with green plants and pink tree on night street",
            "large": {
                "webp": "/images/shop-plants-large.webp",
                "jpg": "/images/shop-plants-large.jpg",
                "width": "1024w"
            },
            "medium": {
                "webp": "/images/shop-plants-med.webp",
                "width": "640w"
            },
            "small": {
                "webp": "/images/shop-plants-small.webp",
                "width": "320w"
            }
        }
    }

The image is now added to the site and you can view it by running npm run build and npm run serve

Image metadata could come from the gallery.json datafile too

I see there are image metadata both in _data/gallery.json and each gallery/image-one/index.md Mardown file.

With #1, you could also move all metadata in _data/gallery.json and generate image pages without needing any Markdown file at all, using Eleventy's pagination/iteration feature: https://www.11ty.dev/docs/pages-from-data/

Replace Speedlify-score HTML with social icons?

Although, Speedlify is really nice to remind the user how performant a site is, I don't think everyone would want to have the performance metrics in the footer for just a personal art collection or photo gallery website (which this template is made for).

Consuming the speedlify API cached data which is running from my own local speedlify instance does affect the performance slightly, so maybe thats my argument for interchanging it and the accompanying JS for the static API with social icons.

Adding a list of social links to the footer may be more desired than tabbing onto the speedlify component which is an external link.

If anyone wants to weigh in on this, that'd be cool. If not, I probably will replace the speedlify-score component with a <ul> of social icons as links to the site owners social accounts.

Utilize eleventy-plugin-sharp-respimg to generate images at build-time

I finished creating a responsive image plugin that performs build-time image transformations and generates responsive image markup using <picture>. Now it's time to test it out!

Task: Use eleventy-plugin-sharp-respimg to automate the process of resizing images for the user and also generating the responsive image markup! The previous methodology required users to resize and reformat images on their own which is not ideal!

Huge update! 👍

Migrate to `eleventy-img` for build-time image transformations

See Phasing out this plugin and advising migration to eleventy-img

Gallery HTML code could be generated by iterating over gallery.json data

Instead of a static HTML code in _includes/layouts/base.njk, you could iterate over data available in _data/gallery.json.

This JSON file should be an array instead of an object:

[
    {
        "name": "imageOne",
        "src": "/images/shop-plants-small.jpg",
        "ng_large_src": "/images/shop-plants-large.webp 1024w",
        "ng_med_src": "/images/shop-plants-med.webp 640w",
        "ng_small_src": "/images/shop-plants-small.webp 320w",
        "large_src": "/images/shop-plants-large.jpg 1024w",
        "med_src": "/images/shop-plants-med.jpg 640w",
        "small_src": "/images/shop-plants-small.jpg 320w",
        "alt": "Terrace outside shop window with green plants and pink tree on night street"
    },
    {
…

Then, in _includes/layouts/base.njk you can loop:

<section class="gallery">
  <div class="image-grid">
    {% for image in gallery %}
      <div class="image-container">
        … # Here, replace `gallery.imageOne` with `image`
      </div>
    {% endfor %}
  </div>
</section>

You probably need to add the image page URL to the data file also.