Flexible Full-Bleed Card Carousel Loop

Layout Variant: C088

Content Type: Collection

Expected Use:

This component features content in a responsive carousel layout configured based on content type and designated CoreMedia tags. While designed for the Newsroom project, this component has the flexibility for many use cases to showcase content. Download additional author instructions.

Building the C088 Component:

This component uses a CoreMedia Query List which functions similar to a Collection, but allows a dynamic selection of content. Build the C088 Query List as follows.

On the Content Tab

• Teaser Title - The Teaser Title is the header label of the carousel
• Teaser Text - not used.
• Teaser CTA Label - not used. CTAs are added in the local settings on the system tab. 
• Call-to-Action-Button - not used.
• Pictures and Other Media - not used
• Items - Not used. Items are pulled from the Conditions Tab.
• Layout Variant - Set to C088

On the Conditions Tab

• Selection of Content Types - While the default use case is for "Pages", you could also create carousels for Downloads, External Links, Videos, or any combination. Note, that in the use case of the Newsroom we are no longer using News Teasers or Event Teasers. This means you must have a Picture associated with the content you wish to display along with a Teaser Title and Teaser Text. Additionally you must have the appropriate tags available on your content that you will define in the Local Settings (see instructions below for the System Tab)
• Search Query - use the appropriate tags to return the content you wish to display
• Sorting of the Search Results
  • sorted - externally display date
  • order - descending (newest first)
  • number of items - expected to be 6-30

On the System Tab

For the CTAs that show to the right of the Teaser Title you will need to add one or more local settings structs.

1. Go to the system tab of the query list created
2. Add a struct list and name it newsroom.carousel.cta
3. Add a struct on the struct list
4. Inside the struct add a string and name the key as title and value Automations Solutions (value depends on what is required)
5. On the same struct add a link and name the key as url and add/drag a page for the link
6. Repeat the steps 3-6 as needed

Local Settings CTAs

There are two sets of entries in the Local Settings that drive behavior on this component. One set of entries allows you to create CTAs that can drive to filtered news search results or to a specific page. The other entries drive the Tags that are seen on the individual cards.

Adding the labels for the carousel cards

1. Add a struct list and name it newsroom.labels
2. Add a struct on the struct list
3. Inside the struct add a Link list and name the key as topicLabel and add/drag a tag (Topics)
4. Add a new struct on the struct list
5. Inside the struct add a Link list and name the key as subjectLabel and add/drag a tag (Brands,Perspective,People, etc.)
6. Add a new struct on the struct list
7. Inside the struct add a Boolean and name the key as enableDate. Click the checkbox for the label 3 to display and uncheck the checkbox to hide it
8. Click Finish Editing and Apply all changes

Bundle Entries: 

You can have any number of CTAs, although the expectation is 1-3 with one of the CTAs being a "View All". As the values of these CTAs are simply free text, they require individual bundle entries to allow for translation since the Local Settings content is intentionally not translated. These need to be in the bundle in the format newsroom_carousel_cta_title_{Label Value}. The CTAs can be built from a Search Teaser, Page, Teaser or other teasable content type.

For each of the CTAs you add in the Local Settings on the system tab, you will need to add entries to for example the Newsroom Resource Bundle. Since these are free text in the local settings they are not translated by the localization process. To have these CTA labels translated you will need to enter items in the Resource Bundle.

Copy an existing entry or create a new String entry. The Property must match the text you entered in the local Settings. Example: 

Local Setting Value: View All

Property: newsroom_carousel_cta_title_View All

Value: View All

When the Resource Bundle is translated in another locale, the entry in the local settings will be looked up in the Resource Bundle and replaced with the translated value.

There is a requirement to have two entries for the labels that appear at the top and bottom of each card. These are driven by Tags. In the first C088 carousel for the Newsroom which is used for Press Releases, the top Tag (Topic) is a value from "News & Events > Topic" and the bottom label (Subject) is actually driven by any of three different Tag values as these may vary by News Type and include "Product Assets > Brands", "Product Assets > Industry Segment", and "Product Assets > Products". Every value for these tags must be added to a Bundle File similar to the requirement for the filter values of every facet in the onsite search results page. The top label is the Topic and requires a bundle entry with the format newsroom_topic_{Tag Value} for every value that is in the Tag list. The bottom label is the Subject and requires a bundle entry with the format newsroom_subject_{Tag Value} for every value that is in the Tag list. Other C088 instances have Tags defined based on the content being used (eg. Perspectives). Sample values are illustrated on the Bundle Tags under the Newsroom Settings File.