Creating Page Fragments

Fragments enable you to create rich content. With all of the included Fragments and Collections, many projects can be completed using just what ships with Liferay DXP. Sometimes, though, you must create your own Fragments. Fragments are built using HTML, CSS, and JavaScript. For a deeper dive into creating a custom Fragment, see Developing Fragments.

In this article, you’ll learn about the Page Fragments interface.

Creating and Managing Fragments

To navigate to the Page Fragments interface,

  1. Go to Site Administration. Make sure the Site where you want to work is selected. If you prefer creating a Fragment that’s available for all Sites, navigate to the Global Site and create your Fragment there. Global Fragments are inherited by child Sites, so they can only be edited from the Global Site. Any resources the Global Fragment references (e.g., image) from the Global Site is copied to a Site that leverages the Fragment.

  2. Select Site BuilderPage Fragments

Figure 1: Here is the Page Fragments page with no custom Fragments or Collections created.

Figure 1: Here is the Page Fragments page with no custom Fragments or Collections created.

Fragments are organized in Collections. The main Page Fragments page shows available Collections (out-of-the-box Fragment Collections to start), allows Import and Export, and enables you to create Collections. You can also manage the organization and display of Fragments and Collections you have created.

To create a Fragment, you must first create a Collection.

  1. Click NewCollection to add a Collection.

  2. Give the Collection a Name and Description and click Save.

Collections help you organize Fragments, and can be used to differentiate between different types of Fragments or Fragments used by different groups or departments. Next, create a Fragment inside the Collection you created.

  1. Click on the Collection you created.

  2. Click the Add icon (New) to create a Fragment.

  3. Choose either Section or Component.

  4. Give it a Name and click Save.

The Fragment development environment appears. Each pane in the editor has a different function:

  • The top left pane is for entering HTML.
  • The top right pane is for entering CSS.
  • The bottom left pane is for entering JavaScript.
  • The bottom right pane provides a live preview as you work in the other panes.

Figure 2: The Fragments editor provides an environment for creating all the parts of a Fragment.

Figure 2: The Fragments editor provides an environment for creating all the parts of a Fragment.

In addition to standard HTML, CSS, and JavaScript, developers can also embed widgets and provide fields containing text and images that can be edited during the final Content Page publication process. Fragment development is covered in depth in Developing Fragments.

You can also include resources in your Fragment Collection that your Fragments can reference. This is helpful when exporting/importing Fragments: their resources are automatically included. If they’re stored somewhere else (e.g., Documents and Media), you must export/import them separately. Click the Resources tab for your Collection and add resources (e.g., image, document, etc.) there.

Figure 3: The Resources tab can be selected from the Fragment Collection.

Figure 3: The Resources tab can be selected from the Fragment Collection.

Once added, you can reference resources from your Fragment’s code without worrying about their availability. You can learn more about doing this in Including Default Resources in Fragments.

Next you’ll learn how to import and export Page Fragments.

« Propagation of ChangesExporting and Importing Fragments »
Was this article helpful?
0 out of 0 found this helpful