Display Meta box pro Advanced image field in oxygen repeaterMeta Box Pro x Oxygen Builder

A Tutorial on how to fix the isue when you want to display an Advanced Image field from a clonable group field inside an Oxygen repeater

I recently came across an issue where I was trying to use an advanced image field from Meta Box inside an Oxygen Builder repeater. However, after I selected the dynamic data values in Oxygen the field was not displaying. Oxygen Builder support made clear that this was an existing issue and that it needed a workaround as they did not know when it would get fixed.

Therefore I thought I might share my solution here in a step-by-step tutorial in case you are having the same issue.

Create the Meta Box Pro fields

1. Create a Meta Box Pro ‘group’ field for your post type

Make sure the ‘Group’ field is clonable, this allows you to populate the filed group on the post.

2. Create an ‘Image Advanced’ field

Once you have created the Group field in step one you need to add an ‘Image Advanced’  inside the Meta Box Group field. Remember the ID you named the ‘Advanced Image’ field. In our example, the id is 'section_image'.

Add the custom code

According to Oxygen support, you can use global ‘$meta_box_current_group_fields;’ to get the current group inside the Oxygen Repeater.

Therefore I created the following function and added it with the Code Snippets plugin to the functions.pho: 

function get_oxygen_repeater_section_image_id() {

    global $meta_box_current_group_fields;

    // Get the image ID

    // Replace ‘section_image’ with your image ID

    $image_id = $meta_box_current_group_fields['section_image'][0];

    return $image_id;

}

Make sure you replace the image ID ‘section_image’ with your own image ID. Once you are done save and activate the snippet. 

Query the image ID in the oxygen repeater

Set up the repeater

Select ‘Query’ in the repeater settings, tick the ‘Use Meta Box Group’ box and select your Meta Box Group field below.

select meta box aio group field in oxygen builder
select meta box aio group field in oxygen builder

Add the image element

Drag the image element inside the repeater element. Select ‘Media Library’ in the primary settings of the image element.

Query the image ID

  1. Select the ‘data’ option inside the ID field. 
    add dynamic meta box data to oxygen repeater
  2. Select ‘PHP Function Return value’ and the advanced dynamic data settings
    select ‘php function return value’ und the advanced dynamic data settings
  3. Insert the name of the function we previously created: ‘get_oxygen_repeater_section_image_id’
    enter function name calling meta box aio field

Save your edits, clear the cache and reload the page. The image from your Meta box group field should display now.

Recent posts:

Desk with laptop showing wordpress editor

10 beginner friendly steps to improve your SEO

Learn how to improve your website's SEO with the simple steps outlined in this blog. All steps are 100% beginner friendly.
dynamic breakpoint horizontal oxygen builder menu

Dynamic breakpoint oxygen builder navigation menu

Add a dynamic break point to your horizontal navigation menu in Oxygen Builder to have a dynamic linebreak on mobile devices.

An introduction to SEO

This article will give you a general idea of what SEO is. I will introduce you to SEO basics and guide you on the first steps to optimise your search engine visibility.

Start your project today

Get in touch
Contact Form
chevron-left