Imagine you want to display an image on your website. Easy.
Imagine you want to open the bigger version in a lightbox. Easy when using UIkit (or any other framework).
Imagine you only want to add the lightbox link only if there is actually a larger version than the one displayed. Easy when using LATTE ?
<div
n:if="$img = $page->image"
class="uk-background-muted uk-padding-small uk-text-center"
uk-lightbox
>
<a
n:tag-if="$img->width > 800 || $img->height > 400"
href="{$img->maxSize(1920,1920)->webp->url}"
>
<img src="{$img->size(800,400)->webp->url}" alt="{$page->title}" />
</a>
</div>
This takes care of so many things with so little and clean code:
the n:if on the outer div makes sure that we don't get any errors if no image is uploaded
the n:tag-if makes sure that the anchor wrapper is only added if the original image is larger than the thumbnail
Note that you can assign $img directly in the n:if condition. No need for an additional {var $img = $page->image} at the top. For some that might be too short, but I like it ?