how to get image srcset

Loops & Logic
1

Hi,

thanks for the effort of creating this plugin. How do I get responsive image?

I tried with and <img src=”{Field image_url}” but both link to original image. Any advice?

Thanks

1 Like
2

Hello, thank you for the question.

At the moment, getting image srcset is not supported yet - but it’s definitely on the roadmap to be implemented soon.

The current plan is to provide two additional fields, image_srcset and image_sizes, based on this article in the WordPress documentation: https://developer.wordpress.org/apis/handbook/responsive-images/#customizing-responsive-image-markup

When it’s ready, I’ll make sure to add a comment on this discussion thread to let you know.

2 Likes
3

Hi @gingibash - Just wanted to write you an update, that responsive image fields have been added.

For the featured image of a post, the fields are called image_srcset and image_sizes. They’re used like this:

<img src="{Field image_url}" srcset="{Field image_srcset}" sizes="{Field image_sizes}">

When inside an attachment loop, the fields are called srcset and sizes.

2 Likes
4

Hey, found this thread searching for a solution:

Can L&L display a ‘complete’ img tag (with loading=lazy, alt text, srcset, sizes, etc) from an ACF image field?

I’ve seen examples of L&L doing this kind of processing for a featured image, but I frequently use ACF image fields for things like ‘page/post hero backgrounds’ (which tend to be more panoramic and larger than typical featured-image thumbnails) and I’d like to be able to call those in a responsive way.

I assume it’s doable, but would love a copy/pasteable example :slight_smile:

Thx

DB

5

Hey Dave! Yeah, L&L is an extension of HTML which means that anything you can do in HTML (like loading=lazy) you can also do in L&L. I think this example in the docs should get you going in the right direction. There’s a link at the bottom of that page that explains how that process differs when you’re using an image custom field instead of the featured image field.

Also if you’re wanting to work with lazy loading, you might be interested in the Async tag.

6

Thanks @benjamin!

I was looking for more of an ‘all-purpose’ image field that would generate those attributes for me, though I suppose that’d be rather subjective. Are _sizes and _srcset fields available when you use an ACF image field with L&L?

Putting that Async tag in my toolkit!

7

Yeah, I think that’s exactly the issue; everyone is going to have different priorities and needs and it doesn’t necessarily make sense to automatically render all those other attributes of the image tag since that could either cause a bloated DOM or cause an image to display in ways that weren’t intended. I think that’s why there’s a shortcut for displaying the featured image using <Field image />, which generates a basic img tag on the front end, but if you want something more robust than that then it’s easiest to just use whatever attributes you want from HTML.

Yeah, here’s where the ACF image field is documented. You can see that all the same attributes are available for an ACF image loop/field as the regular attachment loop. So this:

<Loop acf_image=my_acf_image>
  <img src="{Field url}" srcset="{Field srcset}">
</Loop>

Is the same thing as this:

<Loop type=attachment id="{Field my_acf_image}">
  <img src="{Field url}" srcset="{Field srcset}">
</Loop>

And is also the same thing as this (although if you were to write it like this, you’d basically be creating two separate loops to get the field data, which isn’t as efficient):

<img src="{Field acf_image=my_acf_image field=url}" srcset="{Field acf_image=my_acf_image field=srcset}">
8

Man, you’re good at support. Thanks very much and I’d say please add this code to the docs - the ‘written out’ examples are soooo helpful.

Appreciate ya.

Db

9

Thanks for the kind words! As you’ve suggested, I’ve added the example to the bottom of this page in the docs. Figured I’d put it there instead of cluttering up the main ACF docs page with more examples that weren’t strictly related to ACF.

By the way, if you haven’t already, it would mean a lot if you’d be willing to share those kind words in a review of the plugin on the repo. We’re trying to bump that star rating up closer to five stars and every review helps get the word out there and allows us to continue to provide high-quality support for this free plugin. If you’d rather not share a review, I’ll just hold your appreciation in my heart hahaha :hugs:

Have a good one!

10

Absolutely I’ll give this a 5-star rating. Thanks.

1 Like