Liferay DXP, a leader in digital experience platforms, offers a multitude of features for creating engaging, dynamic websites. Among these, Fragment Specific Tags play a pivotal role in enhancing the functionality and design of Liferay sites. This article delves deep into the world of Fragment Specific Tags in Liferay, providing a comprehensive guide for developers and site builders.
What are Fragment Specific Tags in Liferay?
Fragment Specific Tags in Liferay are unique elements that allow developers to create editable sections within a site. These tags make it possible to customize content directly from the page editor without the need to modify the source code. Understanding these tags is crucial for anyone involved in Liferay site development.
Example of a Basic Editable Text Tag:
<div data-lfr-editable-id="text1" data-lfr-editable-type="text">
Your editable text here
</div>Key Benefits of Using Fragment Specific Tags
- Flexibility and Reusability: Fragments with specific tags can be reused across different pages, ensuring consistency and saving development time.
- Enhanced User Experience: These tags allow for real-time content editing, significantly improving the content management process.
- Customization: Developers can tailor the site’s appearance and functionality to meet specific business requirements.
Types of Fragment Specific Tags in Liferay
Liferay supports various fragment-specific tags, each serving different purposes:
- Editable Text Tags: Allows inline editing of text content.
- Editable Image Tags: Facilitates image changes directly from the page editor.
- Editable Background Image Tags: Enables you to add an editable background image which can be used in a slider or div.
- Editable Link Tags: Enables link modifications without accessing the source code.
- Editable HTML Tags: Makes HTML elements editable.
- Adding Widgets in Fragments: Enables you to embed widgets in Fragment.
- Date Fragments: Enables customization and localization of date formats.
- Action-ready Button: Enables you to trigger object actions using button component.
Code Example for an Editable Image:
<img data-lfr-editable-id="image1" data-lfr-editable-type="image" src="default-image.jpg" />Code Example for an Editable Background Image:
<div data-lfr-background-image-id="background-img-unique-id">
<h1 data-lfr-editable-id="header1" data-lfr-editable-type="text">Example Header</h1>
</div>Code Example for an Editable Link:
<a href="#linktopage" data-lfr-editable-id="link1" data-lfr-editable-type="link">
Go to Page
</a>Code Example for an HTML Tag:
<article data-lfr-editable-id="textarticle1" data-lfr-editable-type="html">
<h1>Example Heading</h1>
<p>Example Paragraph</p>
</article>Adding Widgets in Fragments:
<div class="nav-widget">
<lfr-widget-breadcrumb>
</lfr-widget-breadcrumb>
</div>| Widget Name | Tag |
|---|---|
| DDL Display | <lfr-widget-dynamic-data-list> |
| Form | <lfr-widget-form> |
| Asset Publisher | <lfr-widget-asset-list> |
| Breadcrumb | <lfr-widget-breadcrumb> |
| Category Filter | <lfr-widget-categories-nav> |
| Flash | <lfr-widget-flash> |
| Media Gallery | <lfr-widget-media-gallery> |
| Menu Display | <lfr-widget-nav> |
| Polls Display | <lfr-widget-polls> |
| Related Assets | <lfr-widget-related-assets> |
| Site Map | <lfr-widget-site-map> |
| Tag Cloud | <lfr-widget-tag-cloud> |
| Tag Filter | <lfr-widget-tags-nav> |
| Web Content Display | <lfr-widget-web-content> |
| RSS Publisher | <lfr-widget-rss> |
| Iframe | <lfr-widget-iframe> |
Code Example for Date Fragments:
<div data-lfr-editable-type="date-and-time" data-lfr-editable-id="date-time">
26/01/24 01:04 AM
</div>Code Example for Action-ready Button:
<button class="btn btn-${configuration.buttonColor} btn-${configuration.buttonType}" data-lfr-editable-id="action" data-lfr-editable-type="action">
Perform Action
</button>Best Practices for Implementing Fragment Tags
- Unique Identifiers: Ensure each fragment tag has a unique identifier.
- Proper Tag Types: Use the correct tag type for the content you wish to make editable.
- Testing: Regularly test the fragments to ensure they function as expected.
Related Articles on Our Website
Conclusion
Fragment editable tags in Liferay are instrumental in creating flexible, user-friendly websites. By understanding and utilizing these tags, developers and content managers can significantly enhance the interactivity and appeal of Liferay sites.
In this comprehensive guide, we’ve explored the functionalities, benefits, and best practices of Fragment Specific Tags in Liferay, providing you with the knowledge to take your Liferay site to the next level.