Text Block Carousel (Bootstrap Version)

Introduction

This tutorial will explain how to add a Text Block-based image carousel to your site.
1. Add a Text Block Group

Begin by editing the page where you would like to add the Text Block carousel. Next, click the "Text Block" link in the right sidebar, under "Add Content." This will add a new Text Block Group to the page.

Next, click the "Settings" link in the upper right corner of the new Text Block Group. This will open the settings panel. In the "Display Options" tab, change the "Layout" setting to "Carousel" and the "Image Size" setting to "Featured." Finally, click the "Submit" button to save your changes.

Return to Top
2. Add an Image
To add a new image, first click the "+Existing" button at the bottom of the Text Block Group. This will add an individual Text Block, and open its editing window. The Title and Name fields are optional, however by titling your Text Block, you will be able to retrieve it from the Warehouse much more easily. The Content field should be ignored entirely, however.

Below the Content field, you should see the collapsed "Properties" section. Click this section to expand it, which will then display the "URL" and "Image" fields. The URL field is optional - if you would like the image to link to a specific webpage, enter its address here (note: please include the full address - ex. http://www.website.com).

To add the image, click either the "Upload Image" or "Choose from Warehouse" buttons. "Upload Image" will allow you to search your computer for the appropriate image file, and add it directly to the Text Block. "Choose from Warehouse" can be used if the image has already been uploaded - for example, if a batch of sponsor images were uploaded to the Warehouse at once. 

NOTE: Carousel images should all be (nearly) the same resolution. The exact size does not matter, just that all images are at, or near, the resolution of your choosing. Images of varying size may cause display issues.

Once finished, click the "Submit" button to add the new image to the carousel.

Return to Top
(Optional) Remove an Image

To remove an image, mouse over the invidiual Text Block, then click the Remove button (minus sign icon) that appears in the upper right corner. Confirm the pop-up dialog to complete the process.

Return to Top
(Optional) Update an Existing Image
To update an image that is in the carousel, click its thumbnail in the Text Block Group to open the editor. Next, click the collapsed "Properties" section and make the necessary changes to the image or URL. Once finished, click the "Submit" button to save your changes. Return to Top
(Optional) Reordering the Carousel
To change the order in which the images appear, mouse over the Text Block you would like to move to highlight it. A Move button (four-arrow icon) should appear in the upper left corner. Mouse over the Move button, then drag-and-drop the Text Block higher or lower, as needed. Upon dropping the Text Block into its new positiion, the carousel will automatically be updated to reflect this change. Return to Top
(Optional) Turn on Auto-Rotation

The images in the carousel can rotate automatically, at an interval of your choosing. To enable this feature, click the "Settings" link in the upper right corner of the Text Block Group. This will open the settings panel.

Next, click the "Variables" tab at the top of the panel. In the "Custom Variables" section, you should see two blank fields, separated by an equals sign. Enter "RotateSpeed" in the left-hand field, and enter the time between rotations (in milliseconds). For example, "RotateSpeed" = "7000" will cause the carousel to rotate every 7 seconds. Once you have entered the variable name and the speed, click the "Submit" button to save your changes.

Return to Top