12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Mar 27, 2020

Using a Random ACF Gallery Image as Section Background in Oxygen

David Browne

In the WPDevDesign facebook group, a member asked about having a section that uses a random image from a pool of images as a background. In this premium tutorial we'll walkthrough how to do it in Oxygen

We'll go through the following steps;

  • Create a gallery field with ACF Pro, applied to pages.
  • Create a custom function to return the URL of one random image from that gallery field.
  • Use Oxygen's dynamic data options to apply that URL as our section background image.

Create a gallery field with ACF Pro

The gallery field works well for this as it's an intuitive way the client can add a number of images to be randomly selected from.

We'll name our gallery field 'hero-background', apply it to pages, and be sure the 'return format' setting is set to 'image array'.

Create our function

We'll need to create a custom function that takes the array of images from the gallery and returns the URL of one of those images, chosen randomly.

In our code snippets, we can create a function with this code;

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.