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.
<a href="[types field='photo' output="raw"][/types]" class="foobox" rel="gallery">
<img class="object-fit" src="[types field='photo' output="raw"][/types]"></a>
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:
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.