By using a custom field in the type of Image Advanced, let’s see how to display the images uploaded into this field as a WordPress image gallery.
1. Creating a custom field
I will create Image Advanced field for showing the gallery. Go to Meta Box > Custom Fields > Add New.
After creating that field, move to the Settings tab, choose Location as Post Type and select Post or Page, or any post type you want to display the gallery.
Then, you will see the created field in the post editor. Click in Add Media to add more images.
2. Displaying gallery on the frontend
The way to display uploaded images in a WordPress gallery is quite simple: get the image IDs, put them in the
gallery shortcode and run it. In this practice, we will display it on the frontend in two ways: (1) adding code to the theme's template file, and (2) using MB Views.
Method 1: Adding code to the theme’s file
To display the gallery on the frontend, copy and insert the below code to your WordPress theme's file, such as
$images = rwmb_meta( 'field_id' );
$image_ids = array_keys( $images );
$shortcode = '[' . 'gallery ids="' . implode( ',', $image_ids ) . '"]';
echo do_shortcode( $shortcode );
Or if you prefer one-line version:
echo do_shortcode( '[' . 'gallery ids="' . implode( ',', array_keys( rwmb_meta( 'field_id' ) ) ) . '"]' );
array_keys( $images ): extract returned key of ‘field_id’;
'[' . 'gallery ids="' . implode( ',', $image_ids ) . '"]': merge all images into 1 gallery.
You can add attributes to the gallery shortcode such as the number of columns (
column) or the image size (
size). You can find the full list of attributes for the
gallery shortcode here.
Then, go to the page, you will see the gallery.
Method 2: Using MB Views
Go to Meta Box > Views > Add New to create a template. Click in Insert Field to get data from the image advanced field.
After setting the location for displaying the gallery. Back to the frontend, you will see the galley.
No matter which method you used, the results will be like this: