How to create custom Layout Templates in liferay

How to Creating Liferay Layout Templates in Liferay

By now, you’ve likely added portlets to a page by dragging them from the Add menu and dropping them into place. Are there times, though, when you find yourself limited by Liferay’s page layout options? Maybe your Feng Shui (pronounced fung SHWAY) senses are picking up on some negative energy? Or perhaps you find yourself adding the same portlets over and over again onto the same types of pages? Don’t despair! Break the monotony by creating your own custom layout templates. Layout template plugins let you design layouts that flow nicely, embed commonly used portlets, and apply CSS, Velocity, and HTML to make your pages visually pop.

Let’s create a custom layout template!

Creating a Layout Template 

With the Plugins SDK, you can deploy layout templates as plugins, and creating layout templates with Liferay Developer Studio is easier than ever. Let’s create a layout template called Columns 1 4 1.

Using Developer Studio:

1. Go to File → New → Liferay Plugin Project.
2. Enter columns-1-4-1 for the Project name and Columns 1 4 1 for the Display name.
3. Choose whichever build type you prefer (Ant or Maven) and select the appropriate Plugins SDK and Liferay runtime.
4. Select Layout Template as your plugin type.
5. Click Finish.
6. 

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/
    • META-INF/
    • WEB-INF/
      • liferay-layout-templates.xml
      • liferay-plugin-package.properties
    • columns_1_2_1.png
    • columns_1_2_1.tpl
    • columns_1_2_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 thedocroot/ 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.

Layout Template Files

One or more layout template plugins can reside in a layout template project. Let’s see what each template file does:

• [project-name].tpl: Generates the HTML structure of the template.
• [project-name].wap.tpl: Variant template for mobile devices. WAP stands for wireless application protocol.
• [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.

Figure 11.10: This is an example of a default layout template thumbnail.

Let’s move on to Liferay configuration files.

Liferay Configuration Files

In addition to the three template-specific files, a layout template project has two Liferay configuration files:

• liferay-layout-templates.xml: Specifies the name of the layout templates and the location of their TPL and PNG files.
• liferay-plugin-package.properties: Describes the plugin project to Liferay’s hot deployer.

Now that you’re familiar with the layout template’s files and directory structure, let’s deploy a layout template on the server.

Deploying Layout Templates

If you’ve ever deployed a theme or portlet, you already know how to deploy layout templates! Use Developer Studio or the terminal to deploy your layout templates:

• Deploying in Developer Studio: Drag your layout template project onto your server.
• Deploying in the terminal: If you’re using Ant, execute the following command From your layout template project directory:

  ant deploy
  

  If you’re using Maven, please refer to this guide’s section on deploying Liferay plugins with Maven.

When deploying your plugin, the server displays messages indicating that your plugin was read, registered, and is now available for use.

Example server output:

Reading plugin package for columns-1-2-1-layouttpl
Registering layout templates for columns-1-2-1-layouttpl
1 layout template for columns-1-2-1-layouttpl is available for use

Wait a minute! We can deploy the template, but we still haven’t designed it. We’ll need to add content to the TPL files that were generated when we created our layout template.

Designing a Layout Template

Initially, the layout template’s generated TPL files are empty, a fresh canvas on which you can design layout templates. If this seems overwhelming, don’t worry. We’ll build a new layout template and explain how it works. If you want to see more examples, check out the Page Layouts section of Liferay Marketplace, download some CE layout templates provided by Liferay, and examine the source. You also can examine Liferay’s core layout templates. These can be found in Liferay’s source in the liferay-portal/portal-web/docroot/layouttpl/custom/ folder.

Let’s describe the layout template that we’re about to create. We named it Columns 1 4 1 because we want the first row to have just one column, the second row to have 4 (equal width) columns, and the third row to have just one column. Liferay provides a similar layout template called 1-2-1 Columns Layout CE on Liferay Marketplace. Here’s the source of the 1-2-1 Columns Layout template:

<div class="columns-1-2-1" id="main-content" role="main">
        <div class="portlet-layout row-fluid">
                <div class="portlet-column portlet-column-only span12" id="column-1">
                        $processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")
                </div>
        </div>

        <div class="portlet-layout row-fluid">
                <div class="portlet-column portlet-column-first span4" id="column-2">
                        $processor.processColumn("column-2", "portlet-column-content portlet-column-content-first")
                </div>

                <div class="portlet-column portlet-column-last span8" id="column-3">
                        $processor.processColumn("column-3", "portlet-column-content portlet-column-content-last")
                </div>
        </div>

        <div class="portlet-layout row-fluid">
                <div class="portlet-column portlet-column-only span12" id="column-4">
                        $processor.processColumn("column-4", "portlet-column-content portlet-column-content-only")
                </div>
        </div>
</div>

Now that we’ve discussed how layout template TPL files are designed, let’s convert the 1 2 1 column template that we presented above into our 1 2 1 column template.

after select the layout templates click on save button.

next you can drag and drop the portlets using layout templates .