Retrieve photogallery image values at frontend, of a WordPress Meta Box

Summary:

I need to use my own html photogallery so to do this:

• I was advised to use MetaBox so I found & installed MetaBox.io plugin.
• Next I generated an Advanced Image code using their website & added it at functions.php for it to show the uploader at Backend.
• But at Front-end I'm having trouble to retrieve the images' values.

Functions.php (MetaBox.io generated code):

add_filter( 'rwmb_meta_boxes', 'your_prefix_register_meta_boxes' );

function your_prefix_register_meta_boxes( $meta_boxes ) {
    $prefix = '';

    $meta_boxes[] = [
        'title'   => esc_html__( 'Untitled Field Group', 'online-generator' ),
        'id'      => 'untitled',
        'context' => 'normal',
        'fields'  => [
            [
                'type'             => 'image_advanced',
                'name'             => esc_html__( 'Image Advanced', 'online-generator' ),
                'id'               => $prefix . 'image_advanced_8hswqfsoqai',
                'max_file_uploads' => 40,
            ],
        ],
    ];

    return $meta_boxes;
}

CMS:

Here's the result at CMS. A new images field is created. CMS part is done:

Frontend:

Then I grabbed this code from MetaBox.io & placed it at index.php but it prints nothing:

<?php
$images = rwmb_meta( $field_id, array( 'size' => 'thumbnail' ) );
foreach ( $images as $image ) {
    echo '<a href="'.$image['full_url'].'"><img src="'.$image['url'].'"></a>';
}
?>

---

My question is:

How to display the MetaBox.io plugin images' values at frontend (inside my own HTML)? I need them as follows:

<div class="col-lg-6 img-grids mt-lg-0 mt-5 pl-lg-4">
    <img src="<?php echo get_template_directory_uri().'/assets/images/p1.jpg'; ?>" alt="" class="img-fluid radius-image" />
    <img src="<?php echo get_template_directory_uri().'/assets/images/p2.jpg'; ?>" alt="" class="img-fluid radius-image" />
</div>

Note: the main reason I didn't simply add a gallery inside the post content but had to add a gallery as a Meta Box, is because I don't need the gallery to show as is , but to retrieve the gallery individual values at frontend inside my own html code.

thank you for following my advice So here we are

$images = rwmb_meta ($field_id, array ('size' => 'thumbnail'));

We have the amount that our gallery receives.

According to the above codes, use this code inside the page template file or inside the loop.

<div class="col-lg-6 img-grids mt-lg-0 mt-5 pl-lg-4">

<?php

$untitled_meta = rwmb_meta('image_advanced_8hswqfsoqai' , '' , get_the_ID());

foreach ($untitled_meta as $image) {
    ?>

    <img src="<?= $image['full_url'] // Or Use url for crop size  ?>" alt="<?= $image['alt'] ?>"
         class="img-fluid radius-image"/>

    <?php
}
?>

The rwmb_meta function has three arguments.

1. The first value of our field ID that is fielded according to your code structure: image_advanced_8hswqfsoqai
2. And leave the next value blank to receive all.
3. And the last parameter is the page ID or post that I got with the get_the_ID() ID of the page we are in now.

To optimize and use the page according to your previous question on this page, I write the following code and please paste it (of course, if you want to work with the page template)

Step 1: Add a function to build the meta box on the page and post

Put this code in the functions.php file as you know it

add_filter( 'rwmb_meta_boxes', 'compliance_students_gallery_meta_boxes' );

function compliance_students_gallery_meta_boxes( $meta_boxes ) {

    $meta_boxes[] = [
        'title'   => esc_html__( 'Untitled Field Group', 'online-generator' ),
        'id'      => 'untitled',
        'context' => 'normal',
        'post_types' => ['post', 'page'],
        'fields'  => [
            [
                'type'             => 'image_advanced',
                'name'             => esc_html__( 'Image Advanced', 'online-generator' ),
                'id'               => 'images_untitled',
                'max_file_uploads' => 40,
            ],
        ],
    ];

    return $meta_boxes;
}

Now you can add an image gallery to both the page and the post

Step 2: Display in the page template the same file that contains this Template Name: students Of course, this is only for you who asked the relevant question elsewhere (this page)

<div class="col-lg-6 img-grids mt-lg-0 mt-5 pl-lg-4">

    <?php

    $untitled_meta = rwmb_meta('image_advanced_8hswqfsoqai' , '' , get_the_ID());

    foreach ($untitled_meta as $image) {
        ?>

        <img src="<?= $image['full_url'] // Or Use url for crop size  ?>" alt="<?= $image['alt'] ?>"
             class="img-fluid radius-image"/>

        <?php
    }
    ?>
</div>

Important note This should be the case if you want to show inside the circle or the main page or inside the posts.

To display the amount of image or any other liquid, you must use it in the WordPress query.

Example for use in a WordPress query loop

<?php

$query = new WP_Query($args);
if ($query->have_posts()) {
    // some code here if you want.
    while ($query->have_posts()) {
        $query->the_post();
        ?>
        <div class="col-lg-6 img-grids mt-lg-0 mt-5 pl-lg-4">

            <?php

            $untitled_meta = rwmb_meta('image_advanced_8hswqfsoqai', '', get_the_ID());

            foreach ($untitled_meta as $image) {
                ?>
                <img src="<?= $image['full_url'] // Or Use url for crop size   ?>" alt="<?= $image['alt'] ?>"
                     class="img-fluid radius-image"/>
                <?php
            }
            ?>
        </div>
        <?php
    }
}
?>