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.
Requirements
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:
- The articles must be very easy to add, using Web Content.
- The articles must must allow the user to add certain custom fields.
- The articles must be tag-based to allow easy categorization.
- The content must be easily manageable by a content editor.
Video
https://www.youtube.com/watch?v=qlTjO3piP2I&feature=youtu.be
What this blog covers
In this blog, I will cover the basics of the the following Liferay 6.2 components:
- Structures
- Templates
- Application Display Templates
- 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:
- Main Image (Image field)
- Image Attribution (Text field)
- Neighborhood (Select field)
- Year Built (Int field)
- 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.
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.
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.
