[Resolved] Output of all image sizes with srcset

[Author]

Posts

[alexanderS-9]

I am trying to output the available image sizes with srcset to be mobile-friendly. Is there no option to have Toolset do that by default?

Right now I am using for example:
<?php echo types_render_field( "thumbnail", array( "url" => "true", "size" => "image-480") ); ?>

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

If you're using Toolset's Fields API, the 'srcet' attribute for responsive images is included in the output for the image tag and not if you're calling only the image's URL. When calling an image's URL, it makes sense to assume that the user only needs the URL of the specific image size.

To get the image tag from the field with responsive image 'srcset' attributes, you can use:
( ref: https://toolset.com/documentation/customizing-sites-using-php/functions/#image )

<?php echo types_render_field( "thumbnail", array( "size" => "large", "proportional" => false ) ); ?>

Note: the 'srcset' attributes will only be included for the default WordPress image sizes like "large" or "medium" and not for custom registered image sizes or images with custom width and height values.

regards,
Waqar

[alexanderS-9]

Hi,

Thanks for the explanation. Though it doesn't help me when only the default sizes are added to the srcset, how would I add the custom ones I added? I need only them basically, I do not even need the default ones.

Regards,

Alex

[Waqar]

Thanks for writing back.

I've performed some further tests and I'm afraid, there is no built-in feature available to achieve this.

Thinking this through, the whole point of using the responsive image feature using 'srcset' attribute is to allow browsers to choose the right image size based on the screen width.

For this reason, if someone needs to call an image in a specific custom size, then it is safe to assume that he/she really needs the image in that particular size, instead of allowing the browser to make that decision.

If you could share an example scenario where this can be useful for custom image sizes too, I'll be happy to share it with the development team.

[alexanderS-9]

Yes, that is the exact reason. The problem is that the default sizes WP supplies are hardly enough, and that is why most people add additional image sizes to have a better selection available in srcset.

[Waqar]

Thanks for the update and glad that we agree on the need for custom image sizes.

Getting back to my point in the earlier reply, there is no downside in calling the image in the large size, since through the srcset attribute, other available smaller image sizes will automatically be included in the output for the browser to choose from.
( ref: https://toolset.com/forums/topic/output-of-all-image-sizes-with-srcset/#post-2094115 )

Can you please try it and confirm that you see the srcset attribute in the image output?