In this blog post I will show you how to create attractive Liferay pages from dynamic content. We’ll create these pages from Web Content Articles using Liferay 6.2, Web Content Structures, Templates, Application Display Templates, and the Asset Publisher portlet. This is a flexible and powerful method to display Web Content with out-of-the-box Liferay 6.2 components.


We are creating a site for Craftsman Bungalow Enthusiasts.  The site will allow an admin to create Web Content Articles showcasing bungalow homes. The requirements are:

  1. The articles must be very easy to add, using Web Content. 
  2. The articles must must allow the user to add certain custom fields.
  3. The articles must be tag-based to allow easy categorization.
  4. The content must be easily manageable by a content editor.


What this blog covers

In this blog, I will cover the basics of the the following Liferay 6.2 components:

  1. Structures
  2. Templates
  3. Application Display Templates
  4. Asset Publisher Portlet

You’ll find a zip file containing the source code for the structures and templates at the bottom of this page.

Implementation Steps

Step 1: Define the Structure

The articles must have the following fields, defined in a new structure called bungalow:

  1. Main Image (Image field)
  2. Image Attribution (Text field)
  3. Neighborhood (Select field)
  4. Year Built (Int field)
  5. Body (HTML field)

Note: by default, a Basic Web Content Article has only a Title and a Body, so we need to add these fields explicitly to the structure.

Step 2: Create a new Structure

Liferay always creates Global site.  This is a good place to define the structures and templates so they are accessible and re-usable in any site you create.  To create the new structure, go to Control Panel ->Sites ->Global ->Manage ->Structures.bungalowStructuresAndTemplates
Create a new Structure by clicking +Add at the top.  Add new fields by dragging the desired type to the right content pane.  Each field has a configuration option to customize the name, whether it’s required, options for select boxes, etc. 

Once you have added all the fields defined in the requirements, save the structure.  

Step 3: Create a new Template

Go to Control Panel ->Sites ->Global ->Manage ->Templates. Create a new Template by clicking +Add at the top. Give it a name of Bungalow.  Select Freemarker as the language and choose Bungalow as the structure.  In the script section, add all the custom fields you added to the structure by clicking each one.  You will see them being added to the script text area. Save your template.

Step 4: Add Content

We need to store the actual content in the site where they are displayed.  Create a new site called Bungalows, then go to Control Panel ->Sites ->Bungalows ->Content ->Web Content ->Add ->Bungalow.  Fill in the fields and create at least 4-6 pieces of Web Content.bungalowWebContent

Step 5: Create Page Display Templates

Go to Control Panel->Sites->Global->Configuration->Application Display Templates->Add->Asset Publisher Template. This is very similar to the Web Content Template you created in Step 3.  See the video and attached source code for more details.

Step 6: Configure the Asset Publisher Portlet

Create a new page and then add the Asset Publisher portlet to the page. Click Configure and follow the steps outlined  in the video.

Get the Supporting Files

Download the zipped up source files for the Structure, Template and two Application Display Templates.


Share This