You have another option when creating galleries in your web pages and posts by using a custom gallery that is included as a snippet, but you can do the same, also using the Widgetkit plugin. The Widgetkit plugin offers some gallery functions such as Spotlight which is a hover effect over the thumbnail, but it also offers a lightbox window to view your gallery as a slideshow.
This tutorial is a bit involving and will require you to work with some code, but most of the work we have done for you so that all you have to do is copy and paste code, then edit some parts of it. Here are a few things to make note of:
- This custom gallery will use the same styling (CSS) as the WordPress gallery does
- You can have up to 9 columns for your gallery
- This is a little more hands on with code compared to the WordPress gallery
- This gallery uses a list style method to display thumbnails
Prepare Your Photos
First thing you need to do is prepare your photos before you begin creating your gallery for a page or post. You will need to make thumbnails from the full sized photo that you want to showcase, because for each image, we need the full version as well as a thumbnail version. We will base this tutorial on the live demo site, so the size of thumbnail you want will be:
Thumbnail Size = 255 x 170 pixels
**Your full size image can be any size you want because they will open in a lightbox window.
When you make your thumbnails, we recommend you keep the name of your thumbnail file related to the full size by adding a suffix like -tn (short for thumbnail) to the end. For example, if your full size photo file is named “flowers.jpg“, you will name your thumbnail as “flowers-tn.jpg” to help organize your images and keep them together.
Once you are done preparing your photos, upload both the full size and thumbnail versions to your Media Library. We would also recommend that you copy and paste the URL’s of each thumbnail image into a text file somewhere for safe keeping because we will need these URL’s shortly. With each image being uploaded, you will see an “edit” link. Click on that for each one and in the upper right corner you will see the following File URL field. Click in the URL box and select the URL and copy it by doing Ctrl C (for windows users) or Cmd C (for MAC users).
Install Widgetkit
Widgetkit comes in two versions, a Lite version (Free) and a Pro version (paid). Unless you want the paid one, we recommend just starting out with the Lite version because it’s FREE to download. Widgetkit is not available from the WordPress website, so you have to get it from YooTheme.com
Install it just like any WordPress plugin and activate it. It gets added to your admin menu group near the bottom.
Get the Gallery Code Snippet
We’ve already provided you with a preset gallery snippet… Basically it’s like a mini template for your gallery. All you need to do is paste it and make some modifications to the gallery code. You will also find this code in the link part:
data-lightbox=”group:mygallery;”
This is part of Widgetkit that activates the lightbox when you click on a thumbnail. The group:mygallery; name is the part that groups your thumbnails together so that you can view them as a gallery slideshow. You can change mygallery to any name you want for each new gallery you make.
- Find the flat-responsive-package folder from your download and go into the HTML Snippet folder.
- Open the widgetkit-gallery.txt file
- Find the section labelled as *** Sample Gallery with 4 Columns – Lightbox ***
- Copy the sample gallery code and paste it into your page or post
- Replace each title=”Photo Caption” with a photo caption for each photo
- Replace each href=”path-to-full-image.jpg” with the URL of the full sized photo
- Replace each src=”path-to-thumbnail.jpg” with the URL of the thumbnail
- Replace each alt=”short description” with something to briefly describe what the image is
If you want to change how many columns your gallery will have, for example, having 6 columns instead of the sample 4 layout of the snippet, you can change this:
<ul class="fr-gallery gallery-columns-4 clearfix">
to:
<ul class="fr-gallery gallery-columns-6 clearfix">
Lightbox Examples
The above gallery already has the lightbox data code to view the full size photos, but with Widgetkit, you can change the effects of how the lightbox is displayed:
Adding Spotlight
Adding Spotlight is another feature of Widgetkit which is a hover overlay effect on your images. In the gallery code, this just needs one small snippet of code added to the first part of the link on our thumbnail. With our gallery we just made, the first part of the link ooks like this:
<a data-lightbox="group:mygallery;"
All we need to do is add the data-spotlight=”on” like this:
<a data-spotlight="on" data-lightbox="group:mygallery;"
Now when you mouseover a thumbnail, you get a hover effect.
For examples of what Spotlight can do, check out the Yootheme website here:
Screencast Tutorial