A new page type that provides a carousel with easily reorderable items and custom HTML captions
It implements a new page type (CarouselPage) that provides everything needed to manage a carousel of images. Differently from other carousels, this one does not have the concept of seats (or slots), so managing the images is much easier on the backend side.
You can do bulk uploads and reorder the images by dragging and dropping their thumbnails in a dedicated tab (Image list) inside the CMS. The same image can be shared among multiple carousels. This module adds also some field to the Settings tab, allowing the customization of some aspect of the carousel on a per page basis (e.g., width and height of the images and a flag to show or hide captions). Support for the translatable module is provided out of the box, i.e. when creating a translation, the new page will borrow the original carousel images.
To improve file organization, if you upload your images from the
carousel a specific folder is pre-selected (it it exists!) instead of
the fallback one (
Uploads). The folder name depends on the class
hierarchy. If, for example, you inherit your
HomePage type from
CarouselPage, the code will look for any
(in this order) under your assets directory.
The feature of reordering with drag and drop is provided by the sortablefile module that must be installed before.
To install silverstripe-carousel itself you should proceed as usual:
drop the directory tree in your SilverStripe root and do a
/dev/build/. You will gain the new
CarouselPage type in the CMS.
If you use composer, the dependencies will be pulled-in automatically, so you could just run the following command:
composer require entidi/silverstripe-carousel
You can include one of them in any place inside your page template, e.g. a basic Bootstrap layout template could look like this one:
The default layout (
CarouselPage.ss) embeds a bxSlider carousel.
Alternatively, the silverstrap theme already supports this module out of the box. If you intend to leverage Bootstrap, consider using this theme instead, either by overriding or by modifying it.
HTML captions are allowed. This is internally done by leveraging the
Content field of the
File table (typically empty). This is supposed
to be an HTML chunk despite being defined as a plain text field by the
If the captions are enabled, they can be edited directly inside the Image list tab by clicking the Edit button.
Content is not defined, an
<h4> element with the image title is
used instead: see
templates/Includes/ImageCaption.ss for details.