picture shortcodes

shortcodes_snippet.js

  // 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>
    `;
  });