KBSlideshow
, (*1)
Slideshow module for SilverStripe 3.1 that implements back-end support for slideshows/carousels/sliders. For the sake of demonstration it comes with an plug-and-play example using slick. It can easily be removed without disrupting functionality. More about this further down under the slick heading., (*2)
Installation
As a general rule of thumb it can be a good idea to back up your database and log into your site as Admin before installing modules, so even though nothing should break, feel free to do so., (*3)
Requirements
Using Composer
- Open a terminal and
cd
to your SilverStripe root.
- Run
composer require kreationsbyran/kb-slideshow
.
- Go to http://your.site/dev/build?flush=all (replace "your.site" with the url of your website)
Manually
- Download the zipped master branch (here).
- Move the contents into the root directory of your SilverStripe installation.
- Go to http://your.site/dev/build?flush=all (replace "your.site" with the url of your website)
Additionally (optional)
KBSlideshow works well together with SortableGridField which allows for drag-and-drop sorting of the slides., (*4)
Usage
In Template
Using <% include KBSlideshow %>
in your SilverStripe template will include the default template. You can easily replace or edit this template., (*5)
/templates/includes/KBSlideshow.ss markup ouput
├──div.kbslideshow (if exists)
| └──div.kbslide (loop)
| ├──img (if exists)
| ├──h1 (if exists)
| └──p (if exists)
In CMS
The module extends Page and once installed it will create a tab called "Slideshow" in the CMS of all Pages., (*6)
"Image rescale width/height" will set the ratio of all slides to width:height if both options are set. If only one is set, the images will be cropped using SilverStripes Image.SetWidth()
or Image.SetHeight()
functions. If none are set the selected image won't be rescaled or cropped and can result in heavy load. Recommended to set at least one if slideshow contains images., (*7)
Slick
The module comes bundled with a demonstration using slick. To remove the coupling between the module and slick in order to use a different slideshow/slider/carousel library, simply follow these two steps:, (*8)
- Remove
/templates/includes/KBSlick.ss
.
- Remove
<% include KBSlick %>
from /templates/includes/KBSlideshow.ss
.
Settings
If you wish to keep using slick, you'll find the settings located in /templates/includes/KBSlick.ss
. There is currently no back-end support for managing slick settings but can easily be added by modifying the KBSlideshow class., (*9)
License
Copyright (c) 2015 Kreationsbyrån Sverige AB, (*10)
Licensed under the MIT License, (*11)