image/picture/figure sizing shortcode

.eleventy.js

// Here's how I use this shortcode in my .md files:
//
// {% picture
//  "/2020/06/platform-adjacency-theory/relevance_gap_opt.png",
//  "Mind the gap."
// %}
//
// And for the <figure> version that puts the alt text visibly below the image:
//
// {% figure
//    "/assets/images/IMG_20200225_154710_1_MP.jpg",
//    "Simpler times, Tokyo." %}
//

// From my .eleventy.js; should do something more reusable fo sho.

  // An iteration on Phil Hawksworth's Netlify LMS <picture> img generator
  let getPicture = (url, alt="Missing alt text", width, height, style) => {
    let w = width ? width : "500";
    let w_attr = width ? `width="${width}"` : "";
    let h_attr = height ? `height="${height}"` : "";
    let s_attr = style ? `style="${style}"` : "";

    return `<picture>
      <source
        media="(min-width: 1200px)"
        srcset="${url}?nf_resize=fit&w=800  1x,
                ${url}?nf_resize=fit&w=1200 1.5x,
                ${url}?nf_resize=fit&w=1600 2x,
                ${url}?nf_resize=fit&w=2400 3x" >
      <source
        media="(min-width: 740px)"
        srcset="${url}?nf_resize=fit&w=700  1x,
                ${url}?nf_resize=fit&w=1150 1.5x,
                ${url}?nf_resize=fit&w=1400 2x,
                ${url}?nf_resize=fit&w=2100 3x" >
      <source
        media="(min-width: 350px)"
        srcset="${url}?nf_resize=fit&w=400  1x,
                ${url}?nf_resize=fit&w=600  1.5x,
                ${url}?nf_resize=fit&w=800  2x,
                ${url}?nf_resize=fit&w=1200 3x" >
      <source
        media="(min-width: 300px)"
        srcset="${url}?nf_resize=fit&w=300 1x,
                ${url}?nf_resize=fit&w=450 1.5x,
                ${url}?nf_resize=fit&w=600 2x,
                ${url}?nf_resize=fit&w=900 3x" >
      <img src="${url}?nf_resize=fit&w=400"
           alt="${alt}" ${w_attr} ${h_attr} ${s_attr}
           loading="lazy">
    </picture>`;
  };

  config.addShortcode("picture", getPicture);
  config.addShortcode("figure", (url, alt, ...otherargs) => {
    let pictureMarkup = getPicture(url, alt, ...otherargs);
    return `
<figure>
  ${pictureMarkup}
  <figcaption>${alt}</figcaption>
</figure>
      `;
  });

  config.addShortcode("figurelink", (imgurl, linkurl, alt, ...otherargs) => {
    let pictureMarkup = getPicture(imgurl, alt, ...otherargs);
    return `
<figure>
  <a href="${linkurl}" alt="${alt}">
    ${pictureMarkup}
  </a>
  <figcaption>${alt}</figcaption>
</figure>
    `;
  });

  // Use a single glob as it's much faster than many
  let exts = [ "css", "js", "jpg",
               "gif", "png", "svg", "webp", "avif",
               "webm", "av1", "mp3", "ogg", "mp4" ];
  config.addPassthroughCopy(`_posts/**/*.(${exts.join("|")})`);