In the previous part of the series “Display images from cloneable fields”, we introduced you to do it with Meta Box and Gutenberg. As promised, we are going to show you another method that uses Meta Box and another page builder, Oxygen.

Similar to part one, I also do it with a simple case study, brand logos.

The example of displaying images from cloneable fields using Meta Box + Oxygen.

Before Getting Started

To do it, we need the Meta Box core plugin to have the framework to create custom fields. It’s free, so you can download it directly from wordpress.org. For further advanced features, we also need some extensions of Meta Box as the following:

  • MB Settings Page: it helps you to create settings pages, we’ll need a settings page to place the custom fields into.
  • Meta Box Builder: it provides a UI to create custom fields easily.
  • Meta Box Group: this extension helps to organize custom fields into cloneable groups, where we input images today.

You can install these extensions individually or use Meta Box AIO for having them in one place.

And, the last one is Oxygen. You should use the 3.9 version or upper, which has the native integration with Meta Box.

Video Version

Step 1: Create a Settings Page

Likewise the 1st part of this series, I’m creating a settings page to save all the brands’ data instead of creating a custom post type. With custom post type, information of each brand will be saved in a separate post. But with a settings page, all of them will be on this page only.

Go to Meta Box > Settings Page > Add New. The creating settings page is used to save brands’ logos and names so there is no advanced configuration for it. I just changed the option name.

Create a Settings Page

After publishing, a new menu named Brands appears. It’s my new settings page.

The new Settings Page named Brands appears.

Step 2: Create Custom Fields for the Settings Page

In the admin dashboard, go to Meta Box > Custom Fields > Add New. The following table illustrates the fields’ structure that I’m using.

Field

Types of Field

ID

Brand Group Group brand_group
          Brand Logo Upload Single Image brand_logo_upload
          Brand Logo Url Url brand_logo_url
          Brand Name Text brand_name

This is a group with three subfields inside. This group is also set to be cloneable to have more spaces to add different brands' information.

Set this group as cloneable to have more spaces to add different brands' information.

As you can see in the structure, I added 2 fields which are Single Image and URL. One allows you to upload images and save them in the library, and one allows you to input a link of an image from anywhere.

2 fields which are Single Image and Url help you upload images and input a link of image.

After having all the needed fields, go to the Settings tab and choose the Location as the settings page that we’ve just created to apply the custom fields to it.

In the Settings tab, choose the Location as the Settings Page to apply the custom fields.

Back to the settings page, you’ll see all of the created custom fields. There is an Add more button to add another brand’s information.

The created custom fields are displayed.

Now, let’s fill the information into the fields and move to the next step.

Step 3: Display Images from the Fields

To add a section for displaying brands’ information, go to the Edit with Oxygen section of the page you want.

First, add a Div component.

Choose a Div component to add a section for displaying brands’ information.

Next, add a Code Block inside the Div. Then, add code to the PHP&HTML section.

The PHP&HTML section of Code Block
The PHP&HTML section of Code Block
Add code to the PHP&HTML section
Add code to the PHP&HTML section

I’m using this code, you can refer to it.

<?php
$group = rwmb_meta( 'brand_group', ['object_type' => 'setting'], 'brand' );
?>
<div class="brand-group">
    <?php foreach( $group as $value): ?>
        <?php
            $image = RWMB_Image_Field::file_info( $value['brand_logo_upload'], ['size' => 'thumbnail'] );
        ?>
        <div class="brand-img">
            <?php if (!empty($image)): ?>
                <img src="<?php echo $image['url']?>"/>
            <?php elseif (!empty($value['brand_logo_url'])): ?>
                <img src="<?php echo $value['brand_logo_url'] ?>"/>
            <?php else: ?>
                <img src="<?php echo $image['url']?>"/>
            <?php endif; ?>
            <p class="name"><?php echo $value['brand_name'] ?></p>
        </div>
    <?php endforeach; ?>
</div>

Explanation:

  • $group = rwmb_meta( 'brand_group', ['object_type' => 'setting'], 'brand' );: create the $group variable to get the value of the field which has the ID as brand_group, from the object which has type as settings page and name as Brands. You can change the name of this variable as you want, but please make sure you input exactly the field ID and object name as yours.
  • <?php foreach( $group as $value): ?>: since the brand_group the field is cloneable, I create a loop to get value from the $group variable.
  • $image = RWMB_Image_Field::file_info( $value['brand_logo_upload'], ['size' => 'thumbnail'] );: create the $image variable to obtain value from the field which has ID as brand_logo_upload. This field is a single image field so we use the RWMB_Image_Field( ) to get value.
  • <?php if (!empty( )): ?>: is to check if the variable has value or not.
  • <img src="<?php echo $image['url']?>"/> and <img src="<?php echo $value['logo_url'] ?>"/>: display image from the corresponding returned url.
  • <?php echo $value['brand_name'] ?>: get and display the value from the field brand_name.
<?php if (!empty($image)): ?>
    <img src="<?php echo $image['url']?>"/>

This means that if the $image variable there is no value, means that there is an uploaded image in the Single Image field, we’ll display the image from its returned value.

<?php elseif (!empty($value['brand_logo_url'])): ?>
    <img src="<?php echo $value['logo_url'] ?>"/>

On the other hand, if there is any value in the URL field, which has ID as brand_logo_url, we will display the image from that link.

