Eleventy Transform: transform <img> inside of <picture> with other sources.

[zachleat]

Or better: optimize and replace instances of <picture>.

#208

[what1s1ove]

Hey @zachleat !

Could you please tell me if this will help solve the following problem:

Often, I need to have a picture element in advance to apply a class to it.

.intro__picture {}

But this leads to a nested picture element appearing in the markup after the plugin has processed it.

<picture class="intro__picture"> <!-- My picture element -->
  <picture> <!-- The picture element from 11ty plugin -->
    <img />
  </picture>
</picture>

As a result, I have to remove the picture element I wrote and rely on the one created by the plugin after it processes. However, writing styles in this case becomes difficult.

.intro picture {}

Sometimes, there is more than one image in a block, which means additional wrappers need to be created, etc. It seems to me that it would be good if the picture element that appears after the plugin is processed either took all the attributes from the current picture element, or if the plugin completely ignored creating a picture element if one already exists in the markup.

[ItsEthanH]

Just bumping this up as I'm having the same issue @what1s1ove is.

If there was a way to add classes to the <picture>s generated from the Transform Plugin, it would make the usability of the plugin that much better.

I know this plugin does something similar:
https://github.com/saneef/eleventy-plugin-img2picture

Perhaps we can add a hoistClass option to the image config? Or maybe an attribute override, similar to eleventy:widths or eleventy:formats? Or both?

[zachleat]

Support for optimizing <picture> will ship in v6.0.0-beta.1, e.g.

<picture class="outer"><source type="image/webp" srcset="./bio-2017.webp 1280w"><img src="./bio-2017.jpg" alt="My ugly mug" class="inner"></picture>

transforms to (when more than one entry in formats is in play):

<picture class="outer"><source type="image/webp" srcset="/img/KkPMmHd3hP-1280.webp 1280w"><img src="/img/KkPMmHd3hP-1280.jpeg" alt="My ugly mug" class="inner" width="1280" height="853"></picture>

Note that attributes on picture and img are preserved.

When only one entry is in formats and picture is not needed, the above transforms to:

<img src="/img/KkPMmHd3hP-1280.jpeg" alt="My ugly mug" class="inner" width="1280" height="853">

(picture is discarded)