Soliloquy is a premium WordPress plugin that allows you to create and customise excellent responsive image sliders with ease.
Though I find Soliloquy very easy to use, there are times when you’ll want to build sliders automatically, so that site authors (clients) can’t inadvertently mess things up.
The Dynamic add-on to Soliloquy allows you to build and add sliders programmatically – which reduces the chances of problems.
It works really well with the Thesis 2 framework – and the Advanced Custom Fields plugin further refines the solution.
When properly set up, site authors can easily add image sliders by simply selecting images in the post edit window, as shown in the short video in the sidebar.
Attach Images to the Post Using ACF
Images can be added to posts (or custom post types) by means of an ACF repeater field. The repeater field is a premium add-on to the ACF plugin. If you want to efficiently add custom fields to your site, you should certainly spend the money on this premium add-on to the free ACF plugin. It is ridiculously cheap at $25 for an unlimited developers licence.
Create an “image” type sub-field. This will allow your users to easily add as many images to their sliders as they want. I’ve called the repeater field “project_images” and the sub-field “image”.
The return value for the sub-field should be set to “Image ID”. Once images have been attached to a post, they can be added to a Soliloquy dynamic slider.
Dynamically Generate a Soliloquy Slider
Put the image IDs into a format that can be used by Soliloquy to dynamically generate a slider:
This function passes the image IDs to the Soliloquy dynamic addon API as a comma separated list. The slider is then built using these images.
Add to Post Using Thesis 2 Hook
The last line of the function above allows you to control exactly where your slider is placed.
The Thesis 2 framework has an nice system of hooks that allows you to add functions into content with a great degree of control. I usually follow this workflow:
- Create a custom PHP function (like the one shown above) and add this to custom.php for your active skin
- In the HTML skin editor, create a new HTML container
- In the “HTML Tag” field for the container, set “no HTML wrap” – this means that if your function does not build any content, you won’t create an unnecessary empty div
- Click the “Admin” tag for the HTML container, and add the hook name in the relevant field
- Click and drag the HTML container to the required location in the page template
