You can easily allow adding multiple images at once using repeating image fields. Here, we show you how to then display these images as galleries on the front-end.
When creating or editing custom image fields you can see the Single or repeating field setting. Select Allow multiple-instances of this field to be able to add more than one image to your post.
Now, users can add multiple images to posts that use your repeating image field. After adding images they can simply use drag-and-drop to rearrange them.
Now, we need to display these images as a gallery. There are two ways of doing this:
- Using Toolset Blocks Repeating Field / Gallery block
- Using Views shortcodes and some custom markup
Toolset Blocks plugin allows you to use WordPress Block Editor to design your templates, Views, and archives. To create an image gallery from your repeating image field, you need to insert the TB Repeating Field / Gallery block into your template.
Use the following steps:
- Add the TB Repeating Field / Gallery block to your template.
- Select your repeating image field using the Custom Field Group and Custom Field options in the right sidebar.
- Use the Display Settings options to select how the gallery will be output.
That’s it, the repeating image field will now be displayed as a nice gallery.
The other way of displaying a repeating field as a gallery is to use the wpv-for-each shortcode and some additional CSS styling.
Here is an example of the code you can use inside your Content Templates.
This code does the following:
- Sets up the structure for a custom gallery output.
- Uses the wpv-for-each shortcode to go through all images found for the repeating image field.
- Outputs the image, with a link to the full-size version, so that lightbox effect can be easily applied.
Note the tb-repeating-field–grid class on the second line. It calls our custom CSS to display gallery images in a grid. In our example, there are two more ways you can display the images with, CSS Flexbox and Masonry.
To use one of these gallery styles, simply replace the class on the second line with one of the following two classes.
- tb-repeating-field–flexbox for Flexbox
- tb-repeating-field–masonry for Masonry
Finally, let’s add our custom CSS. The following snippet covers all three gallery styles.
If you want to see a demo of the gallery created using Toolset Blocks and the Block Editor, check out our Travel Destination reference site.