Displaying Collections

Available Liferay Portal 7.4 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 Adding a Collection Display Fragment to a Page for more information.

Follow these steps to add a collection page:

Click the Site Menu ( ) and navigate to Site Builder → Pages.
Click New Page ( ) and select Collection Page.
From the Collections tab, select one of your collections or click Add ( ) to create a new collection.
Select the Master Page you want to use.
Enter the Name of your collection page and click Add.
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,

Create a new page or start editing a content page.
Click Add ( ) to open the Fragments and Widgets panel.
Under the Content Display category in the Fragments tab, drag the Collection Display fragment to a place on the page.
Click on the Collection Display fragment to show the configuration in the Selection panel.
Click the Collection field* to select a collection for the fragment to display in the General section of the panel:

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:

Style Display: Choose the style used to format the assets in the list (e.g., grid or bulleted list styles). (In versions earlier than 7.4 GA23 or U23, this configuration is called List Style.)

Layout: Choose the number of columns in which to display the assets.

Show Gutter: Check the box to show the gutter (spacing) between columns. This option only appears when you choose the Grid style with a column layout (in versions 7.4 GA23+ or U23+).

Vertical Alignment: Choose how to align the items: top, middle, or bottom of each row. This option only appears when you choose the Grid style (in versions 7.4 GA23+ or U23+).

List item style: Choose a style to format each asset. This option applies only to some list styles.

Max number of items: Select 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.

tip

In Liferay 7.4 GA23+ or U23+, if you have chosen the Grid style for a collection display fragment, you can configure the layout setting individually for each type of device. Click the device viewport buttons at the top of the screen to set this setting for each device. The tablet setting defaults to the same as the desktop’s setting, and the portrait and landscape phone settings default to 1 column.

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 chose 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, you can choose a different list style or select a different option under List Item Style.

In the page editor, click the Collection Display representing your collection.
In the tools sidebar, click the Fragments and Widgets ( ) button.
From the Fragments and Widgets sidebar panel, drag and drop the components you want to use to show the collection items.

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 use the same layout settings automatically.
Double-click the Fragment or Widget on the collection display to access its mapping options.
In the Mapping column, select the Field that you want to map to your collection.
Add more fragments or widgets as necessary and map the content to the content fields.
Click Publish.

Paginating Display Items

Available 7.4+

You can paginate the collection items using the pagination configuration. This option provides two important advantages:

It is easier to show collections with a large number of items. Instead of showing all the items in the collection, you can decide how many items to show at once, while allowing users to move back and forward through the list of items in the collection.
Breaking the visible list of items into smaller groups reduces the server overhead, improving the server response time and user experience.

note

In Liferay 7.4 versions earlier than U18 and GA18, fewer pagination options are available. In these versions, you can still enable pagination and choose the maximum number of items to display at once, but you cannot change the number of pages shown in the pagination menu.

To paginate the display items in the collection display,

Click Edit ( ) on the content page with the collection display.
Click Browser ( ) to open the Browser panel.
Under the Elements Browser, select the collection display fragment you want to paginate. The chosen fragment must be configured to display an existing collection.
In the General Settings, choose the pagination options:

Pagination: None (no pagination), Numeric, or Simple (Previous/Next controls).

Display All Pages: Check the box to display the numbers or controls for every page in the pagination menu. If no pagination type is selected, this option becomes Display All Collection Items instead.

Maximum Number of Pages to Display: The maximum number of pages shown in the pagination menu. This option only appears if the Display All Pages checkbox is not selected.

Maximum Number of Items per Page: The maximum number of items from the collection to display per page, if pagination is enabled. If no pagination type is selected, this option becomes Maximum Number of Items to Display instead.

If you enable pagination, the total number of pages available depends on both the total number of items in the collection and the setting for Maximum Number of Items per Page.

note

By default, the collection display fragment displays up to 20 items at a time in edit mode. You can change this limit by navigating to Control Panel → Instance Settings → Pages → Page Editor, and changing the number in the Maximum Number of Items in Edit mode field. Displaying more than 20 items at once in edit mode, may negatively impact performance. This setting does not affect what users see on the page in View mode.

Viewing Collections Usage Throughout the Site

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

Go to Site Administration and navigate to Site Builder → Collections.
Under the Collections tab, click on the Actions ( ) 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.

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.
Open the Add menu and add two Content Management → Asset Publishers to the page stacked vertically.
Click ( ) → Configuration for the top asset publisher.
Under Asset Selection choose Content Set.
Open Select Content Set and click Select.
Click on the Space Program Images content set.
Click Save.

Now the images 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 displayed items and the order in which they appear are determined by the content set.

Now configure the bottom asset publisher with the other content set.

Click ( ) → Configuration for the bottom asset publisher.
Under Asset Selection choose Content Set.
Open Select Content Set and click Select.
Click on the Trending content set.
Click Save.

Again, you can manage various display settings, but the displayed items 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 the management of both static and dynamic content sets, upload a new image, tag it, and add it to the static set manually.

Upload a new image, and under Categorization tag it as trending.
The image is added to the top of the Trending content list.
To add it to the manual set, go back to Site Administration and navigate to Content & Data → Site Builder.
Click on Space Program Images or select → Edit next to Space Program Images.
Next to Asset Entries click Select → Basic Document.
Select the new image and click Add.
Navigate back to the Home page to see your image added to the list.

Content sets provide one place to 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.

Displaying Collections

Not finding what you're looking for?