Template sizes

You can configure different sizes for your banner template suitable for various digital and social media platforms.

For this, do the following:

1. Define the paths to the directory with banner templates and the JSON file with the size specification in the system settings.

// ./ewizard/settings.json

{
  "path": {
    "templatesManifest": "templates.json",
    "templates": "templates",
  }
}

• path.templatesManifest: the path to the JSON with size specifications.
  The default value is templates.json

• path.templates: the path to the directory with banner templates.
  The default value is templates.

2. Create a subdirectory with the required template in the templates directory.
   For example, skyscraper.

3. Add the index.vue file with the template markup and the media folder with media assets under the directory you created.
   For example:

<!-- ./templates/my-banner/index.vue -->
<!-- eslint-disable -->

<i18n>
{
  "eng": {
    "title": "<p style='line-height:{lineHeightToken}; text-align: center;'><span style='font-size: {fontSizeToken}; color: {textColorToken}; font-family:{fontFamilyToken};'><b>Lorem ipsum<br>dolor sit</b></span></p>",
    "body": "<p style='line-height:{lineHeightToken}; text-align: center;'><span style='font-size: {fontSizeToken}; color: {textColorToken}; font-family:{fontFamilyToken};'>Lorem ipsum dolor sit<br>amet</span></p>",
    "btn": "<div style='line-height: {lineHeightToken}; text-align: center;'><span style='font-size: {fontSizeToken}; color: {textColorToken}; font-family:{fontFamilyToken};'><b>BUTTON</b></span></div>"
  }
}
</i18n>
<!-- eslint-enable -->

<template>
  <wiz-banner
      class="my-banner"
      :style="{ backgroundColor: $theme.firstBGColor }"
  >
    <wiz-image
        class="pa image"
        :src="$theme.images.placeholder120x96.src"
        :style="{
            width: `${$theme.images.placeholder120x96.width}px`,
            height: `${$theme.images.placeholder120x96.height}px`,
        }"
        :alt="$theme.images.placeholder120x96.alt"
    ></wiz-image>
    <wiz-title
        class="pa title"
        :text="
            $t('title', {
            textColorToken: $theme.firstTitleColor,
            fontSizeToken: $theme.firstSubtitleTextFontSize,
            lineHeightToken: $theme.firstSubtitleTextLineHeight,
            fontFamilyToken: $theme.firstFontFamily,
            })
        "
    ></wiz-title>
    <wiz-text
        class="pa body"
        :text="
            $t('body', {
            textColorToken: $theme.firstTextColor,
            fontSizeToken: $theme.secondTextFontSize,
            lineHeightToken: $theme.secondTextLineHeight,
            fontFamilyToken: $theme.secondFontFamily,
            })
        "
    ></wiz-text>
    <wiz-button
        class="pa button"
        :text="
            $t('btn', {
            textColorToken: $theme.firstButtonTextColor,
            fontSizeToken: $theme.firstButtonTextFontSize,
            lineHeightToken: $theme.firstButtonTextLineHeight,
            fontFamilyToken: $theme.firstFontFamily,
            })
        "
        :style="{
            borderRadius: '12px',
            backgroundColor: $theme.firstButtonBackground,
            width: '108px',
        }"
    ></wiz-button>
  </wiz-banner>
</template>
<script>
export default {
  data: () => ({}),
};
</script>
<style lang="scss" scoped>
.image {
  transform: matrix(1, 0, 0, 1, 0, 0);
}
.title {
  transform: matrix(1, 0, 0, 1, 8, 102);
}
.body {
  transform: matrix(1, 0, 0, 1, 9, 153);
}
.button {
  transform: matrix(1, 0, 0, 1, 6, 198);
}
</style>

4. Register your template in the templates.json file and define its specification.
   As a result, this template is available for re-use in eWizard.

// templates.json

{
  "banners": [
    {
      "id": "skyscraper",
      "name": "Skyscraper",
      "size": {
        "width": 120,
        "height": 240,
        "dpr": 1
      }
    },
    {
      "id": "half-banner",
      "name": "Half banner",
      "size": {
        "width": 234,
        "height": 60,
        "dpr": 1
      },
      "thumbnail": "templates/half-banner/media/images/thumb.jpg",
      "template": "templates/half-banner/index.vue"
    }
  ]
}

Provide the following details for every template object:

Field	Description
id*	A unique identifier of your template.
name*	A user-friendly name of your template.
size*	An object defining the dimensions of the template.
size.width*	The template width.
size.height*	The template height.
size.dpr*	The template device pixel ratio.
thumbnail	A path to the template thumbnail in the templates directory. When no path is provided, eWizard determines the path based on the its id in the default templates directory.
template	A path to the template VUE file in the templates directory. When no path is provided, eWizard determines the path based on its id in the default templates directory.

The fields marked with asterisks (*) are mandatory.