Introduction
Liferay has traditionally relied on the Asset Publisher for dynamically displaying web content, but it comes with several limitations, particularly when backend integrations or additional customizations are required. Fortunately, Liferay’s Collection Provider offers a more flexible and efficient alternative for fetching and rendering web content without depending on the Asset Publisher.
In this blog, we’ll explore how to leverage Collection Providers to dynamically display web content in Liferay, leading to enhanced performance, greater customization options, and improved maintainability.
Prerequisites
Liferay 7.4
Collection Provider
A Collection Provider in Liferay allows you to create dynamic content collections without requiring backend logic. It acts as a source of data, filtering and retrieving relevant content based on predefined conditions.
Advantages of Collection Providers:
- Faster and More Efficient
- No Need for Backend Code
- Flexible Filtering and Sorting
- Supports Display Page Templates
- Easy to Manage via UI
Steps to Render Web Content Using Collection Provider
Step 1 : Create a web content structure and template
- Navigate to Content & Data > Web Content in Liferay.
- Create a structured web content (e.g., Cards, Blogs, Events).
- Create a custom fragment using FreeMarker (FTL) to control the layout and presentation of web content dynamically.
<div class="card" style="width: 18rem;">
<img decoding="async" data-lfr-editable-id="card-image" data-lfr-editable-type="image" class="card-img-top" src="" alt="Card image cap" title="| No More Asset Publisher : Render Web Content with Collection Providers">
<div class="card-body">
<h5 data-lfr-editable-id="card-title" data-lfr-editable-type="text" class="card-title">Card title</h5>
<p data-lfr-editable-id="card-desc" data-lfr-editable-type="text" class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a data-lfr-editable-id="card-link" data-lfr-editable-type="link" href="#" class="btn btn-primary">Read More</a>
</div>
</div>
Note: Do not forget to keep all the fields editable then only we can map web content data to fragment’s fields.
Step 2 : Create a collection in Liferay
- Go to Site Menu > Collections.
- Click Add and select Dynamic Collection.
- Create a collection with a created card structure.
- Define filters based on web content attributes (e.g., category, tag, content type) if needed.
- Save the collection.
Step 3 : Display the collection on a page
- Navigate to Site Builder > Pages.
- Edit or create a new page.
- Drag and drop the Collection Display onto the page.
- Select the created Collection.
- Create web content to show data on the page.
- Drag and drop the created card fragment inside any of the blocks created by Liferay. It will develop replicas based on the number of web content we have created.
- Map the values from web content to fragments.
- Choose a Display Page Template if required.
- Publish the page.
Note : Whenever we add web content using card structure it will dynamically be reflected on the page. But if we create the manual collection then we have to select the web content manually.
Conclusion
Liferay’s Collection Provider offers a modern and efficient way to display dynamic web content without the limitations of the Asset Publisher. By leveraging Collection Providers, you can create structured content, apply dynamic filtering, and manage content easily through the UI—all without needing backend code. This approach enhances performance, improves maintainability, and provides greater customization options for your Liferay-based web applications. Try implementing it in your Liferay project to experience the benefits firsthand!
