Preview:
<div class="{{ margin_top }}">
{{ image }}

    {{ if
            (column_layout == '66/33' AND column_number == '1') OR
            (column_layout == '60/40' AND column_number == '1') OR
            (column_layout == '40/60' AND column_number == '2') OR
            (column_layout == '33/66' AND column_number == '2')
    }}
        {{# large  sized image #}}
        <picture class="block w-full" >
            <source
                data-srcset="{{ glide:url width="900" format="webp" }}"
                type="image/webp">

            <source
                data-srcset="{{ glide:url width="900" }}"
                type="image/jpeg"
            >
            <img
                class="block object-cover w-full lazyload"
                data-src="{{ glide:url width="900" }}"
                alt="{{ title }}"
                height="{{ height }}"
                width="{{ width }}"
            >
            <noscript>
                <img
                    class="block object-cover w-full"
                    src="{{ glide:url width="900" }}"
                    alt="{{ title }}"
                    height="{{ height }}"
                    width="{{ width }}"
            >
            </noscript>
        </picture>

    {{ elseif
        (column_layout == '66/33' AND column_number == '2') OR
        (column_layout == '60/40' AND column_number == '2') OR
        (column_layout == '40/60' AND column_number == '1') OR
        (column_layout == '33/66' AND column_number == '1')
    }}
        {{# small  sized image #}}
        <picture class="block w-full" >
            <source
                data-srcset="{{ glide:url width="600" format="webp" }}"
                type="image/webp">

            <source
                data-srcset="{{ glide:url width="600" }}"
                type="image/jpeg"
            >
            <img
                class="block object-cover w-full lazyload"
                data-src="{{ glide:url width="600" }}"
                alt="{{ title }}"
                height="{{ height }}"
                width="{{ width }}"
            >
            <noscript>
                <img
                    class="block object-cover w-full"
                    src="{{ glide:url width="600" height="400" fit="crop_focal" }}"
                    alt="{{ title }}"
                    height="600"
                    width="400"
            >
            </noscript>
        </picture>

    {{ else }}
        {{# medium  sized image #}}
        <picture class="block w-full" >
            <source
                data-srcset="{{ glide:url width="900" format="webp" }}"
                type="image/webp">

            <source
                data-srcset="{{ glide:url width="900" }}"
                type="image/jpeg"
            >
            <img
                class="block object-cover w-full lazyload"
                data-src="{{ glide:url width="900" }}"
                alt="{{ title }}"
                height="{{ height }}"
                width="{{ width }}"
            >
            <noscript>
                <img
                    class="block object-cover w-full"
                    src="{{ glide:url width="900" }}"
                    alt="{{ title }}"
                    height="{{ height }}"
                    width="{{ width }}"
            >
            </noscript>
        </picture>
    {{ endif }}

</div>
{{ /image }}
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter