Skip Navigation

[Resolved] Output of all image sizes with srcset

This support ticket is created 2 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 5 replies, has 2 voices.

Last updated by Waqar 2 years, 10 months ago.

Assisted by: Waqar.

Author
Posts
#2093713

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") ); ?>

#2094115

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#2096193

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

#2097851

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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.

#2100669

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.

#2101283

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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?

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.