clones/friendica
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Model/Item.php
View File

@ -3356,6 +3356,7 @@ class Item
'attachment' => $attachment, 'attachment' => $attachment,
], ],
'$allocated_height' => Media::getAllocatedHeightByMedia($attachment), '$allocated_height' => Media::getAllocatedHeightByMedia($attachment),
'$allocated_max_width' => ($attachment['preview-width'] ?? $attachment['width']) . 'px',
]); ]);
}, $s); }, $s);
} }
@ -3472,8 +3473,10 @@ class Item
if ($attachment['filetype'] == 'image') { if ($attachment['filetype'] == 'image') {
$preview_url = Post\Media::getPreviewUrlForId($attachment['id'], ($attachment['width'] > $attachment['height']) ? Proxy::SIZE_MEDIUM : Proxy::SIZE_LARGE); $preview_url = Post\Media::getPreviewUrlForId($attachment['id'], ($attachment['width'] > $attachment['height']) ? Proxy::SIZE_MEDIUM : Proxy::SIZE_LARGE);
$attachment['preview-width'] = ($attachment['width'] > $attachment['height']) ? Proxy::PIXEL_MEDIUM : Proxy::PIXEL_LARGE;
} elseif (!empty($attachment['preview'])) { } elseif (!empty($attachment['preview'])) {
$preview_url = Post\Media::getPreviewUrlForId($attachment['id'], Proxy::SIZE_LARGE); $preview_url = Post\Media::getPreviewUrlForId($attachment['id'], Proxy::SIZE_LARGE);
$attachment['preview-width'] = Proxy::PIXEL_LARGE;
} else { } else {
$preview_url = ''; $preview_url = '';
} }
@ -3529,6 +3532,7 @@ class Item
$media = Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image.tpl'), [ $media = Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image.tpl'), [
'$image' => $images[0], '$image' => $images[0],
'$allocated_height' => Media::getAllocatedHeightByMedia($images[0]['attachment']), '$allocated_height' => Media::getAllocatedHeightByMedia($images[0]['attachment']),
'$allocated_max_width' => ($images[0]['attachment']['preview-width'] ?? $images[0]['attachment']['width']) . 'px',
]); ]);
} }

8
src/Model/Post/Media.php
View File

@ -1173,12 +1173,6 @@ class Media
*/ */
public static function getAllocatedHeightByMedia(array $media): string public static function getAllocatedHeightByMedia(array $media): string
{ {
if (!empty($media['preview-height'])) { return (100 * $media['height'] / $media['width']) . '%';
$allocated_height = (100 * $media['preview-height'] / $media['preview-width']) . '%';
} else {
$allocated_height = (100 * $media['height'] / $media['width']) . '%';
}
return $allocated_height;
} }
} }

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

@ -1,5 +1,11 @@
{{* $image.widthRatio is only set in the context of Model\Item->makeImageGrid *}} {{* The padding-top height allocation trick only works if the <figure> fills its parent's width completely or with flex. 🤷‍♂️
<figure class="img-allocated-height" style="width: {{if $image.widthRatio}}{{$image.widthRatio}}%{{else}}auto{{/if}}; padding-bottom: {{$allocated_height}}"> 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}} {{if $image.preview}}
<a data-fancybox="{{$image.uri_id}}" href="{{$image.attachment.url}}"> <a data-fancybox="{{$image.uri_id}}" href="{{$image.attachment.url}}">
<img src="{{$image.preview}}" alt="{{$image.attachment.description}}" title="{{$image.attachment.description}}"> <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}}"> <img src="{{$image.src}}" alt="{{$image.attachment.description}}" title="{{$image.attachment.description}}">
{{/if}} {{/if}}
</figure> </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}}%"> <div class="imagegrid-row" style="height: {{$images[0].commonHeightRatio}}%">
{{foreach $images as $image}} {{foreach $images as $image}}
{{* The absolute pixel value in the calc() should be mirrored from the .imagegrid-row column-gap value *}} {{* 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}} {{/foreach}}
</div> </div>
{{/foreach}} {{/foreach}}