Base CMS Made Simple page template with automated metatags

  Previous article Next article  

Base CMS Made Simple page template with automated metatags

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.1.6
  Last updated: 05-08-2016
  Comments: 4

How to build a CMS Made Simple™ page template and show the news/blog title as the page title, get the correct canonical value for module detail pages, pass a correct image to social media websites, etc... I will describe here how to do that with just clever use of Smarty in your templates.

Important is to first understand the way templates are processed in CMSMS™.
The Core::Page template contains three different areas:

<!-- Area 1 -->

<head> <!-- Area 2 --> </head>

<!-- Area 3 -->

The areas are rendered in the order: one, three and two!

To pass data between these areas this order is important. To use a parameter it has to be processed in the same area or in an area before it.
The advantage of processing parameters in the top of the page template (area 1) is you can use the parameters globally. Give the parameters a default value and process the standard content block afterwards. If the content block contains a detail template of a module, the default values can be overwritten by the modules values. No need for if this than that or else... logic in the top or the content of a template.

Because I re-use the values in other template areas/scopes I added scope=global to the assigned parameters. Read here more about Smarty scope »

  How to use

The base Core::Page template

The content of the template in Design Manager:

{* ++++++++++++++++++++++++ Area 1 ++++++++++++++++++++++++ *}

{strip}
    {process_pagedata}
    {$canonical_url = "{$content_obj->GetURL()|lower|default:''}" scope=global}
    {$root_url = "{root_url}" scope=global}
    {$theme_url = "{uploads_url}/_template" scope=global}

    {$site_name = "{sitename}" scope=global}
   
    {$page_description = "{description}" scope=global}
    {$page_image = "{$theme_url}/page_image.png" scope=global}
    {$page_lang = 'en' scope=global}
    {$page_modified = "{modified_date format='%e-%m-%Y'}" scope=global}
    {$page_title = "{title}" scope=global}

    {$content = "{content}" scope=global}

    {if empty($page_description)}
      {$page_description = $content|strip_tags|strip|truncate:150|default:'' scope=global}
    {/if}
<!DOCTYPE HTML>
<html lang="{$page_lang}">

{* ++++++++++++++++++++++++ Area 2 ++++++++++++++++++++++++ *}

{/strip}<head>{strip}

    <title>{$page_title} - {$site_name}</title>

    <meta charset="utf-8">
    {metadata|strip}

    {cms_stylesheet|strip}

{/strip}</head>{strip}

{* ++++++++++++++++++++++++ Area 3 ++++++++++++++++++++++++ *}

<body>
    <header>
        <h1><a href="{$root_url}">{$site_name}</a></h1>
    </header>

    <nav>
        {Navigator|strip}
    </nav>

    <main>
        <h2>{$page_title}</h2>
        {$content|strip}
    </main>

    <footer>
        <p>This page is last modified: {$page_modified}.</p>
    </footer>
</body>
</html>
{/strip}

A2 Webhosting CMS Made Simple

Available global parameters in the template

{$canonical_url}

The canonical url for a regular page and if set in a module overwritten to the detail url for the module detail page.


{$root_url}

The root url of the website. Can be useful in multi domain websites.


{$theme_url}

This tag is set so it can be used at multiple spots in your templates. If you move the website or template you only need to change the path once.
In this example all theme files are stored in www.website.com/uploads/_template/
(the underscore in the folder name makes the folder invisible in File Manager for regular editors).


{$page_lang}

Set the language once. Is useful for multilingual websites.


{$page_image}

The full path to the image that is used when the website url is linked from social media websites and apps.
The default website image is named page_image.png and is stored in www.website.com/uploads/_template/ = {$theme_url}.
If you have a separate image set in your news/blog module this one will be used instead.
Don't make the image to small otherwise it will be ignored by Facebook. I don't know what the "official" requirements are, but in my experience it must be at least 500px.


{$page_description}

The description of the page. First looks at the description field in the content page, second if a module has the description set and third a summarize of the content tag.


{$page_modified}

When is the page or module detail information last modified.


{$page_title}

