One of the reasons why I prefer Soliloquy over other slider plugins is the abundant number of hooks and filters which provide complete control of the HTML output.
This tutorial provides the steps to loop through the image slides (client logos, in this example) of a Soliloquy slider and display them in a grid using CSS Grid.
(Note: The logos of respective companies have only been used for demonstration purposes. They are not my/our clients. Want that privilege? Get in touch ;)
The order in which images appear can easily be changed by drag and drop.
Images will be linking to their corresponding URLs (if the URLs have been entered in the Metadata).
While the tutorial has been tested in Genesis, it should work with a few adjustments in any WordPress theme
Install and activate Soliloquy (free lite version or the commercial version).
Create a slider named say,
Client Logos and select/upload your desired logo images.
Arrange the images in the order that would like them to appear on the frontend. We are only going to fetch the image data from this slider in our code, but not any settings. Hence 'Config' and 'Misc' tabs (available in the commercial edition) need not be configured.
Add the following in child theme's functions.php:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
HI Sridhar, is it not just as easy to just use a media gallery?
It is because it’s not possible to have images link to their respective URLs in a WordPress gallery.
If you are only showing non-linked images, then the gallery will do.
Ah you are right… did not consider that. Gallery only has general link setting.
Hi Sridhar, I am using Soliloquy paid version. How can I display a caption under each of the images?
I added a Caption to each image in the Slider setup and corresponding CSS, but it is not displaying:
Thank you for this tutorial!