This week I’ve published a Liquid project for building HTML picture element from FrontMatter and includes. Check the documentation for detailed getting started and usage instructions, the source code is available on GitHub. What follows is the TLDR for installation and usage…

Clone/Install

cd <your-project>


mkdir -p _includes/modules


git submodule add -b main\
                  --name includes-picture\
                  'https://github.com/liquid-utilities/includes-picture.git'\
                  '_includes/modules/includes-picture'

Usage

Define page or layout FrontMatter similar to…

pictures:
  funny_cat:
    url:
      base: assets/images/funny-cat/
      filter: relative_url

    img:
      alt: Picture of a funny cat playing with yarn ball
      src: playful-yarn.jpeg
      width: 300
      height: 200
      loading: lazy
      decoding: async

    sources:
      - srcset: playful-yarn.png

      - srcset:
        - playful-yarn-480.webp
        - playful-yarn-480-2x.webp 2x
        media: '(min-width: 600px)'

Check the API section for details on types, and structure, of data for the pictures name-space

Include named picture data within a layout, page, and or post file…

{% include modules/includes-picture/picture.html name='funny_cat' %}

HTML similar to the following will be generated…

<picture>
  <source type="image/png"
          srcset="/includes-picture/assets/images/funny-cat/playful-yarn.png"
  />

  <source type="image/webp"
          srcset="/includes-picture/assets/images/funny-cat/playful-yarn-480.webp,
                  /includes-picture/assets/images/funny-cat/playful-yarn-480-2x.webp 2x"
          media="(min-width: 600px)"
  />

  <img src="/includes-picture/assets/images/funny-cat/playful-yarn.jpeg"
       height="300"
       width="200"
       alt="Picture of a funny cat playing with yarn ball"
       loading="lazy"
       decoding="async"
  />
</picture>

Note, provided that your site is configured properly the /includes-picture/ portion of above src, and srcset, paths will be replaced automagically with the name of your repository.