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

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.

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. 
   
2. Select ‘PHP Function Return value’ and the advanced dynamic data settings
   
3. Insert the name of the function we previously created: ‘get_oxygen_repeater_section_image_id’
   

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