Oxygen Builder Tutorial

Dynamic Responsive Images with Advanced Custom Fields in Oxygen

Get Help with Oxygen
Blue globe and ball image
Categories: ,
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!

Phe Simmonds

Tutorial written by Phe Simmonds

Director & Web Developer at WinuSoft Web Design. When she's not working, Phe can usually be found mountain biking with her partner, Luis and dog, Bubba.
Blue background image Blue ball image

Other Tutorials

Blue circular lines

Get In Touch

Whether your business is just getting started or you’re in the middle of a growth spurt, we can design and develop a website that will help you scale.

"*" indicates required fields

This field is for validation purposes and should be left unchanged.
Copyright © 2024 WinuSoft Web Design