Fragment Sub-Elements Reference
In addition to General and Style settings, many fragments include sub-elements with their own configuration options. To access these options, begin editing a page or template (
), click the desired fragment, and select one of its sub-elements in the Browser (
) sidebar menu.
Available options depend on the sub-element’s type and are organized into tabs: Mapping, Image Source, and Link.
| Sub-Element Type | Mapping Tab | Image Source Tab | Link Tab |
|---|---|---|---|
Simple Text Element ( ) | ✅ | ❌ | ✅ |
Rich Text Element ( ) | ✅ | ❌ | ❌ |
Link Element ( ) | ✅ | ❌ | ✅ |
HTML Element ( ) | ✅ | ❌ | ❌ |
Image Element ( ) | ❌ | ✅ | ✅ |
Mapping Settings
Map the selected element to a field in an existing asset.
| Field | Description |
|---|---|
| Item | Select an asset from Documents and Media, Web Content, Blogs, or Categories. The selected asset provides fields for mapping. |
| Field | Map the element to supported fields from the selected item. |
Supported fields include: Text, Select from List, Single Selection, Multiple Selection, Date, Date and Time, Numeric, Boolean, Link to Page, and Rich Text.
Image Source Settings
Configure the image displayed in the selected image element.
Fragments cannot display images stored on Content Delivery Network (CDN) hosts. Do not reference images served through CDN hosts in your fragments.
| Field | Description |
|---|---|
| Source Selection | Select whether the image element uses Direct or Mapping for its source. When using Direct, you can select an image from Documents and Media or enter an image URL. When using Mapping, you can select an asset from Documents and Media, Web Content, Blogs, or Categories, and then map the image element to a field from the selected asset. |
| Image (for Direct) | Select the desired image from the Document Library or enter an image URL. |
| Resolution (for Direct) | Select a resolution for the image. By default, Liferay includes the following options: Auto, Thumbnail (300px), or Preview (1000px). However, you can use Adaptive Media to generate alternative resolutions. |
| Image Description (for Direct) | Enter a localizable image description. To set a description for other languages, first switch the language for the page or template via the editing bar. Then, enter the desired text. See Localizing Fragment Configuration Fields for more information. |
| Item (for Mapping) | Select an asset from Documents and Media, Web Content, Blogs, or Categories. The selected asset provides fields for mapping. |
| Field (for Mapping) | Map the image element to the desired field from the selected item. |
| Enable Lazy Loading | Enable lazy loading to render the image only when needed. While enabled, off-screen images are not loaded during the page’s initial rendering. This can shorten the critical rendering path and improve page load times. By default, lazy loading is disabled. |
Using the Direct option for Source Selection stores the image URL in the fragment’s editable values, which may break if the site’s friendly URL changes.
To avoid this, use the Mapping option, select the item from Documents and Media, and choose File URL as the field. This ensures the image URL is not stored in the editable values and stays functional if the site’s friendly URL changes.
Link Settings
Set a URL, page reference, or asset mapping to add a clickable link to the selected element.
| Field | Description |
|---|---|
| Link | Determine whether the field uses a URL, Page, or Mapped URL. |
| URL (for URL) | Enter a localizable URL for the element. To set a URL for other languages, first switch the language for the page or template via the editing bar. Then, enter the desired URL. See Localizing Fragment Configuration Fields for more information. |
| Page (for Page) | Select a Liferay page for the element. |
| Item (for Mapped URL) | Select an asset from Documents and Media, Web Content, Blogs, or Categories. The selected asset provides fields for mapping. |
| Field (for Mapped URL) | Map the element to an available supported URL field from the item. Selecting a valid field automatically populates the URL field. |
| URL (for Mapped URL) | This field is autopopulated by the mapped URL field. |
| Open in New Tab | Determine whether clicking the link opens a new tab. |
You can map the following elements to fields (for Mapped URL): Text, Select from List, Single Selection, Multiple Selection, Numeric, Rich Text, and Link to Page.
