Adding Image Support

Posted Monday, March 14, 2022 by Sri.Tagged PROJECT, SRIGARTEN

Testing image processing filters!

Testing methods of adding image support to 11ty. I'm using the Image plugin which creates cached pre-sized versions of a multitude of image formats. It's similar to my old LazyImageLayout plugin for Wordpress in terms of the image generation. I need to add some new tags to support images in a similar way.

Currently I have {% Image src=, alt= %} tag is currently producing this output.

testing imagetesting image (full size image)

The default implementation of the sample code for the Image plugin, producing:

  return `<img src='/media${url}'/>`;

I'm now having it output the {%Figure%} output I'm using for my hacked Tufte CSS theme, which generates additional markup that looks like:

  <label for=${id} class='margin-toggle'>&#8853;</label>
  <input type="checkbox" id="${id}" class="margin-toggle"/>
  <span class="marginnote">${caption}</span>
  <img src="/media${url}" alt="${alt}" />

So we certainly can fix this up to support all the LZIL modes and more!