- Last Modified:
- 14 Dec 2018
- User Level:
- Power User
Page Layouts can also contain T4 Tags so you can add the following to all of the pages that use the Page Layout:
- Navigation Objects e.g. adding sitewide navigation or breadcrumbs
- Media items e.g. adding items from the Media Library such as images, scripts or stylesheets
- Meta information e.g. adding a page title and description
- Channel information e.g. adding a favicon that will is deployed on this Channel
TERMINALFOUR does not validate the code within the Page Layouts so it is up to Administrator or Power User to ensure the code is of good quality and validated.
When creating a new Page Layout you need to determine how the page will be set up. Things to consider include:
- the elements that should appear in the Header and Footer of every page using the Page Layout
- the elements and content in the Header and Footer markup that can be replaced by T4 Tags e.g. navigation elements and images, stylesheets and scripts that are stored in the Media Library
- how the Page Layout and the main content area will look when combined when Published
This diagram shows how a Page Layout is used across multiple pages throughout the site.
The screenshot above shows a sample of the main content area within the orange box.
In the image below, the highlighted areas show parts of the Page Layout that could use Navigation Object T4 Tags.
At this stage of your page analysis, you can identify the elements that are part of the Page Layout, elements that can be replaced by a T4 Tag and what the main content area will look like.
To work with Page Layout, go to Assets > Page Layouts.
The columns in the table are Name, Group(s) and the Actions button:
|Name||Contains Page Layout name, a brief description (if one has been provided), and the Page Layout ID number. The arrow in the header row can re-order the list alphabetically.|
|Group||Shows the Group(s) the Page Layout belongs to. If the Page Layout is shared with one other Group or more you'll see a + and the number of Groups it's shared with. To see a list of those shared Groups, hover over the + symbol.|
|Action Menu Button||Provides options to Share, Duplicate, Edit, and Delete. The Share function is not present where the Group designator is "Global", however, you can move a global Page Layout to a Group by Editing the Page Layout and selecting a Primary Group.|
When you select Create New Layout the General Information screen is displayed:
|Name||This is a mandatory entry. Give your Page Layout a name - it is recommended to make the name as descriptive as possible|
|Description||This is an optional entry. This is used by the filter on the Page Layouts listing and can be useful for finding Page Layouts.|
Specifies the file extension of the published page using this Page Layout. In general, this would be left as "Default", but you can choose an alternative extension from the drop-down list. You need to configure the system to output the intended file type in the configuration options and channel settings.
After the Page Layout is in use, modifications to the file extension (or configurations) can inadvertently alter the Page Layout and prevent sections of content not being published.
Select a Primary Group for this Page Layout. Grouping and sharing Page Layouts restricts the users that can use or edit the Page Layout.
It is good practice to add all your assets to Groups. This makes it easier to identify which assets are being used and where. By grouping assets together, you can also restrict access to them. When a user is not part of the Group, they cannot see or access assets in that Group.
This table has three columns. Click on Add row, to share with a group:
The Remove button removes the Page Layout from the group.
If you are satisfied with your inputs so far, then click Save Changes.
When building your Page Layout you will need to consider what will appear in the header and footer of every page that uses the Page Layout. Typically, the Header tab will feature HTML elements up to and including the opening body tag, while the Footer tab will feature HTML from the closing body tag on. Using T4 Tags you can add items such as images, stylesheets and scripts from the Media Library or add navigation elements.
|Header and Footer Code Tabs||you can add and edit the markup that will be used in the Page Layout. This can be typed directly in the input or pasted from a third party application.|
|Generate T4 tag||this is located below the Header Code and Footer Code inputs (you may need to scroll down). When selected a modal window will appear where you can generate the T4 Tags that can be used in the Page Layout.
After you have built a T4 Tag, select Copy to clipboard and paste the T4 Tag into your Page Layout
The following types of tags can be generated:
- Navigation: Insert navigation objects into the Page Layout
- Media: Used to reference images or CSS files
- Metadata: When you are editing a Section an option is provided to add metadata. This metadata can be used by search engines or can be used to determine how your content will look when shared on social networks.
- Channel: Using the Channel T4 Tags, you can add Channel specific information such as the Channel title, description to the Page Layout.
- Misc(ellaneous): Title tags and Edit this page tags
Each time a Page Layout is amended and saved a new version is created. All versions of the Page Layout are listed in the History tab.
The list in this display shows six columns:
|Name||Page Layout name|
|Version||Each version created is given a number; a green dot indicates the active version|
|Last modified||The date, time and user who made the change|
|Previous||Previous version number|
|Actions||Click and it lets you Preview the page layout or set that version as the Current version|
|Select box||Check one or more if you wish to Compare selected. When a layout is checked the row becomes shaded|
You can choose to compare versions with a side-by-side comparison. Check two boxes in the far right column to choose the layouts to compare and select Compare selected.
Select the type of comparison you want to view. You can decide to compare Code, where the differences will be highlighted, or the Visual view in which visual samples of the Page Layout versions can be compared side by side.
In the Code compare, the most recent version selected is shown on the left and the older version on the right. With the drop-down list on the right, you can select alternate versions to compare with the most recent selected. Code changes are highlighted in yellow. In this instance, the highlighted line of code in the older version on the right has been removed from the more recent version on the left. If selected, the Revert option highlighted will add this back to the more recent version.
Remember - over time you can store many Page Layout examples and versions. This provides you with a dependable record of the layouts developed and refined.
When you are satisfied with the entries and selection you have made, you can click Save changes.
Share a Page Layout
Global Page Layouts can be used by any user but can only be edited by Administrators. Power Users and Administrators can create Page Layouts within groups or share Page Layouts with other groups. The Page Layout can either be shared with Read only or Full access:
- Read only access: Power Users within the group can view the Page Layout but cannot edit it
- Full access: Power Users within the group can view and edit the Page Layout
Regardless of how the Page Layout is shared, all users within the group can use the Page Layout to apply it to a section.
Duplicate a Page Layout
You can duplicate a Page Layout. Do this either into a new Group or the same Group or with other Groups. A duplicate Page Layout creates a copy of the original and the two Page Layouts are not linked to each other.
Delete a Page Layout
If you are unsure whether or not a Page Layout is in use, check the Page Layout Usage Reporting first. In the row of the corresponding Page Layout, open the Actions drop-down list and select Delete.
A confirmation pop-up window appears and you can confirm your choice and Delete, or Cancel the action. Upon successful deletion, a green banner appears confirming the deletion, and the Page Layout is removed from the list.