12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Nov 10, 2021

Random Meta Box Image as Section Background in Oxygen

Sridhar Katakam

This members-only tutorial provides the steps to pull the URL of a random image from the images uploaded to "Image Advanced" type of custom field created using Meta Box so it can be applied as background of a hero section in Oxygen.

Note: Random does not necessarily mean different. The same image can appear in subsequent reloads.

For doing the same but with ACF, refer to this tutorial instead.

Step 1

Install and activate Meta Box.

For registering a custom field group you could either go through their documentation and write the code yourself or use their online generator or use Meta Box AIO (this is used in this example).

Go to Meta Box > Custom Fields and add a new field group.

Enter a title like "Page Fields".

Change the label to "Hero Background".

You may leave the auto generated ID as is or change it so it is unique.

Select "Image Advanced" from the Type dropdown.

From the Settings tab, set the field group's Location as Post type = Page (page).

Step 2

Edit your Pages and populate the field group for each.

Step 3

Let's create a custom function that takes the field ID and image size handle as arguments and returns the URL of a random image from the supplied field in the specified size.

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: [Function] Get the URL of a random image from the supplied Image Advanced field

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.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right