Retrieving optimized (hashed) image path in a template loop

[techbridgedev]

The index for my blog entries displays a thumbnail, link, and excerpt for each entry. I'd like to use responsive images for the thumbnails. I'm already generating the images with the Eleventy image plugin.

How can I retrieve the hashed image path inside the template loop for the thumbnails?

Here's what I currently have (simplified for clarity). post.data.image is a string in the individual post frontmatter.

{%- for post in collections.blog | sortByPubDate | reverse | limit(4) -%}
  <a href="{{ post.url }}">
    <img src="{{ post.data.image }}" alt="Read “{{ post.data.title | safe }}”">
  </a>
{%- endfor -%}

I have got an image shortcode which uses the <picture> syntax, but I haven't found a way to use the page data inside it:

{% image "./{{ post.data.image }}", "Alt atttibute content" %}

Fails because no image is found at that location, likely because it's fired before the image transform.

Can anyone point me in the right direction?

[dwkns]

Can you share the code for your image shortcode?
Also, typically what does post.data.image return? Is it an image on your machine or a remote image? What sort of path?

[seezee]

Accidentally opened this issue with the wrong account, in case you're wondering why I'm replying as seezee; see reply below.

[seezee]

post.data.image grabs the value of the image key in my frontmatter, which is a string: the URL of the featured image (e.g., /assets/images/blog/my-featured-image.jpg). But we probably need to grab the first image on each post, which uses our shortcode like this:

{% image "featured", "Optional classnames", "Some alt text", "A caption", "eager" %}

featured returns the same value as post.data.image, but via the shortcode (see below).

Grabbing post.data.image and passing it to the loop returns the unprocessed image string, so it won't work. But I don't know how to access the first image in the loop (it's not supplied data, since it's not in the page frontmatter).

Here is the shortcode in eleventy.js:

// Image shortcode

const imageShortcode = async function (
  src,
  className = undefined,
  alt,
  caption,
  loading,
  fetchpriority,
  // Widths and sizes calculated by RespImageLint
  // See https://ausi.github.io/respimagelint/
  sizes,
  widths = [`auto`, 200, 270, 330, 470, 530, 795, 886, 1024, 1240, 1320, 1450, 1530, 1560, 1774, 1920, 2048],
  formats = [`webp`, `jpeg`]
) {
  // Disallow empty alt attribute
  try {
    if ((alt === ``) || (!alt)) throw `alt attribute for ${src} on ${this.page.fileSlug} is empty`;

    // Featured image attribute
    if (src === `featured`) {
      if (!this.ctx.image) {
        throw `Featured image not set for ${this.page.fileSlug}!`;
      } else {
        src = `./src${this.ctx.image}`;
        fetchpriority = `high`;
      }
    };

    if (loading === `eager`) {
      sizes = `(min-width: 1280px) 886px, (min-width: 420px) calc(82.14vw - 149px), calc(99vw - 17px)`
    } else if (loading === `large`) {
      sizes = `auto, ( min-width: 1280px) 886px, (min-width: 420px) calc(82.14vw - 149px), calc(99vw - 17px)`
    } else {
      sizes = `auto, (min-width: 1300px) 265px, (min-width: 1040px) 20.42vw, (min-width: 660px) calc(42.22vw - 95px), (min-width: 440px) calc(86vw - 165px), (min-width: 360px) calc(66.67vw - 85px), calc(100vw - 20px)`
    };

  } catch(err) {
    console.log(err);
  };

  const imageMetadata = await Image(src, {
    widths: [...widths, null],
    formats: [...formats, null],
    outputDir: path.dirname(this.page.outputPath),
    urlPath: this.page.url,
    extensions: [`html`, `md`],
    transform: (sharp) => {
      sharp.keepExif();
    }
  });

  /** Maps a config of attribute-value pairs to an HTML string
   * representing those same attribute-value pairs.
   */
  const stringifyAttributes = (attributeMap) => {
    return Object.entries(attributeMap)
      .map(([attribute, value]) => {
        if ((typeof value === `undefined`) || (value === ``)) return ``;
        return `${attribute}="${value}"`;
      })
      .join(` `);
  };

  const sourceHtmlString = Object.values(imageMetadata)
    // Map each format to the source HTML markup
    .map((images) => {
      // The first entry is representative of all the others
      // since they each have the same shape
      const { sourceType } = images[0];

      // Use our util from earlier to make our lives easier
      const sourceAttributes = stringifyAttributes({
        type: sourceType,
        // srcset needs to be a comma-separated attribute
        srcset: images.map((image) => image.srcset).join(`, `),
        sizes,
      });

      // Return one <source> per format
      return `<source ${sourceAttributes}>`;
    })
    .join(`\n`);

  const getLargestImage = (format) => {
    const images = imageMetadata[format];
    return images[images.length - 1];
  };

  const largestUnoptimizedImg = getLargestImage(formats[0]);
  if (loading === `eager`) {
    loading;
  } else {
    loading = `lazy`;
  };

  const imgAttributes = stringifyAttributes({
    src: largestUnoptimizedImg.url,
    width: largestUnoptimizedImg.width,
    height: largestUnoptimizedImg.height,
    alt,
    loading,
    fetchpriority,
    decoding: `async`,
  });

  const imgHtmlString = `<img ${imgAttributes}>`;

  const pictureAttributes = stringifyAttributes({
    class: className,
  });
  let picture;
  if (caption === undefined) {
    picture = `<picture ${pictureAttributes}>
      ${sourceHtmlString}
      ${imgHtmlString}
    </picture>`;
  } else {
    picture = `<figure>
      <picture ${pictureAttributes}>
        ${sourceHtmlString}
        ${imgHtmlString}
      </picture>
      <figcaption>${caption}</figcaption>
    </figure>`;
  }

  // "outdent" prevents Markdown from interpreting indented strings as
  // Markdown
  return outdent`${picture}`;
};

