This video in this series provides an overview of how to create a custom gallery using a plugin called “WidgetKit“. WidgetKit comes in two flavours, a Lite version (which is what we will use) and a full version which is a paid plugin. This widgetkit is of course optional, but because I am displaying it in the live demo, you may want to use this instead of the WordPress Gallery. To see this custom gallery in action, you can check out the demo website here for Luminescence:
Code That we Need
We will have some work to do here to get ourselves ready to build our special custom gallery. What I will do here is post a couple snippets of code that we will be using, although editing to our own needs, primarily the paths to our images.
To Add a Spotlight to a Thumbnail – We need this code to the <a href> like this: data-spotlight=”on”
To Add a Lightbox to our full sized Photo – We need this code added to the <a href> like this: data-lightbox=”titlePosition:inside”
To Group thumbnails into a Gallery – We need this code added to the <a href> like this: data-lightbox=”group:mygallery”
So for an example, our linked thumbnail may look like this:
<a title="Your Title" href="http://link-to-full-image.jpg" data-spotlight="on" data-lightbox="group:mygallery;titlePosition:inside">
<img alt="Lightbox Image" src="https://path-to-thumbnail.jpg" /></a>
Covered in these videos:
- Introduction and installing the WidgetKit plugin.
- Prepare your photos, both full size and a thumbnail for each
- Setting up your gallery page.
- Create your gallery of thumbnails
- Add special effects to your thumbnails
- Viewing your new gallery