<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 }}
Preview:
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