Populating Rotators with Posts

Rather than using static content within a rotator, they can be customized to populate content dynamically, using data from Posts, Products or Pages.

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

Before you begin:

If you're not familiar with Oncord rotators, review the Rotating Image Banners tutorial first. You'll also be working with Logic & Repeaters / Loops.

Post-based Image Rotator

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

We usually give the Post Category a title along the lines of "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.

Update line 6 below, using the Post Category ID you noted earlier - getAllForCategory(9).

HTML
CSS

<layout:rotator id="featuredRotator" showAtOnce="1" style="--rotator-control-outline-color: #ffffff; --rotator-control-background-color: #169fda" transition="slide" positionStep="single" speed="normal" minimapVariant="dashes" arrowVariant="none" autoRotateTime="8"> <data:repeater datasource="\Components\Website\Posts::getAllForCategory(9)" as="post"> <templates:section class="custom-slide" color="#ffffff" paddingBottom="12rem" paddingTop="12rem" paddingLeft="2rem" paddingRight="2rem" bgimage=""> <templates:row> <templates:column width="6"> <templates:section color="#333" bgcolor="#ffffff" paddingLeft="2rem" paddingRight="2rem" paddingTop="2rem" paddingBottom="2rem"> <h1 style="margin-top:0;"></h1> <p><big></big><br /></p> <logic:if test="$post['post_content_url']"> <templates:button variant="Classic" bgcolor="#169fda" color="#fff" padding="12" borderRadius="0" href="">Read More</templates:button> </logic:if> </templates:section> </templates:column> <templates:column width="6"></templates:column> </templates:row> </templates:section> </data:repeater> </layout:rotator>

Explaining The Code

Line 1: The opening tag for the <layout:rotator> control. Each child node within the rotator represents a single rotator slide.

Line 2: The opening of a <data:repeater> control. Content within this control will be repeated for every item returned by the datasource attribute of this tag (ie. a section will render for each Post). In this example the data source attribute is a call to the function \Components\Website\Posts::getAllForCategory().

Lines 3 ~ 16: Oncord section, row and column elements have been used to define the layout structure within each slide, however you could opt to use your own custom HTML structure instead. The background image used by the section, is set to use the image associated with the Post (line 3).

Line 9: If the Post is linked to a page or other content, show a "read more" button.

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:

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

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