Set up the Template for Image Choice from a List

Image choice from a list allows the end user to select between a set number of images in a drop-down field.

To configure the template, you will need to edit the .html file (see Update the HTML File) and .json file (see Update the params.json File).

HTML File

The HTML file must have a div class that will contain the choice of images offered to the end user:

Copy
<div class="imageContainer">
    <img data-publish-id="image" class="image" src="./img/image1.jpg" alt="main image" />
</div>

JSON File

The params.json file must have a corresponding section that contains the choice of images offered to the end user:

Copy
{    
    "id": "image",
    "label": "image",
    "default": "./img/image1.jpg",
    "type": "image",
    "choices": [
        { "label": "image 1", "value": "./img/image1.jpg" },
        { "label": "image 2", "value": "./img/image2.jpg" },
        { "label": "image 3", "value": "./img/image3.jpg" },
        { "label": "image 4", "value": "./img/image4.jpg" }    
    ]
}