Adding Image Support

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.

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:

<figure>
  <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}" />
</figure>`

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