How do I create a Weather Forecast Template?

Templates can display in different languages. This is commanded in the Tag creation state not at the template level

Assets required for setup

To get started you will need weather icons for each weather condition. The icon should all be in the same dimensions for uniformity. We recommend you have weather icons for the following conditions (one icon can be used for multiple conditions):

We recommend each icon be a max file size of 500KB. All icons should be the same size and dimensions. Once you have these you are ready to start.

Weather Forecasts - Getting Started

Log into the Litmus Personalize platform and navigate to the templates section using the top navigation. Once you have navigated to the weather forecast template area, click on new template:

You will now see the template editor. Give the template a name and then, on the right, click on the weather icon tab, here you can upload and map your icons.

Assign each weather icon the correct condition using the radio check boxes. Icons can be used for multiple weather conditions, for example, partly cloudy and mostly cloudy could be assigned to the same icon.

Once you are happy with the mapping, click on the 'Save Mapping' button.

You can now start to design your live weather forecast image. Start by changing the canvas size to the required size via the inspector tab on the right:

You can also upload a background image or assign a background color.

Tip: If you are creating a multi day forecast design, there is the ability in the platform to repeat blocks meaning you can design one day and then duplicate your work as required.

Once the canvas is the right size, begin by adding a block:

Once you have added a block, click on the link icon to connect the live image block to the live forecast feed:

Select 'Content Source' and then unpack the feed:

Select the field from the feed from the options here that you wish to use and click 'done'. Style and position the block as necessary and repeat this process adding all of the live elements required:

The icons visible in the editor will not match the icons you have uploaded. Default images will be visible.

You can change the date format by navigating to the inspector tab and selecting the Text tab. Here you will see the Output selection where you can choose which format the date will appear as.

As you build out the template, use the preview option to see how the live image will look. Use the arrows to view the weather forecast for future days:

Multi-day Forecasts

If you wish to display a multi-day forecast there is an option to repeat the style. On the editor on the right, navigate to the template properties and change the type to "repeated"

You can then choose the direction of the repeated properties and the repeat count to achieve the design you would like.

Your template editor will look like this:

You can preview how your template now look as you did before. Once you are happy save your template.

Select the high resolution option and anti alias to make the image retina with smooth text lines.

Still need help? Contact Us Contact Us