The page title, first the title set in the page editor and if set in the module detail template the title of the i.e. news article.


{$site_name}

The website name


{$content}

To output the regular content block in the main content area



A2 Webhosting CMS Made Simple

Pass data from modules to the page template

Two examples how to use module data in the Core::Page template.

News module

Move this code to the top of your News module detail template:

{$canonical_url = $entry->canonical|lower scope=global}
{$page_description = $entry->summary|default:$entry->content|strip_tags|strip|truncate:150 scope=global}
{$page_modified = $entry->modified_date|date_format:'%e-%m-%Y' scope=global}
{$page_title = $entry->title|cms_escape:htmlall scope=global}

Optional: First create field definition Image: "photo".

{if !empty($entry->fields.photo->value)}
    {$page_image = "{uploads_url}/news/id{$entry->id}/{$entry->fields.photo->value}" scope=global}
{/if}

CGBlog module

Move this code to the top of your CGBlog module detail template:

{$canonical_url = $entry->canonical|lower scope=global}
{$page_description = $entry->summary|default:$entry->content|strip_tags|strip|truncate:150 scope=global}
{$page_modified = $entry->modified_date|date_format:'%e-%m-%Y' scope=global}
{$page_title = $entry->title|cms_escape:htmlall scope=global}

Optional: First create field definition Image: "photo".

{if !empty($entry->fields.photo->value)}
    {$page_image = "{$entry->file_location}/{$entry->fields.photo->value}" scope=global}
{/if}

You can do similar for other modules that have detail pages, like Company Directory, Products and Uploads module. Don't forget to change the Smarty strings according the module's requirements.


A2 Webhosting CMS Made Simple

Automate your metadata tags for SEO purposes

Now we have all parameters globally available, we can use them for setting the metadata tags. A few examples:

General tags for the <head></head> area

<meta name="application-name" content="{$site_name}">
<meta name="copyright" content="Copyright (C) Your name, All Rights Reserved"> {* <- Change this *}
<meta name="description" content="{$page_description}">
<meta name="generator" content="CMS Made Simple - Copyright (C) 2004-{$smarty.now|date_format:'%Y'} CMSMS™. All rights reserved.">

<link rel="canonical" href="{$canonical_url}">

Open Graph tags for Facebook in the <head></head> area

<meta property="og:description" content="{$page_description}">
<meta property="og:image" content="{$page_image}">
<meta property="og:site_name" content="{$site_name}">
<meta property="og:title" content="{$page_title}">
<meta property="og:type" content="website">
<meta property="og:updated_time" content="{$page_modified}">
<meta property="og:url" content="{$canonical_url}">

Meta tags for Twitter in the <head></head> area

<meta name="twitter:card" content="summary">
<meta name="twitter:creator" content="@yourtwitter"> {* <- Change this *}
<meta name="twitter:description" content="{$page_description}">
<meta name="twitter:domain" content="{$root_url}">
<meta name="twitter:image" content="{$page_image}">
<meta name="twitter:site" content="@yourtwitter"> {* <- Change this *}
<meta name="twitter:title" content="{$page_title}">
<meta name="twitter:url" content="{$canonical_url}">

Because the {metadata} tag is in the head area of the page template, you can also add the meta code above in the Global Metadata field in the Global Settings Admin page!


  Working example

I use this at:



A2 Webhosting CMS Made Simple

  Comments

  Click here to leave a comment






This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)
  « Enter the CAPTCHA code (lower case)

Your IP address will be stored on submit. I reserve the right to change or delete your response without notice!
In case of abuse your IP address will be blocked!


Can I have your attention for a moment?

Did this tutorial help you solving a problem at your (clients) website and it saved you many hours of work? Great!!
Consider buying Rolf a cup of coffee in return! [ Click here ]


  4 Comments

CMS Made Simple 2.1.6 - Tutorials, tips and tricks - CMSMS 2.1.6

Base CMS Made Simple page template with automated metatags

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.1.6
  Last updated: 05-08-2016
  Comments: 4

A2 Webhosting CMS Made Simple