This tutorial will cover how to set up an Image Rotator using the Image Rotator widget in dotCMS. An Image Rotator is a simple slideshow that rotates through all the images in a folder and shows them on page.
Preparation: Make sure that you have saved all images you will be using for the slideshow to your computer. The images should all be of the same width and height or else the Image Rotator will not display correctly.
Step 1) Adding files to a folder that you have created. This folder is specifically used for images you want in your slideshow.
Step 2) Creating a new image rotator widget on your page and filling out the appropriate fields to make things appear properly on screen.
Final Notes) Limitations, bugs, and final thoughts over the widget.
For Reference: Throughout the tutorial I will be referencing the link below:
Step 1) Create a new folder in dotCMS. This folder is where images will be uploaded to for the slideshow. Example:
Next, double click the folder to enter it. Then at the top select +Add New:
As the image shows, select Multiple Files. Next a screen will appear similar to this one:
Note: Two items have been circled in the above image. The Folder option is something that needs to be written down for Step 2. For the image above, /webteam/tutorials/images/rotator/ needs to be written down.
*Note: You must include the ending / when you write down the Folder option. /webteam/tutorials/images/rotator/ will work as a folder path while /webteam/tutorials/images/rotator will not.
The number of files to upload is self explanatory. This tutorial will be using three images. When 3 is selected a page similar to this appears:
For each file, an option is given to Choose File to upload. When that button is clicked the screen will look similar to this:
From that open window files to upload are individually selected. Once all files have been selected, click Save and Publish.
The images uploaded now appear in dotCMS:
Step 2) Creating the New Widget
Open the page that the Image Rotator widget will be placed on. At the top right corner of the page select Add:
Next select the Add Widget option. The page will look similar to this:
As the image suggests, select Image Rotator. The screen will look similar to this:
In the top right corner click Create New Image Rotator to be taken to this screen:
All of the options circled above should be set in accordance with the needs of the individual slideshow. A brief explanation of each option:
Widget Title: The widget title is just the name used to identify the widget. The above example is using Example Image Rotator. Name appropriately.
Width and Heigh in Pixels: The width and height options are used to define the size of the widget, not the images. Set these options to the height and width of the images you have uploaded to dotCMS. The above examples uses 800 and 600 for width and height.
Path to Image Folder: This is the Folder option that we wrote down in step one. For the example /webteam/tutorials/images/rotator/ is used.
Randomize Images: Whether images appear randomly or in alphabetical order. Default is set to use alphabetical order.
Delay: The delay in seconds between rotation of images.
Once all options are configured, select Save and Publish to complete the creation of an Image Rotator widget.
If everything went as planned, a completed slideshow will be on page similar to the one found on this page: https://www.uakron.edu/webteam/tutorials/image-rotator-example.dot
1) Images should always be of the same size in a slideshow. The widget places them each back-to-back inside the page. For this reason, if an image’s width is smaller than the images around it, more than one image will bleed into the screen at a time, making the slideshow look bad.
2) As stated earlier in the tutorial, make sure to include the final / when writing down the Folder field from Step 1. The reason that ending / is so important is that it identifies the final word as a folder and not a file. /webteam/tutorials/images/rotator <– Notice the lack of an ending / in that folder path. dotCMS will identify rotator as a file and not a folder unless the final / is used. Like this: /webteam/tutorials/images/rotator/