Skip Navigation

[Resolved] Image Srcset

This support ticket is created 5 years, 4 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
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

Tagged: 

This topic contains 4 replies, has 2 voices.

Last updated by yapM 5 years, 4 months ago.

Assisted by: Nigel.

Author
Posts
#1288879
1.png

I understand the img tag can output the img srcset but for certain reasons i have to use the url img (option 3 of screenshot)

How to trigger WP srcset when im using the url option? eg. {!{types field='project-images' size='medium' url='true'}!}{!{/types}!}

#1289385

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Melvin

I'm not sure your question makes sense.

The srcset attribute only exists in the context of the HTML img element. It's a way of declaring to the browser the relevant available image dimensions when displaying the image with an img tag.

If you are outputting the URL of an image, WordPress generates several files for different sizes of the same image, and you can output the URL of any one of those sizes.

If you were manually constructing your own img tag rather than using the one generated by the Types shortcode and you wanted to include a srcset attribute, you would have to manually construct it by using the Types shortcode multiple times to generate each of the URLs.

#1289407

sorry for the confusion Nigel.

How do i use toolset to manually construct my own img tag?

If you were manually constructing your own img tag rather than using the one generated by the Types shortcode and you wanted to include a srcset attribute, you would have to manually construct it by using the Types shortcode multiple times to generate each of the URLs

#1289455

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

If you use the types shortcode to output the image tag it will generate something like this (from my local test site):

<img width="300" height="142" src="<em><u>hidden link</u></em>" class="attachment-medium" alt="" title="cats2.jpg" style="" srcset="<em><u>hidden link</u></em> 300w, <em><u>hidden link</u></em> 768w, <em><u>hidden link</u></em> 1024w, <em><u>hidden link</u></em> 1400w" sizes="(max-width: 300px) 100vw, 300px">

So you would be looking to reproduce something similar, generating the URL parts of the above using multiple insertions of the types shortcode with the url='true' parameter, which would go something like...

<img width="300" height="142" src="[types field='slide' size='medium' url='true'][/types]" class="attachment-medium" alt="" title="cats2.jpg" style="" srcset="[types field='slide' size='thumbnail' url='true'][/types] 300w, [types field='slide' size='medium' url='true'][/types] 768w, [types field='slide' size='large' url='true'][/types] 1024w, [types field='slide' size='full' url='true'][/types] 1400w" sizes="(max-width: 300px) 100vw, 300px">
#1290135

My issue is resolved now. Thank you!