Wordpress Advanced Custom Fields Responsive Images

Question

How to make Wordpress Advanced Custom Fields return Responsive Images just like within a post?

I'm talking about the "image url" field - of course it only returns an url. How can I then create the Responsive Image HTML tag?

I was talking about different image file sizes and resolutions via srcset: https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

Answer 1

If ACF is only returning the image URL you will need to add the image HTML around it and then create responsive CSS, so, for example:

The PHP

echo '<img class="responsive" src="' . $img_url . '">';

The CSS

img.responsive {width: 100%; height: auto;}

ACF is incredibly flexible so you can choose the image size returned based on the media sizes set within the WordPress dashboard. Also the responsive CSS really depends on the HTML structure of your site, but hopefully the code above will give you a starting point.