Displaying Clarity’s Content

Effectively showcasing content is crucial for engaging users and improving content visibility. Whether it’s blog posts, news articles, or related media, organizing and presenting these elements in a cohesive manner can significantly enhance the user experience. One way to achieve this is using Liferay Collections. Building on the previous lesson about content organization, you’ll learn how to leverage collections to display sets of content for Clarity.

Collections

Collections define sets of content for rendering in site pages. Once defined, you can use the collection multiple times as the data source for fragments and widgets. Any changes to a collection automatically propagate to page elements using the collection. By decoupling asset selection from rendering, collections provide a centralized place for managing groups of content. Collections provide the following benefits:

• Group Diverse Content: You can create collections to bring together different content types, like blog posts, documents, web content articles, and custom object entries, under a single theme or category. Group content items manually or dynamically by either selecting individual items or defining selection criteria for choosing items automatically.

• Filter and Personalize Content: You can define specific criteria, such as tags, categories, or publication dates, to filter and display only relevant items within a collection. This enables you to personalize the content experience for different user groups.

• Simplify Content Presentation: You can easily embed collections into your Liferay pages using dedicated out-of-the-box fragments like Collection Display. This streamlines the process of showcasing curated content within website layouts.

For most use cases, you should use fragments to render collection items, but you can use the asset publisher widget with FreeMarker templates for use cases that require complex templating.

Asset Publishers and Collections

In addition to fragments, you can use the Asset Publisher widget to render collections in site pages. Asset publishers are self-contained widgets, meaning each instance includes its selection criteria, display settings, and user interactive functionality. Though you can define an asset publisher’s select criteria without collections, this approach creates overhead, requiring users to manage each widget’s data source individually, even if they use the same selection criteria. For this reason, you should always use collections for asset selection. Doing this helps future-proof your solution while laying the groundwork for leveraging capabilities like segmented data.

Exercise: Creating a Manual Collection

Liferay Collections are lists of content items that you can showcase in your site pages. You can group different content types together, making it easier to find and display related items. Each list can be defined manually or dynamically.

Here you’ll add web content articles to a manual collection and map them to Clarity’s home page as Walter Douglas.

To do this,

1. Sign in as Walter Douglas.

   • Email: [e-mail]
   • Password: learn

2. Open the Site Menu (), expand Site Builder, and select Collections.

3. Click New and select Manual Collection.

4. For Title, enter Helpful Articles and click Save.

5. For Item Type, select Web Content Article.

6. For Item Subtype, select Article.

7. Click Save.

8. In the Collection Items section, click Select and select Article.

9. Go to the Articles folder, select these three articles:

   • Embracing Innovation: Key Trends Shaping Eyewear Manufacturing
   • Revolutionizing the Eyewear Industry: How Innovative Materials Make a Difference
   • Enhancing Efficiency in Eyewear Manufacturing: A Comprehensive Approach

10. Click Add.

    

    The manual collection is now populated with content and ready to use in site pages.

11. Go to the Home page and click Edit ().

12. Select the Collection Display fragment in the Helpful Articles container.

13. In the configuration side panel, click Plus () for Collection and select the Helpful Articles collection.

    

    The fragment now sources its content from the Helpful Articles collection. The provided composition already applies the Clarity Card fragment to the collection display for rendering each item. To display article content from the collection, you’ll need to map the card’s sub-elements to fields in the articles. But before mapping the card’s sub-elements to content fields, let’s change the collection display’s pagination.

14. For Pagination, select None.

    Now let’s map the card’s sub-elements to their corresponding fields in the articles.

15. Select the Clarity Card fragment and note the sub-elements included:

    • card-image
    • category
    • card-title
    • summary
    • card-link

16. Select each of the following elements, set its Source Selection to Mapping, and select the corresponding field:

    • card-image: Image under Content (Article)
    • category: Articles under Categorization
    • card-title: Title under Basic Information
    • summary: Headline under Content (Article)

17. Select the card-link sub-element, go to the Link tab.

18. For Link, select Mapped URL.

19. For Field, select Default.

20. Click Publish to save your changes to the Home page.

    The Helpful Articles section of the Home page should now display web content from the collection you created. However, two elements aren’t working as expected: category and card-link. This is because the articles do not have categories assigned to them and because the articles do not have a default display page template. Let’s fix these issues.

21. Go to the Web Content application and assign one category to each article.

22. Go to the Page Templates application, go to the Display Page Templates tab, and set the Article display page template as the default for its type.

23. Return to the Home page and verify all mappings work.

Great! You created a manual collection and displayed it in Clarity’s Home page. Next, you’ll learn how to create a dynamic collection.

Exercise: Creating a Dynamic Collection

Having categorized your FAQ web content articles earlier, here you’ll use those categories to build dynamic FAQ collections as Walter Douglas.

To do this,

1. Open the Site Menu (), expand Site Builder, and select Collections.

2. Click New and select Dynamic Collection.

3. For Title, enter FAQ - Retail Partners and click Save.

