Knowledge Base

Page titles

In this exercise, you will learn how to output custom page titles in the title tag of your page layout.

  • You will learn how to output a "Custom Page Title" by using a field from the SectionMetaDescription content type.
  • On fulltext pages, you will output a content element from the page layout.
  • Finally, you will build logic into your code to output the appropriate title depending on whether the element contains data and whether you are in a fulltext page or not.

Section name and custom page title elements in the general tab of a section

How to display a custom page title

In this exercise, you will use the section Helper to output a "Custom Page Title". This field is configured in the SectionMetaDescription content type and is available within the General tab of your sections.

  1. Go to Assets > Page Layouts.
  2. Click your page layout name to edit it. (Use the Filter tool to search).
  3. Open the </> Header code tab.
  4. Click on the </> Generate Handlebars Expression button.
  5. Open the Section tab:
    1. Section metadata (select the Section meta field radio button)
      1. Section name
      2. Section ID
      3. Section meta field
      4. Edit section link
    2. Section links: Do not select.
    3. Section meta fields: select the "Custom Page Title" from the drop-down.
  6. Click the Copy to clipboard button to copy the Handlebars expression.
  7. Add the new Handlebars code below to the Header code of the page layout.

<title>{{section field="Custom Page Title"}} - Terminalfour University</title>

  1. Click Save changes to save the changes to your page layout.
  2. Update your preview to check the result.

How to use the if/else Helpers

  1. Go to Assets > Page Layouts.
  2. Click your page layout name to edit it. (Use the Filter tool to search).
  3. Open the </> Header code tab.
  4. You can use the if Helper to check if the SectionMetaDescription has a field called “Custom Page Title” and whether it is set to a value. If so, output the title tag with the name of the “Custom Page Title” field.
  5. Use the else Helper for when the “Custom Page Title” field is not set, in which case, you can display the section name using the sectionName Helper. 
  6. Click on the </> Generate Handlebars Expression button.
  7. Open the </> Misc tab.
  8. Select the "if" helper from the Helpers drop-down.
  9. Click Copy to clipboard and paste the starting if/else block into your page layout.
  10. Modify the starting code as per below:
    1. Replace the condition in the if statement to check for the value of the "Custom Page Title".
    2. Output the "Custom Page Title" if it has been set.
    3. Output the Section name if the "Custom Page Title" is empty.

