Displaying Content in Site Pages

Content pages are the default and recommended page type in Liferay. They provide a flexible canvas that you can use to create content-rich, visually engaging experiences. These pages are built primarily using fragments, which serve as the building blocks for designing layouts and (most importantly) displaying your content and assets.

As you've learned, structured web content and digital assets are authored separately from the pages where they’re displayed. This decoupled approach (i.e., where authors fill in content fields or upload files and add metadata) helps ensure consistency, reuse, and governance across the content lifecycle. However, it also means you must take extra steps to display it in pages.

This lesson explores the primary methods for displaying structured content and assets on site pages.

Displaying Individual Items

For structured web content and documents, you generally have two main display approaches: mapping fragments to individual web content or document fields, or mapping fragments to FreeMarker-based templates. In many cases, a combination of these methods offers the most flexibility and the best results.

You’ll learn about using FreeMarker templates in a later lesson on styling content displays. This lesson focuses on the primary method of mapping fields directly to page fragments

Mapping Fragments to Fields

Mapping individual fields to fragments is ideal when you need precise control over the layout and don't require complex presentation logic. The key is to select a fragment that best suits the data you want to display with the least amount of additional setup or custom styling.

For example, to display the title of a web content article, the Heading fragment is your best choice, since it outputs standard HTML heading tags (H1-H6). While you could use a Paragraph fragment, it would require manual styling and custom CSS to achieve the same result, which is less maintainable. To display a complete content item, you can repeat this process, dragging different fragments onto the page and mapping each one to a specific field from your content.

Using Display Fragments and Widgets

Instead of mapping each field to a separate fragment, an alternative approach is to use a single component to render an entire content item. Liferay provides two primary options for this: the Content Display fragment and the older Web Content Display widget.

Both of these approaches require a developer to first create a FreeMarker template that defines the complete HTML structure and styling for the content item. The Content Display fragment is the more flexible option, since it can display multiple asset types, including documents, web content, and custom objects. The Web Content Display widget, by contrast, can only be used to display web content articles. You’ll learn more about creating these templates in a later lesson.

Displaying Groups of Items

While displaying individual content items is fundamental, many pages benefit from showcasing groups of related items, such as a list of recent blog posts or featured products. Liferay provides several tools to dynamically group and display content:

• Collections
• Asset Publisher
• Frontend Data Sets

However, collections are the recommended approach to displaying groups of content.

Collections

Collections are reusable sets of content. You can create them by manually selecting items or by defining dynamic rules based on criteria like categories or tags. Once defined, you can use the collection multiple times as the data source for fragments and widgets. By decoupling asset selection from rendering, collections provide a centralized place for managing groups of content.

Generally, collections provide these 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.

• 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 and Maintenance: You can easily embed collections into your Liferay pages using fragments. This streamlines the process of showcasing curated content within website layouts. Additionally, any changes to a collection automatically propagate to page elements using the collection.

Together, these benefits make collections an essential part of scalable and maintainable content displays.

Adding Collections to Pages

The primary tool for rendering a collection is the Collection Display fragment. This fragment acts as a container where you can add other fragments (like a card or an image) to define the look of each item in the list. You then map these fragment elements to the fields of the assets in the collection. 

You can also use the Asset Publisher widget with FreeMarker templates. This widget is self-contained, meaning each instance includes its selection criteria, display settings, and user interactive functionality. That said, you should use collections for the widget’s asset selection. This helps future-proof your solution while laying the groundwork for leveraging other capabilities (e.g., personalization).

Data Sets

Data sets are virtual containers that use headless APIs to retrieve resource data from individual Liferay applications. Supported endpoints include custom objects, documents, web content, and many more. Once you’ve selected your data source, you can configure which fields to include and whether the data appears in a table, list, or card format.

Clarity’s Content Display Requirements

Clarity has a variety of content and asset types that would benefit from group displays, including articles, FAQs, and leadership profiles. For these items, they plan to use collections to create both curated and dynamic lists. For example, Clarity wants to create a dynamic collection of their latest news articles that they can easily display on their homepage, without needing to edit the page directly.

Beyond public content, Clarity also has custom object data for distributor applications and support tickets. While this information is not for public display, their administrative team needs an efficient way to review it. For this, they plan to leverage Frontend Data Sets to create simple displays on secure, internal pages.

Conclusion

Liferay's practice of decoupling structured content from its display simplifies the authoring process and provides significant presentation flexibility. This approach ensures your site can evolve efficiently, allowing page layouts to change and dynamic lists to update automatically as new content is added.

Next, you’ll practice displaying individual content items and collections on Clarity’s public website.