Page tree
Skip to end of metadata
Go to start of metadata

This page explains how to use the Magnolia Templating Kit (MTK), provided as a submodule of the Magnolia Templating Essentials module (MTE) . 

MTE and MTK

Magnolia Templating Essentials (MTE) provides useful templating functionality for all projects in the form of templating function libraries, definitions, imaging support and templates via the MTK submodule. MTE is front-end framework agnostic, which means you can use it with any modern CSS and JS framework.

The Magnolia Templating Kit (MTK) is a small set of ready-to-use component, area and page templates, that supplies the basic functionality that is common across websites. The templates are designed to be flexible, with dialog options that enable them to fit many use cases without development. The MTK templates can be used "as is", modified to suit your projects needs, or simply used as helpful examples of best-practice Magnolia templating. The MTK is intentionally small so that developers can learn it quickly.  CSS is kept to a minimum to enable developers to easily integrate their own CSS or frameworks. 

In addition to the standard maven module, the MTK is also available as a light module for easy access to the files. To get the latest version, see the download area on the release notes pages.

To experiment with MTK or Magnolia templating, put the unzipped MTK light module in Magnolia's resource directory, and make changes to the files. Due to Magnolia's resource loading mechanism, these files will be used instead of the ones in the Java classpath provided by the Maven module. 

MTK template definitions

The MTK module includes pagearea and component templates and associated dialogs.

Page templates

Two page templates are provided by MTK to help get started with site development.

The basic page template is a good starting point for custom page templates.

The basic page template is made up of:

  • Page definition (basic.yaml).
    • It defines areas: 
      • htmlHeader: The non-visible HEAD portion for defining page metadata.
      • navigation: An autogenerated user navigation area based on the hierarchy of your site. 
      • main: The main content area of the page where editors add component templates to define the page purpose. 

      • footer: The uniform ending to each page. Typically containing popular site links, copyright and contact information. 
  • Template script (basic.ftl).
  • A page properties dialog (basic.yaml).
    • The editor has the option to set various types of metadata:
      • The page title, window title and navigation title
      • Exclude the page from navigation
      • Create an abstract
      • Keywords
      • Description
      • Exclude the page from the cache (see Setting cache headers).

Areas typically define what components editors can place inside the area. However, not all areas are meant to be controlled directly using the page editor.

The type of area and its role on the page will determine how that area's content is changed.

NameTypeScriptControlledDescription
htmlHeadernoComponenthtmlHeader.ftlPage properties dialogUsing the MTK page properties dialog editors can control some of the metadata rendered to the page.
navigationnoComponentnavigation.ftlBrowser subappThe script uses the site hierarchy defined in the browser subapp to render a menu of the site. It has no dialog and no components may be added directly through the detail subapp.
mainlist default script Detail subappContent editors define the essence of the page here. By using the components provided by MTK editors can pick what kind of content should be rendered and where.
footerlist default script Detail subappA special type of area inherited on all pages. The footer is typically uniform in content and edited from the home page to maintain consistency.

(Magnolia 6.2.2+) The redirect page template provides a way for content editors to create virtual redirects without the need for adjusting the configuration workspace. The virtual redirect can be to an internal or external resource.

The redirect page template is made up of:

Component templates

The MTK provides basic components for use in your templates:

Template ID: mtk:components/pageIntro

A component to render the page properties title and abstract

Template ID: mtk:components/linkList

Organizes link components into a bulleted, inline or ordered list.

Template ID: mtk:components/link

Working together with the Link List component the Link component creates a link to an internal or external page or a downloadable asset.

Template ID: mtk:components/teaser

Promotes another Magnolia page, third-party website or a downloadable asset, inviting the visitor to click for more.

Template ID: mtk:components/textImage

Displays text and an image.

Template ID: mtk:components/image

Allows the content editor to add an image to the area but override the metadata from the dam.

Template ID: mtk:components/video

Adds the possibility to add a video. Videos can be taken from the assets app - or you may just add "embed code" as provided by youtube and other public video repositories.

Template ID: mtk:components/html

Allows editors to enter HTML markup and renders it on the page.