// Register image shortcode
eleventyConfig.addNunjucksAsyncShortcode(`image`, imageShortcode);```

[seezee]

I'm not dead set on using the shortcode for this; that's only one possible approach. I can create the picture element in HTML since this is a template; the issue is getting the correct URL from the individual posts as we loop through them.

[dwkns]

I'm struggling to understand how you are fitting everything together. Specifically I'm not sure what you mean by accessing the first image in the loop.

I've put together a quick demo repo to show you how I would go about this. The shortcode is much simpler than yours but it should be obvious how you can adapt it to your code.

In short you should be able to pass the image to the shortcode in multiple places as I've done here. It's usually about getting variable name right.

See if that helps, if not if you can explain in more detail what you are actually doing (or share a repo) that would help us understand what you're trying to do.

It's a different problem if you want to get the first image of a page (not one defined in front-matter) and use that for your thumbnails. I'm pretty sure people have done that before, might be worth asking on the Discord.

[seezee]

Specifically I'm not sure what you mean by accessing the first image in the loop.

Each post has a featured image which is the first image.

The frontmatter contains a key:value of

image: /assets/images/blog/a-post-slug/image.jpg

And then I have:

{{ title }}

{% image "featured", "", "alt text", "caption", "eager" %} <!-- This is the first image on the page and is used in my RSS feed as well. -->

Where "featured" grabs the value of the image key in the frontmatter.

In eleventy.js, the value of src becomes:

src = `./src${this.ctx.image}`;

Because I use the image key:value in other places where the URL cannot start with ./src, but the shortcode expects a URL like ./src/assets/images/blog/a-post-slug/image.jpg

Is that any clearer?

I tried your code, but because of this specific restriction on the URL's format, it doesn't work ("Cannot stat /assets/images/blog/a-post-slug/image.jpg").

Thanks for the help so far.

[dwkns]

I understand. In which case you can just append the ./src within the shortcode itself. You would then still pass in the URL of the image rather than 'featured' and relying on this.ctx.image. It should simplify your shortcode code somewhat too.

Unless you have another good reason it's wise to pass in the URL of the image rather than rely on getting it from context (this.ctx).

When shortcodes start to get this complex it can sometimes be a good idea to pass in an object with your options rather than relying on a comma delimited string. Makes them much easier to read and if you set sensible defaults in the shortcode, you only have to pass in the values you need for that instance. You can still override any option you wish to.

This would also allow you to pass in the ./src if you don't want to apply it to every image you process.

So something like:

{%
  myImage image, {
    css: "w-full h-64 object-cover",
    alt: "what ever you want this to be",
    srcDir: "./src"
    }
%}

And then in the shortcode:

eleventyConfig.addShortcode("myImage", async function (src, options = {}) {

  let { css,
	  alt,
	  widths = [300, 600], // can set sensible defaults 
	  sizes = "(max-width: 600px) 100vw, 600px", 
	  srcDir
  } = options;
  
  let sourceImagePath = `${srcDir}${src}`;
  
  let metadata = await Image(sourceImagePath, {
	  widths: widths,
	  formats: ["jpeg", "png"],
	  outputDir: "dist/img/",
  })
...

I've updated the repo with a working version with these changes.

[seezee]

I was able to tweak your example for my specific case (different file locations, need to output paths to the different image sizes for the <source> element). Posting the code here for anyone else facing this problem. I had to give up on copying my images to the folders that contain the parent post (e.g., outputDir: path.dirname(this.page.outputPath)), but that's a small price to pay to get this working.

Note dryRun: true to avoid processing images twice (I'm using more than one image shortcode on my site).

  const thumbnailShortcode = async (src, options = {}) => {
    let {
      className,
      alt,
      sizes,
      widths = [`auto`, 270, 330, 470, 530, 795, 886, 1024],
      srcDir,
      loading,
      fetchpriority
    } = options;

    if (loading === `eager`) {
      sizes = `(min-width: 1880px) 320px, (min-width: 1360px) calc(3.8vw + 249px), (min-width: 1020px) calc(32.19vw - 24px), (min-width: 680px) calc(48.75vw - 25px), calc(100.28vw - 41px)`
    } else { // `auto` can only be used with lazy-loaded images.
      sizes = `auto, (min-width: 1880px) 320px, (min-width: 1360px) calc(3.8vw + 249px), (min-width: 1020px) calc(32.19vw - 24px), (min-width: 680px) calc(48.75vw - 25px), calc(100.28vw - 41px)`
    };

    const sourceImagePath = `${srcDir}${src}`;

    const metadata = await Image(sourceImagePath, {
      widths: widths,
      formats: [`webp`, `jpeg`],
      outputDir: `_site/assets/images/`,
      urlPath: `/assets/images/`,
      dryRun: true // Don't process images twice.
    })

    // Trim dash + any numerals at the end of the filename, along with the file suffix
    // e.g., `path/to/my-image-400.jpeg` becomes `path/to/my-image`.
    function getBaseName(filePath) {
      const imgPath = filePath;
      const baseName = imgPath.replace(/\-[\d]*\.jpeg$/g, ``)
      return `${baseName}`;
    }

    const data = metadata.jpeg[metadata.jpeg.length - 1];
    // Use our function to get the file path stem.
    const basePath = getBaseName(data.url);

    const picture = `<picture>
  <source
    sizes="${sizes}"
    srcset="
      ${basePath}-270.webp 270w,
      ${basePath}-330.webp 330w,
      ${basePath}-470.webp 470w,
      ${basePath}-530.webp 530w,
      ${basePath}-795.webp 795w,
      ${basePath}-886.webp 886w,
      ${basePath}-1024.webp 1024w
    "
    type="image/webp"
  >
  <source
    sizes="${sizes}"
    srcset="
      ${basePath}-270.jpeg 270w,
      ${basePath}-330.jpeg 330w,
      ${basePath}-470.jpeg 470w,
      ${basePath}-530.jpeg 530w,
      ${basePath}-795.jpeg 795w,
      ${basePath}-886.jpeg 886w,
      ${basePath}-1024.jpeg 1024w
    "
    type="image/jpeg"
  >
  <img src="${data.url}" class="${className}" width="${data.width}" height="${data.height}" alt="${alt}" loading="${loading}" fetchpriority="${fetchpriority}" decoding="async">
