2023-09-24 06:47:18 -04:00
|
|
|
|
{{* The padding-top height allocation trick only works if the <figure> fills its parent's width completely or with flex. 🤷♂️
|
|
|
|
|
As a result, we need to add a wrapping element for non-flex (non-image grid) environments, mostly single-image cases.
|
|
|
|
|
*}}
|
|
|
|
|
{{if $allocated_max_width}}
|
|
|
|
|
<div style="max-width: {{$allocated_max_width|default:"auto"}};">
|
|
|
|
|
{{/if}}
|
|
|
|
|
|
|
|
|
|
<figure class="img-allocated-height" style="width: {{$allocated_width|default:"auto"}}; padding-bottom: {{$allocated_height}}">
|
2021-04-28 15:05:46 -04:00
|
|
|
|
{{if $image.preview}}
|
2023-09-23 22:20:00 -04:00
|
|
|
|
<a data-fancybox="{{$image.uri_id}}" href="{{$image.attachment.url}}">
|
|
|
|
|
<img src="{{$image.preview}}" alt="{{$image.attachment.description}}" title="{{$image.attachment.description}}">
|
|
|
|
|
</a>
|
2021-04-28 15:05:46 -04:00
|
|
|
|
{{else}}
|
2023-09-23 22:20:00 -04:00
|
|
|
|
<img src="{{$image.src}}" alt="{{$image.attachment.description}}" title="{{$image.attachment.description}}">
|
2021-04-28 15:05:46 -04:00
|
|
|
|
{{/if}}
|
2023-09-23 22:20:00 -04:00
|
|
|
|
</figure>
|
2023-09-24 06:47:18 -04:00
|
|
|
|
|
|
|
|
|
{{if $allocated_max_width}}
|
|
|
|
|
</div>
|
|
|
|
|
{{/if}}
|