Anatomy of a Layout Template Project

Let’s look at the directory structure of a layout template project and learn about its various files:

columns-1-4-1-layouttpl/

docroot/

WEB-INF/

liferay-layout-templates.properties

liferay-plugin-package.properties

columns_1_4_1.png

columns_1_4_1.tpl

columns_1_4_1.wap.tpl

build.xml

Navigate to your Plugins SDK’s layouttpl/ folder and you’ll see that the Plugins SDK automatically appended -layouttpl to your project’s name. A layout template project can contain multiple layout templates. The directory structure is the same, but you’ll have a .png, .tpl, and .wap.tpl file for each layout template in the docroot/ folder. The liferay-* files describe the layout templates for packaging and deployment.

Now that you’re well-versed on the anatomy of a layout template, let’s explore the layout template files.

[project-name].png: Thumbnail representation of the template that you see in Liferay Portal from the Page Layout screen. You’ll have to create the thumbnail image, but you can use the default PNG for layout templates as a starting point.