Fragment Specific Tags

There are Liferay-specific tags for creating editable, text, image, and link fields, and for embedding widgets.

Making Text Editable

You can make text of a fragment editable by enclosing it in an <lfr-editable> tag like this:

<lfr-editable id="unique-id" type="text">
   This is editable text!
</lfr-editable>

If you need formatting options like text or color styles, use rich-text:

<lfr-editable id="unique-id" type="rich-text">
   This is editable text that I can make bold or italic! 
</lfr-editable>

The lfr-editable tag doesn’t render without a unique id.

Making Images Editable

Images use the same <lfr-editable> tag as text, but with the image type, like this:

<lfr-editable id="unique-id" type="image">
   <img src="...">
</lfr-editable>

After you add the lfr-editable tag with the type image to a Fragment, when you add that Fragment to a page, you can then click on the editable image to select an image or configure content mapping for the image.

Figure 1: You have several options for defining an image on a Content Page.

Figure 1: You have several options for defining an image on a Content Page.

Most images can be handled like this, but to add an editable background image you must add an additional property to set the background image ID, data-lfr-background-image-id. The background image ID is set in the main div for the Fragment and is the same as your editable image ID.

<div data-lfr-background-image-id="unique-id">
   <lfr-editable id="unique-id" type="image">
      <img src="...">
   </lfr-editable>
</div>

Content mapping connects editable fields in your Fragment with fields from an Asset type like Web Content or Blogs. For example, you can map an image field to display a preview image for a Web Content Article. For more information on mapping fields, see Editable Elements.

There is also a specific syntax for creating editable link elements:

<lfr-editable id="unique-id" type="link">
    <a href="default-target-url-goes-here">Link text goes here</a>
</lfr-editable>

Marketers can edit the link text, target URL, and basic link styling—primary button, secondary button, link.

Figure 2: You have several options for defining a links appearance and behavior.

Figure 2: You have several options for defining a link's appearance and behavior.

For more information on editable links, see Editable Links.

Including Widgets Within A Fragment

To include a widget, you must know its registered name. For example, the Site Navigation Menu portlet is registered as nav. Each registered portlet has an lfr-widget-[name] tag that’s used to embed it. For example: the Navigation Menu tag is <lfr-widget-nav />. You could embed it in a block like this:

<div class="nav-widget">
    <lfr-widget-nav>
    </lfr-widget-nav>
</div>

These are the widgets that can be embedded and their accompanying tags:

Widget NameTag
DDL Display<lfr-widget-dynamic-data-list>
Form<lfr-widget-form>
Asset Publisher<lfr-widget-asset-list>
Breadcrumb<lfr-widget-breadcrumb>
Categories Navigation<lfr-widget-categories-nav>
Flash<lfr-widget-flash>
Media Gallery<lfr-widget-media-gallery>
Navigation Menu<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>
Tags Navigation<lfr-widget-tags-nav>

Enabling Embedding for Your Widget

If you have a custom widget that you want to embed in a fragment, you can configure that widget to be embeddable. To embed your widget, it must be an OSGi Component. Inside the @Component annotation for the portlet class you want to embed, add this property:

com.liferay.fragment.entry.processor.portlet.alias=app-name

When you deploy your widget, it’s available to add. The name you specify in the property must be appended to the lfr-widget tag like this:

<lfr-widget-app-name>
</lfr-widget-app-name>
Was this article helpful?
0 out of 0 found this helpful