In this post I will do a brief introduction on the RoyalSlider module for Drupal. At the end of this post you'll be able to make a slideshow of images that work great on both desktop and all your touch-enabled devices! So lets go and talk about:
- Great documentation & support.
- Easy to use api
- Preloading images
- Support for HTML content
- Support for video content
For a full demonstration of its capabilities, check the RoyalSlider demo website.
To get up and running with the RoyalSlider module, you need a couple of things:
- The RoyalSlider module for Drupal
- The dependencies: Libraries API, ctools and jQuery Update
As mentioned in the dependencies, you need jQuery >= 1.7 for this to work, so go to admin/config/development/jquery_update to change jQuery to version 1.7 or higher.
Once you have downloaded all the code, go to the modules page (/admin/modules) and enable RoyalSlider.
The RoyalSlider module for Drupal also offers integration with Views, but installation and usage of that will be the topic of a future blogpost!
This will demonstrate how to use RoyalSlider as an image field formatter.
The use-case is that you have a single node with an image field containing multiple images. In this example lets say we are building a website for a used spacescraft seller.
Each spacescraft is its own node, and contains several photos of the spacescraft.
There are four steps to get our used spacescraft slideshow working:
- Create new content type
- Add an image field to the content type
- Choose RoyalSlider as the display formatter
- Create a node
Let's go over these steps.
Step 1: Create new content type
Creating a new content type is easy in Drupal (as you probably already know), so we'll keep this step short: Go to admin/structure/types/add, pick a name for your content type and hit save and add fields. For this example I've created a content type called 'Spacecraft'.
Step 2: Add an image field to the content type
And allow it to have an unlimited number of items
Step 3: Choose RoyalSlider as the display formatter
Once you've added the field that will contain the images, go to the Manage Display tab of the content type. There you will see the image field, and you'll have the option to change the formatter from Image to RoyalSlider. Once you have selected RoyalSlider as the formatter, you can use the little settings dial on the right to change the formatter settings. There are two options here: 'Option set' and 'Skin'. I will go into further detail about the options in a future blogpost, but you can go ahead and fiddle with creating custom Option Sets at admin/config/media/royalslider.
Step 4: Create a node
The final step in creating your slideshow is creating the first Spacecraft node and adding some pictures. Go to node/add/spacecraft and add a title and some photo's and hit save. And there's your first awesome, touchie draggie slideshow!
To be continued...
There is more to this module. Besides using it as an image field formatter, you can also use it as a views slideshow plugin. And on top of that, you can also create feature-exportable presets that allow you to customize the slideshow. I'll blog about these two topics in part II and part III of this series, so stay tuned!