Banner structure

Use the structure.json file to define the banner structure. This file includes the banners array where each banner is an object defined by an ID.

For example, a structure.json file with two banners, skyscraper and half-banner:

json

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

Each banner object includes the following fields:

Field	Type	Description
`id`*	String	The banner size identifier.
`name`*	String	The user-friendly name for the size displayed in the eWizard platform.
`optimizeAssets`	Boolean \| Object	Turns on/off all banner optimizations.
`optimizeAssets.fonts`	Boolean	We recommend using Google Fonts as a priority. If local fonts are present, they're automatically converted to WOFF2 format during export.
`optimizeAssets.images`	Boolean	Images are compressed to 2x their rendered resolution (without exceeding the original dimensions) and converted to a web-optimized quality level.
`optimizeAssets.removeUnused`	Boolean	Unused fonts, images, and videos are automatically removed from the final banner archive to minimize file size.
`optimizeAssets.videos`	Boolean	Videos are transcoded to MP4 format and scaled to their rendered resolution (up to the original size), with quality settings adjusted for web performance.
`size`*	Object	The banner size dimensions.
`size.width`*	Number	The banner width in pixels.
`size.height`*	Number	The banner height in pixels.
`size.dpr`*	Number	The device pixel ratio for the given banner template size.
`thumbnail`	String	A path to the banner size thumbnail. If the path isn't defined, eWizard determines the path based on the banner `id` in the default `banners` directory. For example, `banners/skyskraper/media/thumbnail.png`.
`template`	String	A path to the banner template of the required size. If the path isn't defined, eWizard determines the path based on the banner `id` in the default `banners` directory. For example, `banners/skyscraper/index.vue`.

The fields marked with asterisks (*) are required.

Plugin

You can access the list of banners and their settings using the structure plugin in the banner files of your banner project.

The banner structure plugin includes the getBanners method. Use this method to get nested data of all banners.

this.$structure.getBanners()

Banner structure ​

Plugin ​

Plugin