<?php else: ?>
    <img src="<?php echo $image['url']?>"/>

In the event that both of these fields have value, we set priority here to display the image from the Single Image only.

After adding code, click Apply Code.

Now, you can see all of the brand logos along with their names displayed in the live preview already.

After editing with Oxygen, the brand logos along with their names displayed already.

But it hasn’t looked good yet. Thus, we’ll need some JS and CSS to make it look good with a better layout.

Step 4: Create Slider for the Brand Logos

As you can see at the beginning of this post, the logos are in a slider, and brand names are displayed correspondingly. To do this, I’ll use some JS and CSS.

However, instead of adding them directly to the theme, I'm using the My Custom Functionality plugin. Therefore, when I change the theme, the slider won't be affected. You can download this plugin from Github.

Download the JS and CSS Library

For the JS and CSS, I use the Slick library which also can be found on Github. It contains several files, but we need only three of them.

JS and CSS files in the Slick library.

Then, go to the folder of the My Custom Functionality plugin, and upload them into the corresponding JS and CSS folders.

Upload the slick-theme.css file into the css folder of My Custom Functionality plugin.

Create Custom JS for Slider and Rules

To set up the slider effect of Slick Slider, I’ll create a custom.js file in the JS folder, and add the following code there.

Add code to custom.js file.

jQuery(document).ready(function ($) {
    jQuery(".brand-group").slick({
        infinite: false,
        dots: false,
        autoplay: false,
        speed: 800,
        autoplaySpeed: 4000,
        slidesToShow: 7,
        slidesToScroll: 7,
        nextArrow: '<button class="next-btn">Next</button>',
        prevArrow: '<button class="prev-btn">Previous</button>'
    });
})

In there, .brand-group is the class of the elements which are brands’ logos and names.

Declare the JS and CSS Files

We need to declare all the JS and CSS files that have just been uploaded by adding this code inside the custom_enqueue_files() function in the plugin.php file.

wp_enqueue_style('slick', plugin_dir_url( __FILE__ ).'/assets/css/slick.css');
wp_enqueue_style('slick-theme', plugin_dir_url( __FILE__ ).'/assets/css/slick-theme.css');

wp_enqueue_script('custom', plugin_dir_url( __FILE__ ).'/assets/js/custom.js', ['jquery']);
wp_enqueue_script('slick-min', plugin_dir_url( __FILE__ ).'/assets/js/slick.min.js', ['jquery']);

Add code in the plugin.php file

Now, the brand logos have already turned into a slider.

The brand images have already turned into a slider.

However, it still hasn’t looked good yet. So, it’s time to add some additional CSS.

Step 5: Style the Slider using CSS

Move to the page editor by Oxygen. In the Manage section, choose Stylesheets > Add Stylesheet.

Choose Stylesheets in the Manage section.
Choose Stylesheets in the Manage section
Create a new stylesheet
Create a new stylesheet

Add code to the created stylesheet.

Add code to the created stylesheet

All the CSS code that I’m using is uploaded to Github, you can refer to it.

Now, the slider displays much more beautifully.

The final result of displaying images from cloneable fields with Meta Box + Oxygen.

Last Words

In this practice, I created two fields for the logos so I need a rule to choose which will be displayed. But in the real case, you can have only one field then the execution will be easier by having no condition anymore. Just choose the way you want.

By the way, if you have any idea about any other tutorials, feel free to leave a comment. Thank you for reading. Good luck!

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display a User List On the Frontend with Meta Box
  9. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  10. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Guest Author in WordPress using Meta Box (Part 1)
  13. How to Add Guest Author in WordPress using Meta Box (Part 2)
  14. How to Add Related Posts to WordPress Using Meta Box
  15. How to Build a Hotel Booking Website Using Meta Box - P1
  16. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  17. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  18. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  19. How to Create a Classified Ads Website using Meta Box
  20. How to Create a Product Page using Meta Box Plugin
  21. How to Create a Recipe with Meta Box Plugin
  22. How to Create ACF Flexible Content Field with Meta Box
  23. How to Create an Auto-Updated Cheat Sheet in WordPress
  24. How to Create an FAQs Page Using Meta Box
  25. How to Create Buttons with Dynamic Link using Custom Fields
  26. How to Create Category Thumbnails & Featured Images Using Custom Fields
  27. How to Create Download Buttons Using Custom Fields with Meta Box Plugin
  28. How to Create Online Admission Form for School or University
  29. How to Create Online Reservation Form for Restaurants using Meta Box
  30. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  31. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  32. How to Display Images from Cloneable Fields - P2 - with Oxygen
  33. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  34. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  35. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  36. How to Manually Reorder Posts with Meta Box
  37. How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS

2 thoughts on “How to Display Images from Cloneable Fields - P2 - with Oxygen

  1. Hello,
    thanks for this complex tutorial.
    I have trouble using relationships and repeaters. Would you mind to make a "HOW TO" about this topic? The thing is, I have two Custom post types in a relation. From what I´ve found so far, to use some related custom field inside a repeater card I need to create another repeater to display the content of a field. But in case this relationship repeater is not the last element inside of a card, following fields do not return any data. Also I am not able to make views shortcodes work inside of a repeater.
    Thanks again

Leave a Reply

Your email address will not be published.