How to Display Uploaded Images as a WordPress Image Gallery?

This is a very interesting question asked in the support forum of Meta Box. When using custom field of type image_advanced to upload images to your WordPress website, how to display uploaded images as an image gallery?

Image gallery is a built-in feature of WordPress. It is a great way to share groups of pictures on your WordPress site. As you know, WordPress supports displaying image gallery in a grid. This is very convenient and suitable for most websites. Instead of manually writing code to display images uploaded through custom fields, why not use the built-in WordPress feature to do that?

How to Take an Advantage of WordPress Image Gallery?

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. And this can be done without any WordPress gallery plugin.

Here is the code:

$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' ) ) ) . '"]' );

Copy and paste the code to your WordPress theme's template file, such as single.php. If you're not familiar with the code, please see more info about the image_advanced field here.

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.

If you install the Jetpack, you can also display images in slideshows or tiled galleries. This the list of attributes for the Jetpack gallery.

When is WordPress Gallery Useful?

WordPress gallery is widely used. You can find it in WordPress photography themes, WordPress directory themes or WordPress portfolio themes. If your need of displaying uploaded images is not very complicated, for example, display the images of a property in a listing website, then using WordPress gallery is very convenient. It greatly shortens your code, saves you time and effort.

I hope this short WordPress tutorial is useful to you. If you have an interesting use of custom field image_advanced, please share in the comments below.