Page History

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

...

• Include MTK in your project

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.

...

• Page definition, page template script and a page properties dialog that allows you to set titles and metadata.
• Areas: htmlHeader, navigation, main and footer
• Using the Magnolia Templating KitComponents that are available in main and footer areas. See the page definition for component availability.Using the Magnolia Templating Kit
• 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. 

...