MTK module

The Magnolia Templating Kit (MTK) module is a basic set of templates with minimal CSS and JavaScript. You can use the templates "as is" in your projects or as inspiration for custom templates.

All the templates are configured in YAML. The YAML files are in the Java classpath, inside the module JAR. If you prefer to work on the file system, you can download mtk-1.0.1.zip as a light module and look at the templates for inspiration.

Installing

Maven is the easiest way to install the module. Add the following dependencies to your bundle:

<dependency>
  <groupId>info.magnolia.templating</groupId>
  <artifactId>magnolia-templating-kit</artifactId>
  <version>1.0.1</version>
</dependency>

<dependency>
  <groupId>info.magnolia.templating</groupId>
  <artifactId>magnolia-templating-essentials-models</artifactId>
  <version>1.0.1</version>
</dependency>

Pre-built jars are also available for download. See Installing a module for help.

Template definitions

The 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 and footer
Components that are available in main and footer areas. See the page definition for component availability.

Areas

The basic page template has the following areas from top to bottom:

htmlHeader
navigation
main
footer

The areas are defined in the page template, see the areas node below. The areas in turn define what components editors can place inside the area, see the availableComponents node

Example: The basic page template definition contains a main area.

/templates/pages/basic.yaml

templateScript: /mtk/templates/pages/basic.ftl
dialog: mtk:pages/basic
renderType: freemarker
i18nBasename: info.magnolia.templatingkit.messages
title: templates.pages.basic.label
description: templates.pages.basic.description
class: info.magnolia.templating.definition.PageTemplateDefinition
areas:
  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

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.

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

Page tree