Cloudinary API - solving CLS by querying for image size at build?

[danbraun]

Hello! I'm using Cloudinary URLs to populate srcset in my blog post template. I use a macro:

{% macro figure(filename, alt, caption) %}
{% set source_low = "https://res.cloudinary.com/xxxxxxxxxx/image/upload/t_blog-low/v1673798931/blog/" %}
{% set source_med = "https://res.cloudinary.com/xxxxxxxxxx/image/upload/t_blog-med/v1673798931/blog/" %}
{% set source_high = "https://res.cloudinary.com/xxxxxxxxxx/image/upload/t_blog-high/v1673798931/blog/" %}
  <figure>
      <img src="{{ source_med + filename }}" 
           srcset="{{ source_low + filename }} 400w,
                   {{ source_med + filename }} 800w,
                   {{ source_high + filename }} 1600w"
           sizes="(min-width: 768px) 768px, 100vw"
           alt="{{ alt }}" 
           loading="lazy">
    <figcaption>{{ caption }}</figcaption>
  </figure>
{% endmacro %}

This works, but I would like to solve cumulative layout shift by adding width and height values to the img element. I need the heights to be dynamic because I don't want all the images to be the same size.

Because of this, I believe I need to query Cloudinary for this data during Eleventy's build time.

How should I approach this? Thank you!

[cfjedimaster]

You can use the Cloudinary SDK to get metadata from your media library. Are you familiar with their Node SDK?

[cfjedimaster]

Ok, so I'd start there - use the code I linked to to get all the images from it, and in that result, you get the 'real' height and width. This could be done in your _data folder. Now, I see you are using a macro based on a filename. You need some way to associate the filename you pass there with your data, agreed?

[danbraun]

I think i agree... Sounds like you're saying I need to create a filter in the _data folder with js, that I can call from my macro passing a filename as a 'key' to search that returned list from blog/ folder... and return the width/height to my width/height attributes, correct?

EDIT: er no...not a filter. Add data from the data obj... something like this? https://www.11ty.dev/docs/data-js/#fetching-data-from-a-remote-api

[cfjedimaster]

Well what I was thinking is, the _data file returns an array of images (with all the data from the API, including w/h, and in theory you could remove what you don't need). Then your macro uses the same data. I've not built macros before so I don't know if they can access Eleventy data directly.

[danbraun]

Thanks for your help Raymond, I now have plenty to dig into and try out.

[cfjedimaster]

Cool beans - and hope my preso was worth your time! :)

[danbraun]

I think I have a solution for my particular scenario.

I invite any comments, criticism or corrections to this approach.

To solve CLS I'm adding the width and height attribute values by using Cloudinary's fl_getinfo "transformation", which is an odd thing to call it as it just returns txt data.

I switched from using a macro to the seemingly more appropriate shortcode, which I call from my blog markdown files with named parameters. In the shortcode definition, I use addNunjucksAsyncShortcode, as it is making a remote request. Then with eleventy's eleventy-fetch plugin, the results are cached so during development I'm not running up transformation tallies at Cloudinary ... anything but the free tier is big $$$ which I don't foresee ever paying for unless this personal blog of mine is going to make it rain somehow...

In one of my blog posts:

<!-- blog-post.md -->
{% blogImage filename="rockisland", alt="Sunrise on Rock Island", caption="Sunrise on Rock Island" %}

Function returning shortcode result. Uses eleventy-fetch to fetch and cache image dimensions for solving CLS

/* utils.js */
const eleventyFetch = require("@11ty/eleventy-fetch");
const blogImage = async (params) => {
    const source_low = "https://res.cloudinary.com/***********/image/upload/t_blog-low/v1673798931/blog/";
    const source_med = "https://res.cloudinary.com/***********/image/upload/t_blog-med/v1673798931/blog/";
    const source_high = "https://res.cloudinary.com/***********/image/upload/t_blog-high/v1673798931/blog/";
    // below I'm using a named transition t_getimageinfo in order to add some security - but its just using fl_getinfo underneath
    const infoURL = `https://res.cloudinary.com/***********/image/upload/t_getimageinfo/blog/${params.filename}`;
    let width = 0;
    let height = 0;
    const result = await eleventyFetch(infoURL, {
        duration: "1y",
        type: "json"
    }).catch((error) => {
        console.log(`oh no...${error}`)
    })
    width = result.output.width;
    height = result.output.height;
    return `<figure>
      <img src="${source_med}${params.filename}" 
           srcset="${source_low}${params.filename} 400w,
           ${source_med}${params.filename} 800w,
           ${source_high}${params.filename} 1600w"
           sizes="(min-width: 768px) 768px, 100vw"
           alt="${params.alt}" 
           loading="lazy"
           width="${width}"
           height="${height}">
    <figcaption>${params.caption}</figcaption>
  </figure>`
}

Create the shortcode in eleventy cofig:

/* .eleventy.js */
const { blogImage } = require("./utils");
module.exports = (function (eleventyConfig) {
// ...
// add blogImage shortcode, cache image info
  eleventyConfig.addNunjucksAsyncShortcode("blogImage", (params) => blogImage(params));
// ...
}

[danbraun]

I was planning to blog about it ;) just wanted to "leave it in the water" for to a bit and make sure I wasn't doing something silly 🤣

[cfjedimaster]

Let me know please when you do.

[danbraun]

@cfjedimaster my post is up :) https://blog.danbraun.me/posts/eleventy-images-and-cloudinary/

[cfjedimaster]

Very cool. FYI, typo: "Chrome's, Lighthouse"

[danbraun]

Thank you! My editor's on vacation 🤣