Template preview module

Template preview module is a light module for Magnolia CMS which provides a preview in dialogs for different types of templates (pages, components). Module utilizes JS Fields to add preview functionality and shows static images. You can provide any image you want for any component.

New page preview

New component preview

Installation

With Magnolia CLI just run: mgnl install template-preview-module.

Alternatively git clone it from https://bitbucket.org/ndq1/template-preview-module and copy source files that you need into your Magnolia's modules directory.

Usage

After successful installation preview will be applied to create page, create component and change template dialogs in Pages App. Image parsing/preview configuration works in two ways:

1. resolve using config
2. resolve automatically

When resolving automatically (1) for each component/page field will take currently selected templateId (from neighbor mgnl:template field), replace : and / symbols with _ and tries to get the image from webresources folder with the .jpg extension.
E.g.: mtk2:components/html componentId will be converted to following image url: <contextPath>/.resources/template-preview-module/webresources/mtk2_components_html.jpg

When resolving using config (2) you provide templateId-to-url mapping by yourself, so you can map any image with any extension in any folder.
For each component/page field will take currently selected templateId (from neighbor mgnl:template field), replace : and / symbols with _ and tries to get the image according to the mapping.
E.g.: mtk2_components_html: /.resources/test-module/webresources/example.png
(context path is applied automatically so there is no need to provide it in this mapping)

File structure

template-preview-module/
  decorations/     Here you can edit existing and add more JS Fields decorations.
  includes/        Here you can edit Components/Pages list of templates.
  webresources/    Here you can add and replace your preview images, as well as a code of the preview field.

Module descriptor

version: 1.0.2
dependencies:
  core:
    version: 6.2.18/*
  ui-framework-javascript:
    version: 2.0.1/*