DeveloperTutorials for Web Developers & DesignersContent & Image Rotators

Managing Rotator Content

Website owners can't be expected to update code in order to make changes to rotator content. To provide admins with a better experience when updating rotator content, you can configure rotators to populate dynamically with content from Posts or Pages.

A common approach is to populate Rotator content with all Posts of a particular Post Category, using the <ss:data:repeater> control. This approach allows admin users to update rotator content by creating, deleting and modifying Posts. 

Before you begin:

You should review the previous Rotating Image Banners tutorial and examples if you're not familiar with rotators yet. 

Click here if you need to review our tutorial on Logic & Repeaters.

Post-based Image Rotator

To get started, navigate to Dashboard > Website > Posts > Categories, and setup a new Post Category to be used with the banner.

We usually label the Post Category as something like "Featured", or "Home Banner" etc. 

After creating a new Post Category, edit its details. There will be a tab titled "Developer", which contains the Post Category ID. Note that ID, and as it will be used below.

Copy and paste the following HTML & CSS into a design or page to implement a post-based image rotator. Don't forget to update line 6 below, so that it uses the correct Post Category ID you noted earlier - getAllForCategory(9). 

  • HTML
  • CSS

Explaining The Code

Line 2: The opening of the <ss:layout:rotator> control. The IDs of the next and previous buttons have been defined, and the value specified in the classcontrols attribute will render some dots to allow visitors to rotate to specific slides.

Line 6: The opening of the <ss:data:repeater> tag. Everything between lines 6 and 17 is repeated for every element returned by the datasource attribute of this tag (ie. a list item will be defined for every Post). In this example the data source attribute is a call to the function \Components\Website\Posts::getAllForCategory().

Line 11: The opening of an <ss:logic:if> tag. The button placed within this control will only render if the test attribute of this tag is true. In this case, the test is to determine whether the Post is linked to a page.

Managing Slider Content

The code for displaying the slider basically states "Display all posts which have the category of featured". You can add a new slider image by taking the following steps:

  1. Navigate to Dashboard > Website > Posts.
  2. Click the "New Post" button.
  3. Enter a Title and Short Teaser for the Post, and then upload an image. 
  4. Set the Primary Category to the Post Category which is used for displaying the banner images.
  5. Select a page to link the banner button to, otherwise select "No link".
  6. Save the Post.

Note: Posts are ordered by their publish date by default, and only logged-in administrators can see offline Posts.