How to simply integrate Liquid Slider with CMSMS
Posted: Tue Jan 15, 2013 4:59 pm
In this post I'm going to explain how I integrated the Liquid Slider Script http://liquidslider.kevinbatdorf.com with the CMSMS interface during the development of the Taste of Tuscany Wedding website http://www.tasteoftuscanywedding.eu, in a way that would keep the simplicity of use typical of CMSMS while letting the users manage the sliders in the website.
My solution
The Taste of Tuscany Wedding website has, on the Home Page and in many internal pages, a set of content sliders made of photos with captivating quotes. How was possible to edit this kind of content without adding difficulty for the staff?
After some research, I choose to use an ad hoc* page template, sporting a ready-made content slider with a fixed number of elements. Liquid Slider works giving to an element a specific tag (in this case an h2 tag) to generate a sliding element; I had to make this editable, and to make the image choosing and loading simple and straightforward.
To do this I used this code:
For every sliding element I inserted a content block for every image, making it appear on a "Slide" tab in the Page editing interface, and another one of the oneline kind (the kind that accepts only one line of unformatted text) to generate the correct h2 tag.
The first content block is a WYSIWYG one, and it lets the user choose and load every image he wants or, if necessary, include other kind of contents.
Doing so, when the user access the Page editing interface, finds the new "Slide" tab, which offers everything is necessary to manage the slider in the page.
Easy, uh?
Pro Alternatives
A more flexible but complex alternative would be to use ListIt Extender to generate the sliding elements list for every content slider, but in my example the user has only to choose the right page template to start editing the slider content.
My solution
The Taste of Tuscany Wedding website has, on the Home Page and in many internal pages, a set of content sliders made of photos with captivating quotes. How was possible to edit this kind of content without adding difficulty for the staff?
After some research, I choose to use an ad hoc* page template, sporting a ready-made content slider with a fixed number of elements. Liquid Slider works giving to an element a specific tag (in this case an h2 tag) to generate a sliding element; I had to make this editable, and to make the image choosing and loading simple and straightforward.
To do this I used this code:
Code: Select all
<div>
{content block="Image1" tab="Slide"}
<h2 class="title">{content block="Text1" oneline="true" tab="Slide"}</h2>
</div>The first content block is a WYSIWYG one, and it lets the user choose and load every image he wants or, if necessary, include other kind of contents.
Doing so, when the user access the Page editing interface, finds the new "Slide" tab, which offers everything is necessary to manage the slider in the page.
Easy, uh?
Pro Alternatives
A more flexible but complex alternative would be to use ListIt Extender to generate the sliding elements list for every content slider, but in my example the user has only to choose the right page template to start editing the slider content.
...