Documentation

Displaying Collections

Availability: Liferay Portal 7.3 GA6, DXP 7.3 GA1+

You can display a Collection by adding a Collection Page, or a Collection Display Fragment. For more information about these display options, see About Collections and Collection Pages.

By default, any User can see a Collection’s content. However, you can create Personalized Variations of these items using Segments. For more information, see Customizing Collections Using Segments.

Note

Before displaying a Collection, you must create one. For more information, see Creating Collections.

Displaying Collections on a Page

The two easiest ways to display a Collection are to add a Collection Page, or to add a Collection Display Fragment to an existing page.

Displaying Collections on a Collection Page

A Collection Page links a page to a Collection. Collection Pages include Collection Display Fragments as part of the page. See this section to add a Collection Display Fragment to an existing page instead.

Follow these steps to add a Collection Page:

  1. Go to Site AdministrationSite BuilderPages.

  2. Click the New Page button (New Page) at the level where you want to add the new page, and select Add Collection Page.

    Create a new Collection Page from the Pages Administration.

  3. From the Collections tab, select one of your Collections.

  4. Select the Master Page you want to use.

  5. Enter the Name of your Collection Page and click Add.

  6. To show the Collection, map its content to page elements. See the Mapping Components section for more information.

Important

You cannot create a child page under a Collection Page.

You now have a Collection Page displaying your chosen Collection, within a Collection Display Fragment.

Adding a Collection Display Fragment to a Page

A Collection Display fragment shows a Collection in a Content Page. It can be configured to display a chosen Collection in any desired style or layout.

Use a Collection Display fragment to display a Collection in the desired format.

To add an existing Collection to a Collection Display Fragment:

  1. Click the Edit icon (Edit icon) on a Content Page.

  2. Click the icon (Add widget icon) to open the Fragments and Widgets panel.

  3. Under the Content Display category in the Fragments menu, drag the Collection Display fragment to a place on the page.

  4. Click on the Collection Display fragment to show the configuration in the Selection panel.

  5. Click the button to select a Collection for the fragment to display in the General section of the panel:

    Click the button to select a Collection for the Collection Display fragment.

The Collection Display fragment is now on the page and displaying the selected Collection.

Configuring a Collection Display Fragment

Whether you added a Collection Display Fragment manually or via a Collection Page, you can configure it by editing the page and selecting the fragment.

Selecting a Collection Display Fragment divides it into sections for each asset in the Collection. New options appear under the fragment’s General configuration after you’ve selected a Collection:

  • List style: the style used to format the assets in the list (e.g., Grid or Bulleted List styles)

  • Layout: the number of columns the assets appear in

  • List item style: the style used to format each individual asset. This option may not appear depending on the chosen List style.

  • Max number of items: the maximum number of assets the fragment can display at a time

Click on a Collection Display fragment with a configured Collection to reveal more configuration options.

Publish the page when you’re ready for the assets in the Collection to be displayed as configured.

Mapping Components to Display a Collection’s Assets

You can also configure the item style (how each asset is individually displayed) in the fragment by mapping display components to them.

Map these elements to the assets in the Collection Display Fragment by dragging them into the cells of the fragment.

Note

Depending on the option you have chosen for a Collection Display Fragment’s List style, you may not be able to drag components into the fragment. If you cannot drag components into the fragment, then you can only configure the style to display the assets by selecting a different option under List item style, unless you choose a different List style.

  1. In the Page Editor, click the Collection Display representing your Collection.

  2. In the tools sidebar, click the Fragments and Widgets (Fragment and Widgets) button.

  3. From the Fragments and Widgets sidebar panel, drag and drop the components you want to use to show the Collection items.

    Add fragments or widgets to the Collection Display and configure the display properties.

    Note

    If the Collection Display contains more than one item, you can drag the Fragment or Widget to any of them. The rest of the items in your Collection automatically use the same layout settings.

  4. Click the Fragment or Widget on the Collection Display.

  5. Click again to access the mapping options.

  6. In the Mapping column, select the Field that you want to map to your Collection.

    Map the fragments and widgets to the Collection items

  7. Add more Fragments or Widgets as necessary and map the content to the content Fields.

    Add Fragments and Widgets to the Collection Display and map the content fields.

  8. Click Publish.

Viewing Collections Usage Throughout the Site

You can find usage statistics for the Collections on your site.

  1. Go to Site AdministrationSite BuilderCollections.

  2. Under the Collections tab, click on the Actions (Actions Menu) menu next to the Collection you want to review and select View Usages.

Select View Usages to understand how your Collections are being used through the Site

Liferay DXP 7.2

Displaying Content Sets

Content Sets are primarily displayed through the Asset Publisher. It is currently the only method to display them out of the box, but you can develop your own external applications or widgets to utilize Content Sets. In Creating Content Sets you created two Content Sets. Now display them on a page.

Configuring the Asset Publisher for Content Sets

To display the Content Sets, start with a blank page, and then add the necessary Asset Publishers and configure them to display the Content Sets.

  1. Create a new Home page for your site as a Widget Page with a 1 column layout. If you’re using a fresh Liferay DXP bundle, you can just remove the Hello World widget from the sample Home page.

  2. Open the Add menu and add two Content ManagementAsset Publishers to the page stacked vertically.

  3. Click OptionsConfiguration for the top Asset Publisher.

  4. Under Asset Selection choose Content Set.

    The Asset Publisher has a number of options available for selecting its source for content.

  5. Open Select Content Set and click Select.

  6. Click on the Space Program Images Content Set.

  7. Click Save.

Now the images will appear at the top of the page. You can manage the way the content is displayed—like what metadata appears—or even create a Widget Template to style the content, but the items which display and the order in which they appear are determined by the Content Set.

Now configure the bottom Asset Publisher with the other Content Set.

  1. Click OptionsConfiguration for the bottom Asset Publisher.

  2. Under Asset Selection choose Content Set.

  3. Open Select Content Set and click Select.

  4. Click on the Trending Content Set.

    Select the Content Set you want to use.

  5. Click Save.

Again, you can manage various display settings, but the items which appear and their order are determined by the Content Set criteria.

You can see the results as the standard Asset Publisher output. You can create Widget Templates to add more style and pizzazz here.

Adding Items to an existing Content Set

To demonstrate both the management of both static and dynamic Content Sets, upload a new image, tag it, and add it to the static set manually.

  1. Upload a new image, and under Categorization tag it as trending.

  2. Without lifting another finger, the image is added to the top of the Trending Content List.

    The result is dynamically added to the Content List wherever it is displayed.

  3. To add it to the manual set, go back to Site AdministrationContent & DataSite Builder.

  4. Click on Space Program Images or select OptionsEdit next to Space Program Images.

  5. Next to Asset Entries click SelectBasic Document.

  6. Select the new image and click Add.

  7. Navigate back to the Home page to see your image added to the list.

Content Sets are a powerful feature which provide one place to easily define content and other assets to be displayed all over your site. Their reusability also means less repeated work involved in getting great content delivered to your users.