</picture>`

	  return picture;
	};


// Register getThumbnail image shortcode
eleventyConfig.addNunjucksAsyncShortcode(`getThumbnail`, thumbnailShortcode);

And in the shortcode:

{%
  getThumbnail post.data.image, {
    className: "",
    alt: "",
    srcDir: "./src",
    loading: "eager", <!-- Or "lazy" -->
    fetchpriority: "high" <!-- Or "auto" -->
  }
%}

The one thing I haven't figured out is how to grab the post title and include it in the alt attribute. This will not work: alt: "Read “post.data.title”"

Thank you for helping. I've been knocking my head against this problem for a week & not really making any progress.

One thing I'm curious about: What does this line do?

const data = metadata.jpeg[metadata.jpeg.length - 1];

[dwkns]

metadata contains an object for each type of image you create (jpeg, png, webp etc). And for each image type it produces an array containing the metadata for each processed image. You can use this to construct your HTML output. You don't need to manually construct your base path, it's all there for you.

In my example code it outputs:

metadata:  {
  jpeg: [
    {
      format: 'jpeg',
      width: 300,
      height: 225,
      url: '/img/iDG-HjOJuf-300.jpeg',
      sourceType: 'image/jpeg',
      srcset: '/img/iDG-HjOJuf-300.jpeg 300w',
      filename: 'iDG-HjOJuf-300.jpeg',
      outputPath: 'dist/img/iDG-HjOJuf-300.jpeg',
      size: 11317
    },
    {
      format: 'jpeg',
      width: 600,
      height: 450,
      url: '/img/iDG-HjOJuf-600.jpeg',
      sourceType: 'image/jpeg',
      srcset: '/img/iDG-HjOJuf-600.jpeg 600w',
      filename: 'iDG-HjOJuf-600.jpeg',
      outputPath: 'dist/img/iDG-HjOJuf-600.jpeg',
      size: 38747
    }
  ],
  png: [
    {
      format: 'png',
      width: 300,
      height: 225,
      url: '/img/iDG-HjOJuf-300.png',
      sourceType: 'image/png',
      srcset: '/img/iDG-HjOJuf-300.png 300w',
      filename: 'iDG-HjOJuf-300.png',
      outputPath: 'dist/img/iDG-HjOJuf-300.png',
      size: 136039
    },
    {
      format: 'png',
      width: 600,
      height: 450,
      url: '/img/iDG-HjOJuf-600.png',
      sourceType: 'image/png',
      srcset: '/img/iDG-HjOJuf-600.png 600w',
      filename: 'iDG-HjOJuf-600.png',
      outputPath: 'dist/img/iDG-HjOJuf-600.png',
      size: 480138
    }
  ]
}

const data = metadata.jpeg[metadata.jpeg.length - 1]; is just a dirty hack to get the info for the last JPEG created. You probably don't want to rely on that. It's better loop those format objects and get your HTML srcset values from there.

You can put your images next to posts if you want to. You can amend the shortcode so you can pass in an outputDir.

For the posts themselves you can pass in outputDir : page.url Or rely on this.page.url as a default in the shortcode.

For the thumbnails you want to pass in outputDir : post.url — the location of the post. NOT the location of that page that the thumbnails are being displayed on which is \

In the posts loop you can pass in alt: post.data.title to set the image to the alt tag.
On the thumbnails you just pass in the title itself alt: title.

I've updated the repo to show you it working.

[seezee]

Oh, that makes so much sense. I'll have a look at the repo tomorrow, but even this example makes it easier to understand what's going on under the hood.

Thank you!

[seezee]

Final code (hopefully), based on @dwkns examples:

const thumbnailShortcode = async (src, options = {}) => {
  let {
    outputDir,
    className = ``,
    alt = ``,
    sizes,
    widths = [`auto`, 270, 330, 470, 530, 795, 886, 1024],
    srcDir = `./src`,
    loading,
    fetchpriority
  } = options;

  // `auto` attribute can only be used with loading="lazy".
  if (loading === `eager`) {
    sizes = `(min-width: 1880px) 320px, (min-width: 1360px) calc(3.8vw + 249px), (min-width: 1020px) calc(32.19vw - 24px), (min-width: 680px) calc(48.75vw - 25px), calc(100.28vw - 41px)`
  } else {
    sizes = `auto, (min-width: 1880px) 320px, (min-width: 1360px) calc(3.8vw + 249px), (min-width: 1020px) calc(32.19vw - 24px), (min-width: 680px) calc(48.75vw - 25px), calc(100.28vw - 41px)`
  };

  const sourceImagePath = `${srcDir}${src}`;

  const metadata = await Image(sourceImagePath, {
    widths: widths,
    formats: [`webp`, `jpeg`],
    outputDir: `_site/${outputDir}`,
    urlPath: outputDir,
    dryRun: true // Don't process images twice.
  })

  // Get the last (largest) JPEG.
  const data = metadata.jpeg[metadata.jpeg.length - 1];

  // Construct the data for srcset.
  const webpData = metadata.webp
  const jpegData = metadata.jpeg
  const webpLen = webpData.length;
  const jpegLen = jpegData.length;

  // Loop through the data and grab the srcsets.
  let webpSrcset = ``;
  for (let i = 0; i < webpLen; i++) {
    // Construct the srcsets and append comma and space to each.
    webpSrcset += webpData[i].srcset + `, `;
  }

  let jpegSrcset = ``;
  for (let i = 0; i < jpegLen; i++) {
    jpegSrcset += jpegData[i].srcset + `, `;
  }

  // Stringify the output. N.B.: Output includes double-quotation marks!
  webpSrcset = JSON.stringify(webpSrcset);
  jpegSrcset = JSON.stringify(jpegSrcset);

  const picture = `<picture>
<source
  sizes="${sizes}"
  srcset=${webpSrcset}
  type="image/webp"
>
<source
  sizes="${sizes}"
  srcset=${jpegSrcset}
  type="image/jpeg"
>
<img src="${data.url}" class="${className}" width="${data.width}" height="${data.height}" alt="Read “${alt}”" loading="${loading}" fetchpriority="${fetchpriority}" decoding="async">
</picture>`

  return picture;
};

// Register getThumbnail image shortcode
eleventyConfig.addNunjucksAsyncShortcode(`getThumbnail`, thumbnailShortcode);

{%
  getThumbnail post.data.image, {
    outputDir: post.url,
    alt: post.data.title,
    loading: "eager", // Or "lazy"
    fetchpriority: "high" // Or "auto"
  }
%}