Have a look at the following example:

Single-post page that displays a tour with a gallery of images
Single-post page that displays a tour with a gallery of images

This is a single-post page that displays a tour. Tours is a custom post type.

The page includes a gallery of images. The large featured image is followed by a collection of images shown as thumbnails. When you click on it, the image will enlarge with a nice lightbox effect (go and test it).

The gallery was created using the Toolset plugins.

hint

What is interesting is that such a gallery can also be added and edited by users who don’t have access to the WordPress backend.

Everything happens on the front-end.

The gallery can also be added and edited by users who don’t have access to the WordPress backend.
The gallery can also be added and edited by users who don’t have access to the WordPress backend.

The tutorial explains how to create such a gallery.

How the gallery works

  1. To store the topmost image, a post featured image was used. However, you can also use an image custom field to store the main image.
  2. To store the subsequent collection of images, you need to use the image custom field and make it repeatable.
How the gallery works
How the gallery works

Creating a collection of gallery images for a custom post type

Steps in brief

If you don’t like long reading, the following steps are for you:

Adding an image field as a repeatable field
Adding an image field as a repeatable field
  1. Add a new image field to your custom post type. Make the field repeatable
  1. Display the gallery in your template for single-post pages.
    1. Use the [wpv-for-each] shortcode to iterate through the images.
    2. For each iteration,
      1. Display the image as a thumbnail.
      2. Make your thumbnail a link to the full-size image.
Displaying a gallery of images
Displaying a gallery of images
  1. Use a lightbox plugin of your choice (e.g., Easy FancyBox) to make the images display with the lightbox effect when clicked.

Detailed steps

For those who prefer step-by-step instructions, we have provided a more in-depth explanation below

    1. Go to Toolset -> Post Fields to create a new group of fields.
    2. Connect this group with your post type. In our example, the post type is called Tours.

      Connecting a group of fields with a post type
      Connecting a group of fields with a post type
    3. Add a new image custom field to that group. Make it repeatable.
    4. Add a new post with a few images. It might look like this:
Add a new post with a few images
Add a new post with a few images

Displaying a gallery of images

To display a gallery of images on the front-end, you need to create a Content Template (or if you are using the Toolset Layouts plugin, create a Layout and assign it to the Template for multiple pages and your post type).

The gallery is a collection of thumbnails, each being a link to the full-size image. We need to use the wpv-for-each shortcode to iterate through all the images and for each display; the code should be something like this:

<a href=”full-size-image-url”>thumbnail image (with alt and title attributes)</a>

  1. In your Content Template editor, add the [wpv-for-each] shortcode: it will iterate through all the items of your repeating field specified in the attribute:
    Field slug
    Field slug
    1. wpcf: fixed prefix used for fields created with the Toolset Types plugin; don’t change it.
    2. field slug: the slug of your image field (in our example, it’s “gallery”)

The exact shortcode in our example would be

wpv-for-each
[wpv-for-each field="wpcf-gallery"][/wpv-for-each]
  1. Position your cursor inside the shortcode.
  2. First, we will display the image as a thumbnail:
    1. Click the Fields and Views button.
    2. Locate your image field. In our example, it’s “Gallery image.”
    3. Set it up as a thumbnail or custom-size image as shown in the following image:

      Setting up thumbnail images
      Setting up thumbnail images
    4. Insert the shortcode.

Your shortcode will look like this:

wpv-for-each (after step 3)
[wpv-for-each field="wpcf-gallery"]

[types field='gallery' alt='%%ALT%%' title='%%TITLE%%' width='200' height='200' align='none' resize='crop' separator=', '][/types]

[/wpv-for-each]
  1. Now, let’s make our image a clickable link, which links to the full-size image.
    1. Wrap your [types field…][/types] shortcode into<a href=” “></a> tags.
    2. Position your cursor between the “ ” quotes.
    3. Click the Fields and Views button.
    4. Locate the image field.
    5. Set it up according to the following image – remember to check the “Output only the URL …” field.:
Remember to check the “Output only the URL …” field.
Remember to check the “Output only the URL …” field.

You can also use other options for the pre-defined sizes field, such as

  • Large
  • Custom size

Your shortcode should look like this:

wpv-for-each (after step 4)
[wpv-for-each field="wpcf-gallery"]

<a href="[types field='gallery' size='full' url='true' separator=','][/types]">[types field='gallery' alt='%%ALT%%' title='%%TITLE%%' width='200' height='200' align='none' resize='crop' separator=', '][/types]</a>

[/wpv-for-each]

Save your changes. Visit a tour post on the front-end to see how your gallery displays.

Visit a tour post on the front-end to see how your gallery displays
Visit a tour post on the front-end to see how your gallery displays

Choose a lightbox plugin of your choice to make the images display with the lightbox effect when clicked.

Opened gallery image with lightbox effect by Easy FancyBox plugin
Opened gallery image with lightbox effect by Easy FancyBox plugin

FAQ

How to style the gallery?

You can wrap your Toolset shortcodes in HTML tags and use CSS to style your gallery.

How to use repeating images in front-end forms?

CRED (the Toolset plugin for creating front-end forms) can recognize repeatable fields and handle them appropriately. Simply use the Auto-generate Form option and CRED will take care of the rest.

Your front-end users will be able to add and edit gallery images via the front-end.

How to change the order of images?

Simply grab the image and move it up or down using your mouse. It works on both the front-end and the backend.

How to change the order of images?
How to change the order of images?

How to edit an image that was already inserted so I can change its ALT text or caption?

This can be done only on the WP backend. Click “Select image” next to your image and look up the image in your media library (enter the image file name in the Search media items filter to make it faster). Once the appropriate image is found, update the Caption and/or ALT Text fields.

Looking up a image by the file name
Looking up a image by the file name

Summary

We covered how to create a gallery of images for your custom post type by using the image custom field and making it a repeatable field.

To display of items of a repeatable fields use the wpv-for-each. Make each of your images a thumbnail that links to the full-size image.