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.
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: mtk-1.1.zip
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
basic page template is a good starting point for custom page templates.
The basic template contains:
- Page definition, page template script and a page properties dialog that allows you to set titles and metadata.
- Components that are available in main and footer areas. See the page definition for component availability.
- Navigation scripts.
The areas are defined in the page template (see the
areas node below). Areas typically define what components editors can place inside the area (see the
availableComponents node in
main areas below).
The MTK provides basic components for use in your templates:
Text and image
Displays text and an image.
Creates a link to an internal or external page or a downloadable asset.
Organizes link components into a bulleted, inline or ordered list.
Displays an image.
Promotes another Magnolia page, third-party website or a downloadable asset, inviting the visitor to click for more.
Allows editors to enter HTML markup and renders it on the page.
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.
A component to render the page properties
The MTK provides basic navigation to use in your templates. Add subpages to see the navigation.
navigation area is rendered by the
navigation.ftl script. This script sets the root page, navigation depth and behavior, and includes the
The macro does the "heavy-lifting" and generates a simple navigation which you can use as a starting point.
- Moyan Breen: Sunset Aurora photo. Creative Commons Attribution 2.0 Generic (CC BY 2.0)
- Andrew Wilkinson : Forest Stream photo. Creative Commons Attribution 2.0 Generic (CC BY 2.0)
- Booked.net: Weather widget code