Magnolia 5.4 reached end of life on November 15, 2018. This branch is no longer supported, see End-of-life policy.

Page tree
Skip to end of metadata
Go to start of metadata

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.

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.

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: