Displaying Content on Pages

Effective page design often depends on choosing the right content display strategy. The flexibility of Liferay fragments provides two primary options: adding content directly to the fragment, or mapping the fragment to existing content. To use Liferay’s design system effectively, it’s necessary to understand the benefits and challenges of each approach.

Defining Fragment Content

Building on the previous lesson, fragments are versatile building blocks for site page design. You can reuse them, configuring each instance's appearance and content. When setting a fragment’s content, you have two primary options:

• Embedding the content directly in the fragment.
• Mapping the fragment to an existing content item.

Directly embedding content within a fragment involves modifying its individual sub-elements, each designed to handle specific content types: plain text, rich text, links, HTML, or images. This method is best suited for rendering one-off, visually rich sections in web pages, such as headers, banners, and calls-to-action.

Alternately, you can map fragment sub-elements to existing content items in Liferay’s content management system (CMS). The CMS governs several platform features and services, including structured web content, documents and media, blogs, products, categories, and more. By mapping content with fragments, you take full advantage of the controlled publication workflows enforced by the CMS. Structured web content, in particular, emphasizes consistency with a template-driven approach, making it ideal for content authors and managers producing written material.

You can map a given item of content to any number of fragments across multiple pages; it may be rendered differently on each page depending on the specific components used. Any updates to the content item propagate globally to every fragment to which it is mapped. Mapping is best suited for elements displaying content that requires frequent updates, review, and reuse in multiple locations on a site.

A well-designed web solution can leverage both embedded and mapped content with fragments.

Configuring Content for Display

When configuring mapped content for a fragment, you can define which sub-elements are editable inline when you place the fragment in a page, and which sub-elements are immutable and remain constant for every instance of the fragment. This minimizes duplicated effort while maintaining flexibility in mapping content from different sources. Even with the mapping approach, you do not restrict fragments to a single item or type of content.

For both embedded and mapped content, you may need additional business logic to determine how the fragment should display the content. For these cases, fragments support the usage of FreeMarker templating syntax for rendering content. Liferay recommends this approach only as a last resort. Instead, consider implementing any required business logic in a web content template to reduce maintenance overhead and performance issues. You’ll learn more about templating content in Module 5.

As an additional layer of flexibility, fragments also support custom configuration. In many cases, you may require a variant of a given fragment with slightly different styling or behavior. Rather than creating a new fragment, you can instead configure the existing fragment directly when you place it in the page builder UI. This makes designing pages with fragments more accessible for non-technical users, who no longer need to rely on developers to implement new versions from scratch. See the fragment configuration documentation to learn more.

Conclusion

As the fundamental building block of Liferay pages, fragments can render both embedded and mapped content. This flexibility enables Clarity’s designers, developers, and content managers to collaborate on the implementation of page components, achieving granular customization without sacrificing structure and governance.

Next, you’ll improve Clarity’s Contact Us page by creating and configuring a new fragment.