Documentation

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 ( Edit Icon ), click the desired fragment, and select one of its sub-elements in the Browser ( Browser Icon ) sidebar menu.

Many fragments include sub-elements with their own configuration options.

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 ( Simple Text Icon )

Rich Text Element ( Rich Text Icon )

Link Element ( Link Icon )

HTML Element ( HTML Icon )

Image Element ( Image Icon )

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 the desired field from the selected item.

Access a sub-element's Mapping settings in the Browser panel of the editing sidebar menu.

Image Source Settings

Configure the image displayed in the selected image element.

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.

Access a sub-element's Image Source settings in the Browser panel of the editing sidebar menu.

Additional Information