Picture element using ACF?

• irisalexa

• March 22, 2019 at 1:07 am

Hey everyone,

please help a desperate noob – I just started learning PHP and am totally overwhelmed.

I want to display hero images at the top of our pages (as seen here: https://www.fellomed.de/krankheiten/hundekrankheiten/hot-spot-beim-hund/). Right now we do so by using a slider – which is not ideal in terms of loading time. So I’m looking for an alternative.

I figured out how to show custom static images by using ACF. However, when just scaling them down for mobile users, they are very narrow and the text isn’t easy to read.

I also managed to deliver different images based on the screen size by using the picture-element, like so:

<picture>
<source srcset=”MobileImage.jpg” media=”(max-width: 799px)”>
<source srcset=”DesktopImage.jpg” media=”(min-width: 800px)”>

</picture>

But that would limit me to using the same images on every page, and as I said, I want to choose the images based on the specific post.

Is there a way to “frankenstein” these two together? Or another way for me to show different images based on the screen size? I feel like maybe repeater fields and a loop would be the way to go, but I can’t figure out how :(.

Any advice would be greatly appreciated!