Magnolia 5.6 reached end of life on June 25, 2020. This branch is no longer supported, see End-of-life policy.
This page explains how to use the Magnolia Templating Kit (MTK), provided as a submodule of the Magnolia Templating Essentials module (MTE) .
If you are an existing customer with STK based templates, you can still use the Standard Templating Kit (STK). Note however that, although the STK is still maintained, it will not be actively developed further.
Magnolia recommends you start all new projects with MTE.
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 MTK module includes page, area and component templates and associated dialogs.
The basic
page template is a good starting point for custom page templates.
The basic template contains:
htmlHeader
, navigation
, main
and footer
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 footer
and main
areas below).
templateScript: /mtk/templates/pages/basic.ftl dialog: mtk:pages/basic renderType: freemarker class: info.magnolia.module.site.templates.PageTemplateDefinition cssFiles: normalize: link: /.resources/mtk/css/normalize-3.0.3.css main: link: /.resources/mtk/css/html5boilerplate-main-5.3.0.css video: link: /.resources/mtk/css/video.css jsFiles: modernizr: link: /.resources/mtk/js/modernizr-2.8.3.min.js areas: htmlHeader: type: noComponent createAreaNode: false templateScript: /mtk/templates/areas/htmlHeader.ftl navigation: type: noComponent createAreaNode: false templateScript: /mtk/templates/areas/navigation.ftl footer: inheritance: components: all enabled: true availableComponents: &footerAvailableComponents link: id: mtk:components/link textImage: id: mtk:components/textImage image: id: mtk:components/image main: availableComponents: # using all components from footer plus others <<: *footerAvailableComponents html: id: mtk:components/html linkList: id: mtk:components/linkList teaser: id: mtk:components/teaser video: id: mtk:components/video pageIntro: id: mtk:components/pageIntro
The MTK provides basic components for use in your templates:
ID: mtk:components/textImage
Displays text and an image.
ID: mtk:components/link
Creates a link to an internal or external page or a downloadable asset.
ID: mtk:components/linkList
Organizes link components into a bulleted, inline or ordered list.
ID: mtk:components/image
Displays an image.
ID: mtk:components/teaser
Promotes another Magnolia page, third-party website or a downloadable asset, inviting the visitor to click for more.
ID: mtk:components/html
Allows editors to enter HTML markup and renders it on the page.
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.
ID: mtk:components/pageIntro
A component to render the page properties title
and abstract
.
The MTK provides basic navigation to use in your templates. Add subpages to see the navigation.
The navigation is provided by two scripts that use navfn templating functions which are included in the MTE module.
The navigation
area is rendered by the navigation.ftl
script. This script sets the root page, navigation depth and behavior, and includes the navigation.ftl
macro.
[#include "/mtk/templates/macros/navigation.ftl"] [#assign navigationRootPage = navfn.rootPage(content)!] [@navigation navParentItem=navigationRootPage depth=1 expandAll=true /]
The macro does the "heavy-lifting" and generates a simple navigation which you can use as a starting point.
Standard Templating Kit (STK) is the predecessor to MTE. It provides best practices and templates for many common use cases. However, as front-end Web technologies have evolved and front end frameworks such as Twitter Bootstrap have emerged, developers found the STK too opinionated and monolithic. They were looking for something leaner, more adaptable and less time-consuming to learn. The MTE was created to meet this demand.
You can run still STK projects on Magnolia 5.5. Include STK in your project
For more information about STK, please see the Magnolia 5.4 documentation.
Credits: