Plone Carousel

Carousels and sliders are becoming increasingly popular in modern web designs. They allow to create rich navigation menus from images or other objects on your website. These are great presentation tools for any website, since they allow to simultaneously display several images linked to the most interesting sections of your website. It is possible to add rotating carousel banners to Plone-based sites. You can configure many different Plone carousel options including:

  • what exactly you want to be displayed: e.g. title + text + image, title + image, or just image (a kind of slideshow for Plone)
  • what pager controls you want to have: this might be numbers, titles, arrows, previous/next buttons, or none
  • what transition type you want to be used for image shifting (slide or fade) and the speed with which banners will rotate
  • and many other style configuration options using CSS

Plone Carousel Add-ons

Carousels can be added to any section of a Plone site, but usually they are used on site’s front pages. To implement carousel on Plone websites we basically use two Plone add-ons: Products.Carousel and collective.carousel. Since these two products have different algorithm for carousel generation we choose the best suitable one according to the projects’ specifics.

  1. Products.Carousel package allows to create elegant, javascript-animated splash panels in Plone. jQuery javascript is used to automatically rotate images, that are uploaded into a special folder. Images can be captioned and can be hyperlinked to any place within Plone site or to any external address. Such jQuery slideshows can be configured for any folder of a Plone site. They usually appear above the main body content.
  2. collective.carousel package is based on Scrollable plugin for jQuery Tools library. It allows to create carousels of the Plone site items. To select objects that will be displayed on such slideshow - you have to create a collection that will collect those objects. You can add more than one carousel on one page, that might be placed on different site places: usually above page’s title or as a portlet.

Carousel can also be located in site portlet columns. There is collective.portlet.shelf add-on for Plone that allows to display Plone collection's results in a carousel portlet browsing them by subcollections. Based on a standard Plone collection portlet, this product displays collection items in a carousel.

Carousel Customizations

Using above-mentioned products as a basis for custom carousel implementation, Quintagroup customizes their display view and functionality, we also add custom css styles to make it look just fine. We can customize such Plone slideshows according to any client’s requirements:

  • add video files to rotate as carousel banners together with images
  • provide different display view for every banner: default carousel settings allow to define display view for all banner objects (with/without image, title or description), but sometimes it is needed to make every banner have different view
  • style the pager navigation: apart from default pager types (previous/next buttons, numbers, titles, or titles + text buttons) we can provide any-styled buttons for navigation between carousel banners
  • customize title/text fonts & colors to display on the carousel
  • customize the default grey image used as a background for banner text
  • place carousel on any place on a page
  • customize the look of items shown in a carousel

Example Carousels

Quintagroup has implemented Plone Carousel on several websites. We developed different carousel views for the following projects. Click the screenshots below to be taken to the site with live Plone carousel:

WIKID TechnologiesWIKID Technologies
- based on Products.Carousel
- auto banner rotation
- banners have special "Free trial" button with a styled hover effect, background image and title in larger font

InstrulogInstrulog
- based on Products.Carousel
- auto rotation (every 8 seconds)
- navigation buttons are displayed below banners
- whole banners are linked

Schools Plone ThemeQuintagroup Schools Plone Theme
- based on Products.Carousel
- auto rotation (every 8 seconds)
- no navigation buttons between jQuery slider objects
- banner title and description located under the image can be linked to any URL

Københavns EjendommeKøbenhavns Ejendomme
- based on Products.Carousel
- auto rotation (every 4 seconds)
- no navigation buttons
- banner title and description are located above the image on a grey background

BloddonorerneBloddonorerne
- based on Products.Carousel
- auto rotation (every 8 seconds)
- no navigation buttons
- whole images are linked

ServicestyrelsenServicestyrelsen
- based on collective.carousel
- auto rotation (every 12 seconds)
- numbers are used to navigate between banners
- image with title and description are displayed

AnkestyrelsensAnkestyrelsens
- based on collective.carousel
- jQuery slideshow images auto rotation
- numbers are used to navigate between banners
- image with title, description and 'Read More' link are displayed

StudyInDenmarkStudyInDenmark
- based on Product.Carousel
- images/videos auto rotation
- numbers are used to navigate between banners
- 4 views for displaying carousel banners

Belgian Aeromodelers LeagueBelgian Aeromodelers League
- based on Products.Carousel
- carousel has a fixed width that allows you to display a few images with different level of transparency: the three images to the right have lower transparency level than that to the left
- all images are linked to relevant PDF documents

How to get started

Interested in adding carousel to your Plone site? Need a consultation on custom carousel implementation for Plone? Need help with Plone theme with carousel development? Contact us today and we will do our best to help you.

Testimonials

It is a pleasure working with the Plone developers at Quintagroup. They are very knowledgeable, efficient, and customer-focused. I have found Plone to be a powerful and user-friendly Content Management System.

August 13, 2013
Robert Loftur-Thun

Wonderful Plone developers. Fast, efficient and very knowledgeable.

August 12, 2013
Jason Atwood

Thanks a lot... I've always appreciated the level of services provided by your company, I'm a big fan and shall continue to advertise your services among my fellow Zope developers!

Nov 30, 2011
Dominique Trembloy

I have used a Plone site environment hosted by Quintagroup to develop a workflow application for my business. Since January 2010 ... I have been a customer of Quintagroup and I am very happy about the good and reliable service, including update of the website to version 4.1 of Plone.

Apr 20, 2011
Maarten de Vries
www.insolweb.info

...I was a very satisfied customer for 7 years. They made sure that my website was always up, even during a couple episodes of being "slashdotted", and fixed the very few problems that I had in record time. This is a very professionally run outfit...

Feb 14, 2011
Mario Butter

http://silent-tower.org

I just want to thank each of you for your work... My business has increased and my anxiety level has been lowered since using Plone...It's been such a pleasure working with a professional and intelligent group like your.

Tom Parish
http://tomparish.com

Follow