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.
Log into the Kickdynamic 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 you 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 colour.
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:
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:
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.