Creating Web Content Structure & Template – Liferay 6.2

Web contents are a great feature, which is useful to create content easily on our Liferay portal. By using the Liferay web content structure and template, we can make our web content creation process a lot easier and simple.

The Liferay structure and template are helpful when the web content is created multiple times, with the same type of content architecture.

In this article, we will learn to create a Liferay web content structure. We will then create a web content template to associate the web structure together.

Version details: Liferay 6.2

Create a liferay web content structure

To create a web content structure, log in with admin credentials, navigate to Admin > Content > Web Content > Manage > Structures and click on Add button.

In the structure configuration window, as shown below. Enter a structure name on the Name field.

structure1

Now, select the field components from the available structure fields, as shown below.

We have different fields available that we can include in our web content structure. In this example, we have added a text field, an image field, and a text box field, as shown below. Click on the Save button to save the created web content structure.

structure2

Create a template to put the structure fields together

Once we create the web content structure, we have to put all the structure fields together to make meaningful content. We can do this with the help of a web content template. Liferay supports Freemarker(FTL), Velocity(VM), and Extensible Style Sheet Language (XSL) template languages.

To create a web content template, navigate to Manage > Templates and click on Add button. Enter the Name field, select the structure, and the template language in the template configuration window.

template1

Add the fields by clicking on the left side of the scripts field and click on the Save button. Here, since we have not modified the field names, Liferay has given some random field names. We can add any styling and html components to make our content look rich on the script field.

<h2>${Text1767.getData()}</h2>
<img alt="Image" src="${Image2034.getData()}" />
${Text_Box2282.getData()}

Create web content using above created structure

Finally, create web content and change the default structure with the one we have created. The associated template will be automatically selected. Fill in the fields, and click on save.

wc1

Finally, our web content is ready with a predefined template.

wc2

Conclusion

In this article, we learned how to create and use Liferay web content templates and structures.