Now reading Writing interesting stuff for creative people

Widget Corner #3

The Carousel Widget


A popular feature of many modern websites is a carousel of images, we even have one on our own homepage. The carousel or image rotator is an area on the screen which displays a series of images, typically at the top of the page in a so called hero panel. Normally each image is associated with a link which takes the user to a relevant page or bookmark. Where there is a need for text to be displayed along with the image this is best done using a text overlay, rather than having text embedded in the image. This is better both for SEO and management of the text as well as allowing for translations in multilingual websites.

Very often the panel will have some sort of graphic indicator to show which of the series of image is currently being shown and this serves as a button which provides a shortcut to force the panel to display that particular image. There may also be left/right scrolling functions in the form of arrows or other graphic devices shown in the panel.

Historically such carousels were often created using Flash, but nowadays this has largely been replaced by the use of JQUERY or other similar JavaScript libraries.

There is no specific support for carousels within the Ektron system, however the Smartform data construct provides a ready mechanism for creating and managing such carousels. Ektron allows a suitably authorized user to create a Smartform using the Smartform editor. In effect the user is defining the structure of a data item, in this case of an image carousel. 

A typical carousel Smartform might look like:
 

Carousel-Widget(1).jpg

 

The (+) icon denotes a repeating element.  Clicking on this allows the user to add another image placeholder within which the user can specify another image, link and overlay text.
While the Smartform lets us specify and manage the carousel, if we are going to use it in a Page Builder page, we need to make it into a widget.  This is easily done, since all we now need to do is create a widget that is basically a version of the content block widget of Ektron.  The new widget inherits from the Content Block widget, which allows it to be connected with a particular content block or Smartform, in this case our carousel Smartform.  The widget is configured to use the appropriate JQuery to display the Smartform as a carousel.