Have a look at the following example:
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.
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 tutorial explains how to create such a gallery.
How the gallery works
- 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.
- To store the subsequent collection of images, you need to use the image custom field and make it repeatable.
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:
- Add a new image field to your custom post type. Make the field repeatable
- Display the gallery in your template for single-post pages.
- Use the [wpv-for-each] shortcode to iterate through the images.
- For each iteration,
- Display the image as a thumbnail.
- Make your thumbnail a link to the full-size image.
- Use a lightbox plugin of your choice (e.g., Easy FancyBox) to make the images display with the lightbox effect when clicked.
For those who prefer step-by-step instructions, we have provided a more in-depth explanation below
- Go to Toolset -> Post Fields to create a new group of fields.
- Connect this group with your post type. In our example, the post type is called Tours.
- Add a new image custom field to that group. Make it repeatable.
- Add a new post with a few images. It might look like this:
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>
- 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:
- wpcf: fixed prefix used for fields created with the Toolset Types plugin; don’t change it.
- field slug: the slug of your image field (in our example, it’s “gallery”)
The exact shortcode in our example would be
- Position your cursor inside the shortcode.
- First, we will display the image as a thumbnail:
- Click the Fields and Views button.
- Locate your image field. In our example, it’s “Gallery image.”
- Set it up as a thumbnail or custom-size image as shown in the following image:
- Insert the shortcode.
Your shortcode will look like this:
[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]
- Now, let’s make our image a clickable link, which links to the full-size image.
- Wrap your [types field…][/types] shortcode into<a href=” “></a> tags.
- Position your cursor between the “ ” quotes.
- Click the Fields and Views button.
- Locate the image field.
- Set it up according to the following image – remember to check the “Output only the URL …” field.:
You can also use other options for the pre-defined sizes field, such as
- Custom size
Your shortcode should look like this:
[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.
Choose a lightbox plugin of your choice to make the images display with the lightbox effect when clicked.
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 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.
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.