Creating Custom Templates for MultiZone Layouts creating-custom-templates-multizone

Last update: Mon Apr 08 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Topics:
Developing Screens

CREATED FOR:

Intermediate
Developer

This page showcases how you can create a custom template for a multi-zone layout.

Important Considerations considerations

There are two important considerations that you must be aware before creating custom template in multi-zone layout:

Fixed Pixel Size or Percentages:

Decide whether to use fixed pixel size for different zones for your custom layout or if you want to create a custom layout using percentages.

note note
NOTE
The benefit of using percentage to set zones for your custom layout lets you reuse the template on various screen sizes.

Naming Convention:

Before you understand how to create custom multi-zone templates to use in an AEM Screens project, understand the verbiage of the templates you want to create.

table 0-row-2 1-row-2 2-row-2 3-row-2
Layout Name	Description
`Left20-LandscapeHD3Zone`	A three-zone landscape layout that lets you create three zones: * Zone 1 as 20% of the horizontal and vertical screen from the left * Zone 2 as 80 % of the horizontal screen and 20 % of vertical screen right justified * Zone 3 as 100 % of horizontal and 80 % of the vertical screen with aspect ratio of 16:9
`Upper20-PortraitHD2Zone`	A two-zone portrait template that covers 20% of the screen from the top, with aspect ratio of 16:9
`Right20-LandscapeSD3Zone`	A three-zone template that covers 20% of the screen from the right, with aspect ratio of 4:3

note important
IMPORTANT
The zones defined within the custom layout may not match with the overall aspect ratio of the entire layout. The naming convention followed in this document specifies the aspect ratio of the custom layout as a whole.

Example Use Case `Left20-LandscapeHD3Zone` Layout custom-template-one

Follow the section below to create a custom template Left20-LandscapeHD3Zone with the following configuration:

Left20 – The top zone on the left covering 20% of horizontal and vertical screen size.
Landscape – The screen orientation.
HD – The aspect ratio as 16:9.
3Zone – Three zones of the display.

Visual Representation of MultiZone Layout multi-layout-visual-one

The Left20-LandscapeHD3Zone Layout lets you create the following multi-zone layout in your project:

Creating a `Left20-LandscapeHD3Zone` Layout landscape-layout-one

Follow the steps below to create a Left20-LandscapeHD3Zone Layout for an AEM Screens project.

Create an AEM Screens project titled as customtemplate.
Navigate to CRXDE Lite from your AEM instance > Tools > CRXDE Lite.

Create a folder under apps titled as customtemplate. Similarly, create another folder titled as template under customtemplate, as shown in the figure below.

note note
NOTE
Select Save all from the action bar in CRXDE Lite each time you create, edit, or copy content to any of the nodes. Otherwise, you cannot commit the updates.

Copy the lbar-left template from /libs/screens/core/templates/splitscreenchannel/lbar-left to /apps/customtemplate/template.
Rename the copied lbar-left (/apps/customtemplate/template) to my-custom-layout.
Navigate to /apps/customtemplate/template/my-custom-layout and update the properties jcr:description to Template for Left20-LandscapeHD3Zone and jcr:title to Left20-LandscapeHD3Zone.
Navigate to the offline-config node from /apps/customtemplate/template/my-custom-layout/jcr:content/offline-config and update the jcr:title to Left20-LandscapeHD3Zone.
Navigate to the jcr:content property of my-custom-template from /apps/customtemplate/template/my-custom-layout/jcr:content and update the cq:cssClass property so you can use aem-Layout my-custom-layout.

Referring to step (4) in which you copied the lbar-left template, you can view three responsive grids under my-custom-layout/jcr:content. Add custom css class to each of the responsive grid in the cq:cssClass property, for example, my-custom-layout–top-left for r1c1 node.

Similarly, add my-custom-layout–top-right for r1c2 and, my-custom-layout–bottom for r2c1 node.

note note
NOTE
These custom classes are used in the css to set the width/height for these responsive grids.

note note
NOTE
You can add or remove the responsive grids based on the number of total grids you want. In this example, two grids in the first row, and one grid in the second row are showcased, so there are a total of three responsive grids (r1c1, r1c2, r2c1).

Copy /libs/settings/wcm/designs/screens to /apps/settings/wcm/designs/ and rename the copied design as custom-template-designs.
Navigate to /apps/settings/wcm/designs/custom-template-designs and update the property jcr:title of custom-template-designs to customtemplate-design.
Navigate to /apps/settings/wcm/designs/custom-template-designs and create a file static.css.

Copy the content to static.css file:

code language-shell

code language-shell
`/my-custom-layout styles/ .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-left { width:20%; height: 36%; float: left !important; } .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-right { width:80%; height: 36%; float: left !important; } .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--bottom { width:100%; height: 64%; }`

    /*my-custom-layout styles*/
   .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-left {
    width:20%;
    height: 36%;
   float: left !important;
   }
  .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-right {
   width:80%;
   height: 36%;
  float: left !important;
  }
  .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--bottom {
  width:100%;
  height: 64%;
  }

note note
NOTE
You can update the percentages to match requirements for your custom template.

Navigate to /apps/<project>/templates/my-custom-layout/jcr:content and update the property cq:designPath to /apps/settings/wcm/designs/customtemplate-designs so you can load the styles configured in static.css.

note note
NOTE
Type all the styles rather than copy or pasting which can cause white spaces that result in css styling issues.

Viewing the Result viewing-result

Follow the steps below to use the above customized template in your AEM Screens project:

Navigate to your Screens project that you created in step (1) and select the Channels folder.
Select Create from the action bar and select the template Left20-LandscapeHD3Zone from the Create wizard.
After you have created a channel with the customized template, you can add assets to your channel from the editor. The following preview shows the images in a custom template.

Inserting an image as the Background Layer inserting-image

You can insert an image as a background layer to the layout:

You can adjust the CSS rule to use “data-uri” and directly inline the image (Base64 encoded) in the CSS file that you created in (step 13), static.css.

This is done as follows:
.cq-Screens-channel--multizone.my-CustomLayout { background: url('data:image/…;base64,…') no-repeat center center; }

Or, you can follow the steps below:

Make sure that the image is somehow included in the offline config for the channel.
Use a direct link to the image in the CSS above, instead of the “data-uri” variant.

Updating Background Color updating-color

To change the background color, add the following code to the xml file (step 13), static.css.

.cq-Screens-channel--multizone.my-CustomLayout { background-color: …; }

recommendation-more-help

adce462a-f916-4dbe-9ab5-0b62cfb0f053