Displaying Categories using Display Pages

Available: Liferay DXP/Portal 7.4+.

Using a Display Page Template, you can render Web Content, Documents, and Blog Entries in a Display Page. Starting with Liferay DXP 7.4, you can also render Categories on a Display Page. This can be useful if you want to showcase multiple products or services that you organize using Categories. Because Display Pages are ideal for showing a catalog of elements in a consistent way, you can use Category-based Display Pages to provide users a consistent experience when browsing your products or services catalog.

Displaying Categories in Display Pages

You render Categories in a Display Page in the same way you render other types of Display Page content. There are two options:

• Create a Display Page Template for Categories and set this template as the default one.
• Select the Display Page Template of your choice when you create or edit the Category.

You can also assign a Display Page Template to multiple Categories at once. Under Site Administration → Categorization → Categories, check the Categories you want to update and then click the Page () icon or, from the top Actions () menu, select Assign Display Page Template.

Example: Using Category-Based Navigation on a Display Page

This step-by-step example shows you how to use Categories in combination with a Display Page Template to display the services of a fictional insurance company.

These are the steps to display your Categories on a Display Page:

1. Create and edit the Categories you want to display.
2. Create the Display Page Template.
3. Edit and publish the Display Page Template.

warning

The following example shows how to modify a default Display Page Template. To avoid disruptions in your production Site, complete this procedure on a test Site.

Step 1: Creating and Editing the Categories

Create the Categories if they do not exist yet, and include the information you want to map on the Display Page. This example creates two new Categories with a description and a picture, each Category corresponding to a different service.

1. Create a new Category named Car Insurance.

2. In the Categories application, click the Actions () menu for your new category and select Edit.

3. Click the Details tab and add a Description of this Category.

   

4. Click the Images tab and add an image for the Category using the Add Image () button.

5. Click again on the Details tab and then click Save.

Step 2: Creating the Display Page Template

Starting with Liferay DXP 7.4, the Display Page Template includes an option to use Categories as the Content Type.

1. Open the Product Menu → Design → Page Templates.

2. Click Display Page Templates and click the Add () button.

3. Select the Master Page Template you want to use for this Display Page Template.

   tip

   Every Page or Page Template requires a Master Page Template. To learn more, read Master Page Templates.

4. Enter the Name of your Display Page Template and in the Content Type drop-down menu, select Category.

   

5. Click Save.

Step 3: Edit and publish the Display Page Template

After you create the Display Page Template, you can edit the components mappings and layout.

tip

The Display Page Template editor works like the Content Page Editor. See Adding Elements to Content Pages for more information.

This example shows how to map the Category fields using a Card Fragment.

1. Drag and drop a Container Fragment to the default drop zone.

2. On top of the Container Fragment, drag and drop a new Card Fragment.

3. Click on the Browser ()button and then click the Card’s title to open the Mapping options.

4. In the Mapping tab, click the Source drop-down menu and select Category

5. Click the Field drop-down menu and select Name to map your Category’s name to the Card’s title.

   

6. Repeat the same mapping process for the Card description and Card image. This list summarizes the Card Fragment to Category Field mappings in the example:

   • Title → Name
   • Content → Description
   • Image → Main Image

7. Click Publish.

8. Under the Display Page Templates list, click the Actions () menu for the new Display Page Template and choose Mark as Default.

   

9. In the Product Menu (), go to Categorization → Categories and select the Vocabulary with the Categories from Step 1.

10. On any Category, click the Actions () menu and select View Display Page.

    

The Display Page uses your Display Page Template mappings to show the Category fields. The Display Page URL is unique for the selected Category.

Related Information

• Creating and Managing Display Page Templates
• Publishing Content With Display Pages
• Defining Categories and Vocabularies for Content.

Not finding what you're looking for?

Pardon our dust as we revamp and transition our product documentation to this site. If something seems missing, please check Liferay Help Center documentation for Liferay DXP 7.2 and previous versions.

Try Liferay's Help Center