Displaying Content

Effectively showcasing content is crucial for engaging users. Whether it’s blog posts, news articles, or related media, organizing and presenting these elements in a cohesive and compelling way can significantly enhance the user experience. Your earlier decisions on using structured content, in-line content, or a hybrid approach will guide how you effectively display this information to your audience.

Here you’ll explore the various methods Liferay offers to display both in-line and structured content.

Displaying In-Line Content

In-line content is added directly to fragments while building pages. For example, if a page needs a specific title, you could add a Heading fragment to the page and type your text directly into it. The process is generally straightforward: double-click a fragment on the page to edit its text sub-element.

For Heading fragments, you simply enter your text, while Paragraph fragments provide a rich text editor to input and format your text. HTML fragments allow for direct HTML code input or pasting. Similarly, to add an in-line Image, click its placeholder on the page and select your desired image. This method is ideal for static elements unique to a specific page, like unique introductory text or one-off images that won't be reused elsewhere.

Display Structured Content

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

Mapping Fragments to Fields

This method is ideal when you need to display a specific piece of information directly from your structured content and do not require complex presentation. The key is to first choose a fragment that best suits the data you want to display with the least amount of additional setup or custom styling. For example, if you want to display a web content article's title as a prominent heading on your page, the Heading fragment is specifically designed for this. It outputs standard HTML heading tags (H1-H6) and offers simple configuration options. While you could technically use a Paragraph fragment to display a title, it would likely require you to manually apply heading styles and potentially add custom CSS to achieve the same result.

Mapping Fragments to Templates

Liferay empowers you to control the visual presentation of your structured content using the FreeMarker templating language. Specifically, you can create web content templates or information templates that leverage FreeMarker to define the precise HTML structure and styling used to render specific types of content and assets. Once defined, you can map fragments to these templates to render your content in your site. Each template can render an entire article, or you can use a combination of templates, each handling one or more fields and metadata for the item.

While Liferay provides web content templates specifically for rendering web content articles, it also provides information templates for broader application. Supported asset types include products, categories, documents, custom object entries, and more. These FreeMarker templates are typically associated with specific data definitions (e.g., a web content structure, document type, or custom object definition). So, when creating a template, all fields and metadata for the specific data definition are available.

The process for mapping fragments to templates is the same as mapping fragments to individual fields. When you configure the fragment and select its data source, the template appears as an option. If you're using a template to handle most of the presentation, your choice of page fragment should apply the least amount of styling (e.g., the Paragraph fragment). However, if you’re using a template to display a complete web content article, then you can use the Content Display fragment. This fragment has the benefit of integrating with Analytics Cloud by automatically including analytics tags.

Grouping Content for Display

While displaying individual pieces of structured content is fundamental, many pages benefit from showcasing groups of related items. This could be a list of recent blog posts, featured news articles, or products from a specific category. Liferay provides several tools to dynamically group and display content:

• Collections
• Asset Publisher
• Frontend Data Sets

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.

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. 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 generic fragments or using the dedicated Collection Display fragment. 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 Publisher

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.

Frontend Data Sets

Frontend data sets act as virtual containers for aggregating data from multiple sources using headless APIs. This includes data from custom objects, documents, web content, and 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.

Content Display Pages

Display page templates define structures for displaying content at a dedicated URL. When you create or upload content items, Liferay generates a unique friendly URL for accessing it. However, you can only use this URL to view the content if you create one of these templates for displaying it. Display pages are built using the same UI and features as content pages. With these templates, you can establish a consistent visual style for different types of content.

The first step in creating a display page template is to assign a content type to it. Only content items of the assigned type can use the template for rendering their display pages. After you assign the content type, you can design the display page template as you would a regular page. With modular components like fragments and widgets, you can build dynamic layouts that map to content fields and enhance those layouts with additional elements and functionality. Display page templates also include the option to configure settings for search engine optimization (SEO) and Open Graph, giving you additional control over how users can find and interact with display pages.

Display pages are most commonly used in scenarios where a user has requested a full detailed view of an item. For example, a website landing page might contain a list of several article titles, where clicking one of the titles would direct you to a display page that renders the full article. While display page templates control the rendering for individual articles, the landing page might leverage a different feature (e.g., collections).

Headless Content

Liferay DXP also supports headless content delivery through its robust Headless APIs. In a pure Headless CMS, the system manages content but provides no presentation UI; you must build and maintain the entire end-user interface from scratch. Generally, if you need a browser-based UI, you should leverage Liferay’s out-of-the-box UI and page-building tools. When you require more advanced page building elements, you can leverage client extensions to extend Liferay’s OOTB capabilities. However, if you require a non-browser-based UI (e.g., a native mobile app), then you can leverage Liferay’s headless APIs to access your Liferay-managed content from your external application.

Clarity’s Content Display Requirements

Clarity’s success hinges on two key factors: empowering their non-technical content creators and maintaining impeccable brand consistency with maximum efficiency. To achieve these goals, Clarity can strategically leverage a combination of content display options:

• In-Line Content for Simplicity: For static, page-specific elements (e.g., unique section headings), Clarity can leverage in-line content. This enables quick, direct editing within the page builder. This is perfect for elements that don't require reuse.
• Structured Content for Scalability and Consistency: For their core content, Clarity can leverage structured content (e.g., articles, documents, etc.). This approach ensures that information is well-organized and reusable. They can then primarily display this content using templates, fragments, collections, and display pages.

This strategy empowers non-technical users to quickly create content, confident it will be displayed consistently and adhere to Clarity’s brand guidelines.

Conclusion

Liferay DXP provides robust tools for displaying content, from simple in-line edits to sophisticated template-driven and dynamic group displays. By leveraging these features effectively, you can build engaging user experiences.

Next, you’ll learn about strategies for optimizing your site content.