oldkid/friendica
1
0
Fork 0
mirror of https://git.sekbaer.de/Friendica/friendica.git synced 2025-06-16 20:05:14 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add height allocation support for single images smaller than the available width

Browse source
This commit is contained in:
Hypolite Petovan 2023-09-24 06:47:18 -04:00
parent c4657c4661
commit 06818a96c3
4 changed files with 22 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

14
view/templates/content/image.tpl
View file

@ -1,5 +1,11 @@
{{* $image.widthRatio is only set in the context of Model\Item->makeImageGrid *}}
<figure class="img-allocated-height" style="width: {{if $image.widthRatio}}{{$image.widthRatio}}%{{else}}auto{{/if}}; padding-bottom: {{$allocated_height}}">
{{* 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="{{$image.uri_id}}" href="{{$image.attachment.url}}">
<img src="{{$image.preview}}" alt="{{$image.attachment.description}}" title="{{$image.attachment.description}}">
@ -8,3 +14,7 @@
<img src="{{$image.src}}" alt="{{$image.attachment.description}}" title="{{$image.attachment.description}}">
{{/if}}
</figure>
{{if $allocated_max_width}}
</div>
{{/if}}

6
view/templates/content/image_grid.tpl
View file

@ -2,7 +2,11 @@
<div class="imagegrid-row" style="height: {{$images[0].commonHeightRatio}}%">
{{foreach $images as $image}}
{{* The absolute pixel value in the calc() should be mirrored from the .imagegrid-row column-gap value *}}
{{include file="content/image.tpl" image=$image allocated_height="calc(`$image.heightRatio * $image.widthRatio / 100`% - 5px / `$column_size`)"}}
{{include file="content/image.tpl"
image=$image
allocated_height="calc(`$image.heightRatio * $image.widthRatio / 100`% - 5px / `$column_size`)"
allocated_width="`$image.widthRatio`%"
}}
{{/foreach}}
</div>
{{/foreach}}