Layout Templates specify how content is arranged on your site pages in Liferay DXP. For example, take a look at the 1-2-1 Columns Layout CE layout shown below:
Liferay DXP 7.0 and DXP provide several layout templates out-of-the-box for you to
choose from. You can change the layout for your page, and view the installed
layout templates, by opening the
Edit menu for your page, under the
heading of the
Product Menu and scrolling down to the Layouts heading.
If you’d like to create your own custom layout templates, you’ve come to the right place.
This tutorial demonstrates how to:
Create a Layout Template with the Layouts Sub-generator
Create a Thumbnail for a Layout Template
In order to create a layout template with the Layouts Sub-generator, you will need the Node.js build tools installed. The Liferay Theme Generator tutorial explains how to install these tools and how to create a theme.
Once you have the Liferay Theme Generator installed you can go ahead and get started.
Creating a Layout Template with the Layouts Sub-generator
Follow these steps to create a layout template:
Open the Command Line and navigate to the directory you want to create your layout template in.
yo liferay-theme:layoutto start the layouts sub-generator.
Note: If you run the layout sub-generator from the root directory of a theme created with the themes generator, it will add the layout template as a part of the theme in the
Enter a name and ID for your layout template, or press Enter to accept the default values.
Choose your Liferay version and press Enter to continue.
At this point the layout template design process begins. As the generator states, Layout templates implement Bootstrap’s grid system. Every row consists of 12 sections, so columns range in size from 1 to 12. The sub-generator is user-friendly, allowing you to add and remove rows and columns as you design.
Enter the number of columns you would like for
Once you’ve entered a value, the generator asks how wide you want your row and column to be, and presents you with the available width(s).
Choose from the available option(s) with your arrow keys and press Enter to make your selection.
If you have remaining space, the generator will repeat this step for the remaining columns.
Once you’re done configuring your row, you are presented with a few options:
Add a row: Adds a row below the last row.
Insert row: Displays a vi to insert your row. Use your arrow keys to choose where to insert your row, highlighted in blue, then press Enter to insert the row.
- Remove row: Displays a vi to remove your row. Use your arrow keys to select the row you want to remove, highlighted in red, then press Enter to remove the row.
Once you are done designing your layout you can move onto the next step.
Select Finish layout to complete your layout’s design.
Your layout template files are generated for you in the current directory.
Enter the path to your app server directory, or press Enter to accept the default.
Enter the URL to your server or press Enter to accept the default
Your layout template is generated, but you still need to include it in your
Add your custom layout template to your
<layout-templates>tag. Below is an example configuration for the Porygon theme‘s’ layout templates:
... /layouttpl/custom/porygon_70_30_width_limited.tpl /layouttpl/custom/porygon_70_30_width_limited.png /layouttpl/custom/porygon_50_50_width_limited.tpl /layouttpl/custom/porygon_50_50_width_limited.png
The `<layout-template>` tag's `id` attribute must match the ID you gave in step 3 (the TPL file name).
When your layout template was generated, a default thumbnail was created. You can learn how to create a custom thumbnail in the next section.
Creating a Custom Thumbnail for Your Layout Template
To create your own thumbnail follow the steps below:
Navigate to the
docrootdirectory of the layout template you just created.
Note: if you created the layout template in your existing themes generator theme, the thumbnail is located in your theme’s
layout-name.pngfile with your own custom thumbnail PNG.
navigate back to the layout’s root directory and run
gulp deployto re-build and deploy the template to your app server.
Note: If your layout template was added as part of your themes generator theme, the layout template will deploy when the theme is deployed.
Specify the thumbnail’s location in your
<thumbnail-path>tag. Below is an example configuration for the Porygon theme:
<layout-template id="porygon_50_50_width_limited" name="Porygon 2 Columns (50/50) width limited"> <template-path> /layoutttpl/custom/porygon_50_50_width_limited.tpl </template-path> <thumbnail-path> /layoutttpl/custom/porygon_50_50_width_limited.png </thumbnail-path> </layout-template>
Your layout template is complete! As you can see, the layouts sub-generator makes creating a layout template a piece of cake.
Edit a page on your site and select your new layout template to use it.
Importing Resources with Your Themes