Dynamic Responsive Images with Advanced Custom Fields in Oxygen

September 1, 2021
Dynamic Responsive Images with Advanced Custom Fields in Oxygen

Using different dynamic responsive images, inside an Image element, at different breakpoints is currently not possible in Oxygen. However, there's a pretty simple workaround using a Code Block, a PHP snippet, a touch of CSS and an ACF image field.

This tutorial assumes that you've set a featured image that should be used on the All Devices breakpoint and then another image via Advanced Custom Fields that should be used on a smaller breakpoint. The ACF Image field must be set to return the Image URL and not the Array or ID.

Once you've set up your images, you need to add a Code Block to your design, which will be used to show the image. Set the width and height of the Code Block to 100% via Advanced > Size & Spacing. Next, add the following code to the PHP & HTML tab of the Code Block:

  // Get the post ID
  $post_id = get_the_ID();

  // Get the featured Image URL
  $image_url = get_the_post_thumbnail_url($post_id);

  // Get the ACF image URL
  $acf_url = get_field('mobile_image');

<picture class="dynamic-image">
  <source srcset="<?php echo $image_url; ?>" media="(min-width: 481px)"/>
  <img src="<?php echo $acf_url; ?>" alt=""/>

You will need to replace mobile_image on line #9 in the above code with the name of your ACF field.

In the above code, the image will switch to the ACF image when the viewport gets to 480px (and below), but you could adjust the min-width to 993px (for example) if you wanted the ACF image to show at 992px and below.

Finally, add the following CSS either to the CSS tab of the Code Block, or to a stylesheet via Manage > Stylesheets in the top right of the builder:

.dynamic-image img {
  max-width: 100%;

That should be all you need!

Tutorial written by Phe Simmonds
Director & Web Developer at WinuSoft Web Design & Senior Support Specialist at Oxygen. When she's not working, Phe can usually be found mountain biking with her partner, Luis.

Get in Touch

Contact us about any web, design or branding project that you have in mind. If you're after custom development services for your Oxygen Builder site, we can help with that too!

We're sure that you'll find our approach and dedication will be just what you need. We’re always happy to discuss your project with you. Drop us an email or give us a call to get started.