friendica/view/templates/content/image/single_with_height_allocation.tpl
Hypolite Petovan 163a85c78f Add new horizontal masonry and image height allocation
- Move image templates to content/image sub-folder
2023-10-03 19:58:52 -04:00

20 lines
892 B
Smarty
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{{* 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}}">
{{if $image->preview}}
<a data-fancybox="uri-id-{{$image->uriId}}" href="{{$image->url}}">
<img src="{{$image->preview}}" alt="{{$image->description}}" title="{{$image->description}}" loading="lazy">
</a>
{{else}}
<img src="{{$image->url}}" alt="{{$image->description}}" title="{{$image->description}}" loading="lazy">
{{/if}}
</figure>
{{if $allocated_max_width}}
</div>
{{/if}}