MENU

Dynamic Responsive Images with Advanced Custom Fields in Oxygen

September 1, 2021
Posted in: , ,

A current limitation of Oxygen is that it's not possible to add different dynamic images inside an Image element on different breakpoints. 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!

Tutorial written by Soph Simmonds
Director & Web Developer at WinuSoft Web Design & Senior Support Specialist at Oxygen. When she's not working, Soph 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. 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. Just fill out the form or give us a call to get started.
info@winusoft.co.uk
07889 216767
winusoft.co.uk
facebook-squarelinkedin-squaregithub-squaretwitterfacebookenvelopelinkedinxinginstagrampaper-planepinterest-pwhatsappcommentinghomemagic-wandcloud-uploaddatabaseenvelopeeyefile-addgraduation-hatpicturebooksmartphonemenuchevron-down