Here’s a quick one. On recently needing to design a website for a client which utilises custom post types and fields from the WP-Toolset plugin, I needed a way to display multiple images with lightbox functionality.

Here is how I achieved this:

First install the Foobox Image Lightbox plugin from the WordPress directory. I chose this one because it is fast, responsive, simple, and the free version offered all the features I needed.

Then go to your Content Templates section within Toolset and open the template that you need. We will now make use of the following code to take each image from a multiple image field and display it with a clickable lightbox link.

[wpv-for-each field="wpcf-photo"]
<a href="[types field='photo' output="raw"][/types]" class="foobox" rel="gallery">
<img class="object-fit" src="[types field='photo' output="raw"][/types]"></a>
[/wpv-for-each]

To explain the above code a little, if you need it. The class="foobox" is required to invoke the lightbox plugin and tell it to act upon the following image. The rel="gallery" value tells Foobox to group all of the images into a gallery wwith previous/next buttons rather than requiring you to click each photo in turn. The output="raw" tells Toolset to output the URL to the image, rather than the image itself, obviously we require the URL to make this work. In this case, I have applied a simple style using class="object-fit" to output the image in a fixed-size square with the image centered and cropped to fit. If it is of any use or interest, the CSS for this property is:

img.object-fit {
margin: 5px;
width: 300px;
height: 300px;
border-radius: 15px;
object-fit: cover;
border: 1px solid;
}

Hopefully this will help someone who was in the same boat as me, me not being a professional designer it did take me a while to figure it out and piece together code from various sources. If you need further help, hit me up in the comments and I’ll see what I can do.