{{#if (section field="Custom Page Title")}}
  <title>{{section field="Custom Page Title"}} - Terminalfour University</title>
{{else}}
  <title>{{sectionName}}  - Terminalfour University</title>
{{/if}}

  1. Click Save changes to save the changes to your page layout.
  2. Update your preview to check the result.

The fulltext Helper (block level variant)

The fulltext Helper has both a standard and block level variant. It behaves differently depending on which is used.

The fulltext Helper when used in a standard expression outputs a link to the fulltext page of a given content type. You will learn to use this variant in an upcoming exercise.

The fulltext Helper when used in a block level expression, which you will use in this exercise, allows you to know if you are viewing a fulltext page.

How to use the fulltext Helper (block level variant)

  1. Go to Assets > Page Layouts.
  2. Click your page layout name to edit it. (Use the Filter tool to search).
  3. Open the </> Header code tab.
  4. Click on the </> Generate Handlebars Expression button.
  5. Open the </> Misc tab.
  6. Select the "fulltext" helper from the Helpers drop-down.
  7. Click Copy to clipboard and paste the starting fulltext block into your page layout.
  8. Let's add the fulltext Helper to the code to output the appropriate title when you are in a fulltext page. Update the code by outputting the "Headline" element within the title tag only when in a fulltext page. 

{{#fulltext}}

  {{#if (section field="Custom Page Title")}}
    <title>{{section field="Custom Page Title"}} | {{publish element="Headline"}} - Terminalfour University</title>
  {{else}}
    <title>{{sectionName}} | {{publish element="Headline"}} - Terminalfour University</title>
  {{/if}}

{{/fulltext}}

A great benefit of using the fulltext Helper as a block level expression in page layouts is that you have access to the elements of the content type which is something that isn't possible using t4 tags. This allows you to use the publish Helper to output the "Headline" element of the fulltext content type.

  1. Let's now handle the case when you are not in a fulltext page, to do this you can make use of the else Helper to add an else condition. Add the original code that you wrote in How to use the if/else Helpers inside of the else block:

{{#fulltext}}

  {{#if (section field="Custom Page Title")}}
    <title>{{section field="Custom Page Title"}} | {{publish element="Headline"}} - Terminalfour University</title>
  {{else}}
    <title>{{sectionName}} | {{publish element="Headline"}} - Terminalfour University</title>
  {{/if}}

{{else}}

  {{#if (section field="Custom Page Title")}}
    <title>{{section field="Custom Page Title"}} - Terminalfour University</title>
  {{else}}
    <title>{{sectionName}} - Terminalfour University</title>
  {{/if}}

{{/fulltext}}

Note that by adding an else condition to the fulltext Helper, you are now also creating a nested if within your logic.

  1. Click Save changes to save the changes to your page layout.
  2. Update your preview to check the result.

Using the fulltext Helper (Block level variant)

Preview

The preview Helper is used to determine whether or not the page is currently being previewed or not. It allows you to output content only in Preview.

  • You will learn how to use the preview Helper and how to output the channel name, section name and publish URL when in Preview.

Example of an informational panel that displays at the top of each page in preview

How to use the preview Helper

  1. Go to Assets > Page Layouts.
  2. Click your page layout name to edit it. (Use the Filter tool to search).
  3. Open the </> Header code tab.
  4. Click on the </> Generate Handlebars Expression button.
  5. Open the </> Misc tab:
    1. Helpers: select preview from the Helpers drop-down.
  6. Click the Copy to clipboard button to copy the Handlebars expression. The Handlebars expression generated should look like the code below:

{{preview}}
  <p>Only output in Preview and Direct Edit</p>
{{else}}
  <p>Only output on the published page</p>
{{/preview}}

  1. Paste the code into your page layout.
  2. Click Save changes to save the changes to your page layout.
  3. Update your preview to check the result.

Displaying the channelName, sectionName and publishURL in preview

  1. Go to Assets > Page Layouts.
  2. Click your page layout name to edit it. (Use the Filter tool to search).
  3. Open the </> Header code tab.
  4. Click on the </> Generate Handlebars Expression button.
  5. Open the Channel tab:
    1. URLs: do not select
    2. Channel information 
      1. Channel ID
      2. Channel Name (select the Channel Name)
      3. Channel Description
  6. Click the Copy to clipboard button to copy the Handlebars expression and paste into your page layout.
  7. To generate an expression that outputs the Section name click into the Section tab and select the Section name radio button.
  8. To generate an expression that outputs the Publish URL click into the Channel tab and select the Publish URL radio button.
  9. Add the new Handlebars code below to the Header code of the page layout.

{{#preview}}
  <p><strong>Channel name:</strong> {{channelName}}</p>
  <p><strong>Section name:</strong> {{sectionName}}</p>
  <p><strong>Publish URL:</strong> {{publishURL}}</p>
{{/preview}}

  1. Click Save changes to save the changes to your page layout.
  2. Update your preview to check the result.

Styling the preview

  1. Copy the code below into your page layout.

<div class="row">
  <div class="small-12 columns text-left hide-for-small-only" >
    <div class="panel callout">
      {{#preview}}
        <p><strong>Channel name:</strong> {{channelName}}</p>
        <p><strong>Section name:</strong> {{sectionName}}</p>
        <p><strong>Publish URL:</strong><a href="{{publishURL}}"> {{publishURL}}</a></p>
      {{else}}
        <p><strong>This is the published Page.</strong></p>
      {{/preview}}
     </div>
   </div>
</div>
<style>
  .panel.callout {
  background-color: lightcyan;
  border-color: darkblue;
  margin-top: 1rem;
  }
</style>

  1. Click Save changes to save the changes to your page layout.
  2. Update your preview to check the result.

Adding a warning message to the preview

  • You may want to display a placeholder "warning" message when in preview only, a possible use case is an alert informing of functionality that may not be available in preview. 
  1. Let's add a warning message to the display. Copy the code below into your page layout.

<div class="row">
  <div class="small-12 columns text-left hide-for-small-only" >
    <div class="panel callout">
      {{#preview}}
        <p><strong>Channel name:</strong> {{channelName}}</p>
        <p><strong>Section name:</strong> {{sectionName}}</p>
        <p><strong>Publish URL:</strong><a href="{{publishURL}}"> {{publishURL}}</a></p>
    </div>
  </div>
</div>
<div class="row">
  <div class="small-12 columns text-left hide-for-small-only" >
    <div class="alert-box alert warning">
      <p>Sorry, Content Type: "Program Compare" is not available in preview.</p>
    </div>
  </div>
</div>
{{else}}
      <p><strong>This is the published Page.</strong></p>
    </div>
  </div>
</div>
{{/preview}}
<style>
  .panel.callout {
  background-color: lightcyan;
  border-color: darkblue;
  margin-top: 1rem;
  }
</style>

  1. Click Save changes to save the changes to your page layout.
  2. Update your preview to check the result.