There are Liferay-specific tags for creating editable, text, image, and link fields, and for embedding widgets.
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
<lfr-editable id="unique-id" type="rich-text"> This is editable text that I can make bold or italic! </lfr-editable>
lfr-editable tag doesn’t render without a unique
Images use the same
<lfr-editable> tag as text, but with the
<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.
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
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.
For more information on editable links, see Editable Links.
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:
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:
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: