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="https://www.example.com/wp-content/uploads/hero-image-1600x660.jpg" 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="https://www.example.com/wp-content/uploads/hero-image-1280x854.jpg" class="attachment-large" alt="" srcset="https://www.example.com/wp-content/uploads/hero-image-1280x854.jpg 1280w, https://www.example.com/wp-content/uploads/hero-image-300x200.jpg 300w, https://www.example.com/wp-content/uploads/hero-image-600x400.jpg 600w, https://www.example.com/wp-content/uploads/hero-image-768x512.jpg 768w, https://www.example.com/wp-content/uploads/hero-image.jpg 2048w" sizes="(max-width: 1280px) 100vw, 1280px">I hope that helps someone!
Comment