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:

<?php
  // 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=""/>
</picture>

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!