Toolset Image Output and the srcset Attribute

This is something I couldn’t find an answer to on my own, so I got help from the Toolset support staff and thought I would post about it here to help other WordPress/Toolset developers.

When using a Types image field shortcode, only the default image sizes will result in markup that includes the ‘srcset‘ attribute. My content template was using a custom image size, ‘hero_full’, defined in my theme:

[types field='hero_image' alt='%%ALT%%' size='hero-full' resize='proportional'][/types]

This resulted in a plain image tag with no srcset defined, which is terrible for mobile performance:

<img width="1600" height="660" src="" class="attachment-hero-full" alt="">

If you use the default ‘large’ image size, for example, WordPress/Toolset will output the correct image including the srcset:

<img width="1280" height="854" src="" class="attachment-large" alt="" srcset=" 1280w, 300w, 600w, 768w, 2048w" sizes="(max-width: 1280px) 100vw, 1280px">

I hope that helps someone!

| Categories: WordPress.

Previous Post:

Comments are closed.


(will not be published)