Magnolia 5.7 reached extended end of life on May 31, 2022. Support for this branch is limited, see End-of-life policy. Please note that to cover the extra maintenance effort, this EEoL period is a paid extension in the life of the branch. Customers who opt for the extended maintenance will need a new license key to run future versions of Magnolia 5.7. If you have any questions or to subscribe to the extended maintenance, please get in touch with your local contact at Magnolia.
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.
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 page, area and component templates and associated dialogs.
Page template
The 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.
- Areas:
htmlHeader
,navigation
,main
andfooter
- Components that are available in main and footer areas. See the page definition for component availability.
- Navigation scripts.
Areas
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
Components
The MTK provides basic components for use in your templates:
Text and image
ID: mtk:components/textImage
Displays text and an image.
Link
ID: mtk:components/link
Creates a link to an internal or external page or a downloadable asset.
Link list
ID: mtk:components/linkList
Organizes link components into a bulleted, inline or ordered list.
Image
ID: mtk:components/image
Displays an image.
Teaser
ID: mtk:components/teaser
Promotes another Magnolia page, third-party website or a downloadable asset, inviting the visitor to click for more.
HTML
ID: mtk:components/html
Allows editors to enter HTML markup and renders it on the page.
Video
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.
Page intro
ID: mtk:components/pageIntro
A component to render the page properties title
and abstract
.
Navigation
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.
Credits:
- 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
1 Comment
Obeliksz
The shown navigation.ftl macro displays the pages under a page, to render also the home (root) page we can put the following under the ul tag inside the navigation.ftl macro: