image - Image Selector

---

The responsive_images object is optional but recommended. If used and custom images are not uploaded by the client, Miva will generate the proper image sizes which can then output in the picture element so the correct sized image always outputs.

Example

{
    "code": "PROPERTY_CODE",
    "prompt": "PROPERTY_PROMPT",
    "type": "image",
    "width": "1600",
    "height": "580",
    "responsive_images": [
        {
            "code": "mobile",
            "prompt": "Mobile",
            "width": "344",
            "height": "320"
        },
        {
            "code": "tablet",
            "prompt": "Tablet",
            "width": "720",
            "height": "320"
        }
    ]
}

Responsive Image Generation

While the UI for Page Builder image component supports customers uploading their own custom images for mobile and tablet sized images, not all customers will do so. Miva has a fallback mechanism built into it, where if the tablet/mobile images are not uploaded by the customer, Miva will auto generate them based on the image sizes defined in the responsive images object for each image. This means that you’ll always have a mobile and tablet image to use for the tag.

<mvt:if expr="NOT ISNULL l.settings:instance:image">
    <picture slot="image">
        <mvt:if expr="NOT ISNULL l.settings:instance:image:responsive_images:mobile">
            <source media="(max-width: 640px)" srcset="&mvte:instance:image:responsive_images:mobile;">
        </mvt:if>
        <mvt:if expr="NOT ISNULL l.settings:instance:image:responsive_images:tablet">
            <source media="(max-width: 960px)" srcset="&mvte:instance:image:responsive_images:tablet;">
        </mvt:if>
        <source media="(min-width: 960px)" srcset="&mvte:instance:image:image;">
        <img src="&mvte:instance:image:image;" alt="&mvte:instance:image:alt;" loading="&mvte:instance:loading;" fetchpriority="&mvte:fetchpriority;">
    </picture>
</mvt:if>