Friendica/friendica-github
1
0
Fork 0
mirror of https://github.com/friendica/friendica synced 2024-11-17 22:23:41 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add height allocation to single post attached images

Browse source 
- Force single images to expand to the total width of the post
This commit is contained in:
Hypolite Petovan 2023-09-23 22:20:00 -04:00
parent fad760f46a
commit 86141eb363
6 changed files with 22 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/Model/Item.php
View file

@ -3325,7 +3325,8 @@ class Item
);
return Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image_grid.tpl'), [
'rows' => $rows,
'$rows' => $rows,
'$column_size' => $column_size,
]);
}
@ -3512,8 +3513,15 @@ class Item
if (count($images) > 1) {
$media = self::makeImageGrid($images);
} elseif (count($images) == 1) {
if (!empty($images[0]['attachment']['preview-height'])) {
$allocated_height = (100 * $images[0]['attachment']['preview-height'] / $images[0]['attachment']['preview-width']) . '%';
} else {
$allocated_height = (100 * $images[0]['attachment']['height'] / $images[0]['attachment']['width']) . '%';
}
$media = Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image.tpl'), [
'$image' => $images[0],
'$allocated_height' => $allocated_height,
]);
}

5
view/global.css
View file

@ -695,16 +695,17 @@ audio {
* Please note: The space is effectively allocated using padding-bottom using the image ratio as a value.
* In the image grid, this ratio isn't known in advance so no value is set in the stylesheet.
*/
.imagegrid-row figure {
figure.img-allocated-height {
position: relative;
background: center / auto rgba(0, 0, 0, 0.05) url(/images/icons/image.png) no-repeat;
}
.imagegrid-row figure img{
figure.img-allocated-height img{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
}
/**
* Image grid settings END

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

@ -1,7 +1,10 @@
{{* $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}}">
{{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}}">
</a>
<a data-fancybox="{{$image.uri_id}}" href="{{$image.attachment.url}}">
<img src="{{$image.preview}}" alt="{{$image.attachment.description}}" title="{{$image.attachment.description}}">
</a>
{{else}}
<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}}
</figure>

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

@ -2,9 +2,7 @@
<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 *}}
<figure style="width: {{$image.widthRatio}}%; padding-bottom: calc({{$image.heightRatio * $image.widthRatio / 100}}% - 5px / 2)">
{{include file="content/image.tpl" image=$image}}
</figure>
{{include file="content/image.tpl" image=$image allocated_height="calc(`$image.heightRatio * $image.widthRatio / 100`% - 5px / `$column_size`)"}}
{{/foreach}}
</div>
{{/foreach}}

2
view/theme/frio/scheme/black.css
View file

@ -395,6 +395,6 @@ textarea#profile-jot-text:focus + #preview_profile-jot-text, textarea.comment-ed
border-color: $link_color;
}
.imagegrid-row figure {
figure.img-allocated-height {
background-color: rgba(255, 255, 255, 0.15);
}

2
view/theme/frio/scheme/dark.css
View file

@ -355,6 +355,6 @@ textarea#profile-jot-text:focus + #preview_profile-jot-text, textarea.comment-ed
border-color: $link_color;
}
.imagegrid-row figure {
figure.img-allocated-height {
background-color: rgba(255, 255, 255, 0.05);
}