-1

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/

Lee.D
  • 1
  • 2
  • Welcome to Stack Overflow. What have you already tried yourself to do this? Please review [How much research effort is expected?](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users). Stack Overflow is not a coding service. You are expected to ***research your issue and make a good attempt to write the code yourself*** before posting. If you get stuck on something *specific*, come back and include a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) and a summary of what you tried – FluffyKitten Sep 18 '17 at 01:26
  • Welcome to Sack Overflow. Please spam us with useless, non-working code, cause otherwise we won't trust you and downvote your question - or have it deleted entirely. My question was formulated perfectly, I have an image url - but I need to have the responsive images code generated. What code from my site would have improved the question, except for the correct answer that I don't have at the moment I'm asking the question? – Lee.D Oct 18 '17 at 14:35

1 Answers1

0

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.

morgyface
  • 368
  • 1
  • 9
  • Thanks, but I didn't mean "responsive" in terms of the displayed layout, rather than responsive images using srcset: https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/ – Lee.D Oct 18 '17 at 14:37