4. For Item Type, select Web Content Article.

5. For Item Subtype, select FAQ.

   This limits the collection to FAQ web content articles. Next, you’ll define the collection’s scope and filter to limit which FAQs are included in the collection.

6. Under Scope, click Select and select Other Site or Asset Library.

7. Go to the Asset Libraries tab and click Marketing Assets.

   This ensures the collection uses FAQ articles from the Marketing Assets library.

8. Under Filter, set the rule to Contains *All* of the following Categories.

9. In the Categories field, search for Retail Partners and select it.

   

10. Click Save to create the collection.

11. Repeat the above steps to create these collections:

    • FAQ - Products & Services
    • FAQ - Pricing & Ordering
    • FAQ - Returns & Exchanges

    

    For each collection, filter results using its corresponding category.

You now have four FAQ collections. Next, you’ll use them to display content in Clarity’s FAQ page.

Exercise: Displaying Content on the FAQ Page

Using what you have learned in the previous exercises, let’s map content to the FAQ page as Walter Douglas.

To do this,

1. Begin editing the FAQ page.

2. Double click the Image fragment to configure its image-square sub-element.

3. Set the image to glasses-vertical-banner-with-text-lg from the Marketing Assets library.

4. The block on the right contains a page title and four FAQ Section compositions. Each FAQ Section contains a heading and a Collection Display fragment. Each Collection Display contains a custom fragment called FAQ Question and Answer Pair. First map the collection displays to the FAQ collections you built earlier. Make sure each collection corresponds to the heading for that section.

   

5. For Pagination, select None.

6. Check Display All Collection Items.

7. Map the correct fields for each FAQ Question and Answer Pair so that the content renders properly in the collection displays.

8. In the Promoted Articles container, map the collection display to the Helpful Articles collection.

9. Configure this setting for the FAQ Content and Promoted Articles containers:

   Tab	Setting	Value
   General	Container Width	Fixed Width

10. Click Publish to save your changes to the FAQ page.

Using collection displays and custom fragments, you have rendered FAQ web content onto Clarity’s FAQ page. Next, let’s add content to the header announcement bar.

Exercise: Adding Announcements to the Header

Here you’ll apply what you’ve learned about web content, collections, and page templates to add an announcement to Clarity’s header bar as Walter Douglas.

To do this,

1. Open the Site Menu (), expand Site Builder, and select Collections.

2. Create a new dynamic collection titled Announcements.

3. In the collection configuration menu, set Item Type to Web Content Article and Item Subtype to Announcements.

4. For scope, select the Marketing Assets library.

5. Click Save to publish the collection.

   Now that you’ve created the collection, let’s add it to the Primary Master Page template.

6. Open the Site Menu (), expand Design, and select Page Templates.

7. Begin editing the Primary Master Page template.

   Note: You may notice the styles applied to the master page are different from those applied in site pages. This is because you’ve applied the theme and theme CSS client extension to site pages and not to master pages. If desired, you can apply the theme and client extension to the master page directly. Make sure you uncheck all theme properties (e.g., Show Footer, Show Header, etc.).

8. Toggle the visibility () of the Header Announcement Bar container.

9. Select the Header Announcement Bar container and configure this setting:

   Tab	Field	Value
   Styles	Background > Color	Color Brand Primary

   

   Note: Color options are defined by the theme’s style book. Unless you’ve applies the theme CSS client extension to the master page template, the Color Brand Primary option appears purple. This value is overridden in site pages by the Theme CSS client extension.

10. Add a Collection Display fragment to the container, select it, and configure these settings:

    Tab	Field	Value
    General	Collection	Announcements
    General	Pagination	None
    General	Maximum Number of Items to Display	1

11. Add a Container fragment to the collection display, rename it Announcement, and configure these settings:

    Tab	Field	Value
    General	Content Display	Flex Row
    General	Align Items	Center
    General	Justify Content	Center

12. Add a Paragraph fragment to the container, select it, and configure these settings:

    Tab	Field	Value
    Styles	Text > Color	Color Neutral 0

    

13. Select the paragraph’s element-text sub-element and configure this setting:

    Tab	Field	Value
    Mapping	Field	Message

14. Add a Clarity Button fragment to the Announcement container after the paragraph, select it, and configure these settings:

    Tab	Field	Value
    General	Type	Borderless
    General	Style	Primary
    General	Size	Small
    General	Inverted	Yes

15. Select the button’s link sub-element and configure these settings:

    Tab	Field	Value
    Mapping	Field	Link Text
    Link	Link	Mapped URL
    Link	Field	Link to Page

16. Adjust the margins and padding for the announcement bar elements until you are satisfied with it.

    

17. Click Publish Master to save your changes.

The Header Announcement Bar is now visible on all pages that use the Primary Master Page template.

Conclusion

Great! You’ve used both manual and dynamic collections to display content on Clarity’s website. Next, let’s explore how Clarity can leverage Liferay’s Commerce features to create content for their products catalog.

Next Up: Creating Clarity’s Commerce Content