Merge pull request #13463 from MrPetovan/task/imagegrid-improvement
Rework image grid to horizontal masonry, allocate space for images to load
This commit is contained in:
Tobias Diekershoff
GitHub
commit
dd7bea4bd1
11 changed files with 149 additions and 48 deletions
|
|
@ -33,6 +33,7 @@ use Friendica\Core\Worker;
|
|||
use Friendica\Database\DBA;
|
||||
use Friendica\DI;
|
||||
use Friendica\Model\Post\Category;
|
||||
use Friendica\Model\Post\Media;
|
||||
use Friendica\Network\HTTPException\InternalServerErrorException;
|
||||
use Friendica\Protocol\Activity;
|
||||
use Friendica\Protocol\ActivityPub;
|
||||
|
|
@ -3273,25 +3274,65 @@ class Item
|
|||
}
|
||||
|
||||
/**
|
||||
* Creates a horizontally masoned gallery with a fixed maximum number of pictures per row.
|
||||
*
|
||||
* For each row, we calculate how much of the total width each picture will take depending on their aspect ratio
|
||||
* and how much relative height it needs to accomodate all pictures next to each other with their height normalized.
|
||||
*
|
||||
* @param array $images
|
||||
* @return string
|
||||
* @throws \Friendica\Network\HTTPException\ServiceUnavailableException
|
||||
*/
|
||||
private static function makeImageGrid(array $images): string
|
||||
{
|
||||
// Image for first column (fc) and second column (sc)
|
||||
$images_fc = [];
|
||||
$images_sc = [];
|
||||
static $column_size = 2;
|
||||
|
||||
for ($i = 0; $i < count($images); $i++) {
|
||||
($i % 2 == 0) ? ($images_fc[] = $images[$i]) : ($images_sc[] = $images[$i]);
|
||||
}
|
||||
$rows = array_map(
|
||||
function (array $row_images) {
|
||||
if ($singleImageInRow = count($row_images) == 1) {
|
||||
$row_images[] = $row_images[0];
|
||||
}
|
||||
|
||||
$widths = [];
|
||||
$heights = [];
|
||||
foreach ($row_images as $image) {
|
||||
$widths[] = $image['attachment']['width'];
|
||||
$heights[] = $image['attachment']['height'];
|
||||
}
|
||||
|
||||
$maxHeight = max($heights);
|
||||
|
||||
// Corrected height preserving aspect ratio when all images on a row are
|
||||
$correctedWidths = [];
|
||||
foreach ($widths as $i => $width) {
|
||||
$correctedWidths[] = $width * $maxHeight / $heights[$i];
|
||||
}
|
||||
|
||||
$totalWidth = array_sum($correctedWidths);
|
||||
|
||||
foreach ($row_images as $i => $image) {
|
||||
$row_images[$i]['gridWidth'] = $correctedWidths[$i];
|
||||
$row_images[$i]['gridHeight'] = $maxHeight;
|
||||
$row_images[$i]['heightRatio'] = 100 * $maxHeight / $correctedWidths[$i];
|
||||
// Ratio of the width of the image relative to the total width of the images on the row
|
||||
$row_images[$i]['widthRatio'] = 100 * $correctedWidths[$i] / $totalWidth;
|
||||
// This magic value will stay constant for each image of any given row and
|
||||
// is ultimately used to determine the height of the row container
|
||||
$row_images[$i]['commonHeightRatio'] = 100 * $correctedWidths[$i] / $totalWidth / ($widths[$i] / $heights[$i]);
|
||||
}
|
||||
|
||||
if ($singleImageInRow) {
|
||||
unset($row_images[1]);
|
||||
}
|
||||
|
||||
return $row_images;
|
||||
},
|
||||
array_chunk($images, $column_size)
|
||||
);
|
||||
|
||||
return Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image_grid.tpl'), [
|
||||
'columns' => [
|
||||
'fc' => $images_fc,
|
||||
'sc' => $images_sc,
|
||||
],
|
||||
'$rows' => $rows,
|
||||
'$column_size' => $column_size,
|
||||
]);
|
||||
}
|
||||
|
||||
|
|
@ -3309,7 +3350,20 @@ class Item
|
|||
if (empty($attachment['preview']) || ($attachment['type'] != Post\Media::IMAGE)) {
|
||||
continue;
|
||||
}
|
||||
$s = str_replace('<a href="' . $attachment['url'] . '"', '<a data-fancybox="' . $uri_id . '" href="' . $attachment['url'] . '"', $s);
|
||||
|
||||
$pattern = '#<a href="' . preg_quote($attachment['url']) . '">(.*?)"></a>#';
|
||||
|
||||
$s = preg_replace_callback($pattern, function () use ($attachment, $uri_id) {
|
||||
return Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image.tpl'), [
|
||||
'$image' => [
|
||||
'src' => $attachment['url'],
|
||||
'uri_id' => $uri_id,
|
||||
'attachment' => $attachment,
|
||||
],
|
||||
'$allocated_height' => Media::getAllocatedHeightByMedia($attachment),
|
||||
'$allocated_max_width' => ($attachment['preview-width'] ?? $attachment['width']) . 'px',
|
||||
]);
|
||||
}, $s);
|
||||
}
|
||||
return $s;
|
||||
}
|
||||
|
|
@ -3424,8 +3478,10 @@ class Item
|
|||
|
||||
if ($attachment['filetype'] == 'image') {
|
||||
$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'])) {
|
||||
$preview_url = Post\Media::getPreviewUrlForId($attachment['id'], Proxy::SIZE_LARGE);
|
||||
$attachment['preview-width'] = Proxy::PIXEL_LARGE;
|
||||
} else {
|
||||
$preview_url = '';
|
||||
}
|
||||
|
|
@ -3469,6 +3525,7 @@ class Item
|
|||
if (self::containsLink($item['body'], $src_url)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
$images[] = ['src' => $src_url, 'preview' => $preview_url, 'attachment' => $attachment, 'uri_id' => $item['uri-id']];
|
||||
}
|
||||
}
|
||||
|
|
@ -3479,6 +3536,8 @@ class Item
|
|||
} elseif (count($images) == 1) {
|
||||
$media = Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image.tpl'), [
|
||||
'$image' => $images[0],
|
||||
'$allocated_height' => Media::getAllocatedHeightByMedia($images[0]['attachment']),
|
||||
'$allocated_max_width' => ($images[0]['attachment']['preview-width'] ?? $images[0]['attachment']['width']) . 'px',
|
||||
]);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1169,4 +1169,15 @@ class Media
|
|||
}
|
||||
return $url . $id;
|
||||
}
|
||||
|
||||
/**
|
||||
* Computes the allocated height value used in the content/image.tpl template based on a post-media record
|
||||
*
|
||||
* @param array $media A post-media record array
|
||||
* @return string
|
||||
*/
|
||||
public static function getAllocatedHeightByMedia(array $media): string
|
||||
{
|
||||
return (100 * $media['height'] / $media['width']) . '%';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -813,12 +813,14 @@ class Profile
|
|||
|
||||
/**
|
||||
* Set the visitor cookies (see remote_user()) for signed HTTP requests
|
||||
(
|
||||
*
|
||||
* @param array $server The content of the $_SERVER superglobal
|
||||
* @return array Visitor contact array
|
||||
* @throws InternalServerErrorException
|
||||
*/
|
||||
public static function addVisitorCookieForHTTPSigner(): array
|
||||
public static function addVisitorCookieForHTTPSigner(array $server): array
|
||||
{
|
||||
$requester = HTTPSignature::getSigner('', $_SERVER);
|
||||
$requester = HTTPSignature::getSigner('', $server);
|
||||
if (empty($requester)) {
|
||||
return [];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ class Photo extends BaseApi
|
|||
throw new NotModifiedException();
|
||||
}
|
||||
|
||||
Profile::addVisitorCookieForHTTPSigner();
|
||||
Profile::addVisitorCookieForHTTPSigner($this->server);
|
||||
|
||||
$customsize = 0;
|
||||
$square_resize = true;
|
||||
|
|
|
|||
|
|
@ -685,22 +685,28 @@ audio {
|
|||
.imagegrid-row {
|
||||
display: -ms-flexbox; /* IE10 */
|
||||
display: flex;
|
||||
margin-top: 1em;
|
||||
/* Both the following values should be the same to ensure consistent margins between images in the grid */
|
||||
column-gap: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.imagegrid-column {
|
||||
-ms-flex: 50%; /* IE10 */
|
||||
flex: 50%;
|
||||
display: -ms-flexbox; /* IE10 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 5px;
|
||||
/* This helps allocating space for image before they loaded, preventing content shifting once they are
|
||||
* Inspired by https://www.smashingmagazine.com/2016/08/ways-to-reduce-content-shifting-on-page-load/
|
||||
* 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.
|
||||
*/
|
||||
figure.img-allocated-height {
|
||||
position: relative;
|
||||
background: center / auto rgba(0, 0, 0, 0.05) url(/images/icons/image.png) no-repeat;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.imagegrid-column img {
|
||||
-ms-flex: 50%; /* IE10 */
|
||||
flex: 50%;
|
||||
figure.img-allocated-height img{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
/**
|
||||
* Image grid settings END
|
||||
|
|
|
|||
|
|
@ -1,5 +1,20 @@
|
|||
{{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>
|
||||
{{else}}
|
||||
<img src="{{$image.src}}" alt="{{$image.attachment.description}}" title="{{$image.attachment.description}}">
|
||||
{{* 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}}">
|
||||
</a>
|
||||
{{else}}
|
||||
<img src="{{$image.src}}" alt="{{$image.attachment.description}}" title="{{$image.attachment.description}}">
|
||||
{{/if}}
|
||||
</figure>
|
||||
|
||||
{{if $allocated_max_width}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<div class="imagegrid-row">
|
||||
<div class="imagegrid-column">
|
||||
{{foreach $columns.fc as $img}}
|
||||
{{include file="content/image.tpl" image=$img}}
|
||||
{{/foreach}}
|
||||
{{foreach $rows as $images}}
|
||||
<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`)"
|
||||
allocated_width="`$image.widthRatio`%"
|
||||
}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
<div class="imagegrid-column">
|
||||
{{foreach $columns.sc as $img}}
|
||||
{{include file="content/image.tpl" image=$img}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
</div>
|
||||
{{/foreach}}
|
||||
|
|
|
|||
|
|
@ -394,3 +394,7 @@ input[type="text"].tt-input {
|
|||
textarea#profile-jot-text:focus + #preview_profile-jot-text, textarea.comment-edit-text:focus + .comment-edit-form .preview {
|
||||
border-color: $link_color;
|
||||
}
|
||||
|
||||
figure.img-allocated-height {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -354,3 +354,7 @@ input[type="text"].tt-input {
|
|||
textarea#profile-jot-text:focus + #preview_profile-jot-text, textarea.comment-edit-text:focus + .comment-edit-form .preview {
|
||||
border-color: $link_color;
|
||||
}
|
||||
|
||||
figure.img-allocated-height {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -240,10 +240,10 @@
|
|||
|
||||
{{if $item.ignore}}
|
||||
<li role="menuitem">
|
||||
<a id="ignore-{{$item.id}}" href="javascript:doIgnoreThread({{$item.id}});" class="btn-link {{$item.ignore.classdo}}" title="{{$item.ignore.do}}"><i class="fa fa-eye-slash" aria-hidden="true"></i> {{$item.ignore.do}}</a>
|
||||
<a id="ignore-{{$item.id}}" href="javascript:doIgnoreThread({{$item.id}});" class="btn-link {{$item.ignore.classdo}}" title="{{$item.ignore.do}}"><i class="fa fa-bell-slash" aria-hidden="true"></i> {{$item.ignore.do}}</a>
|
||||
</li>
|
||||
<li role="menuitem">
|
||||
<a id="unignore-{{$item.id}}" href="javascript:doIgnoreThread({{$item.id}});" class="btn-link {{$item.ignore.classundo}}" title="{{$item.ignore.undo}}"><i class="fa fa-eye" aria-hidden="true"></i> {{$item.ignore.undo}}</a>
|
||||
<a id="unignore-{{$item.id}}" href="javascript:doIgnoreThread({{$item.id}});" class="btn-link {{$item.ignore.classundo}}" title="{{$item.ignore.undo}}"><i class="fa fa-bell" aria-hidden="true"></i> {{$item.ignore.undo}}</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
|
|
|
|||
|
|
@ -381,10 +381,10 @@ as the value of $top_child_total (this is done at the end of this file)
|
|||
|
||||
{{if $item.ignore}}
|
||||
<li role="menuitem">
|
||||
<a id="ignore-{{$item.id}}" href="javascript:doIgnoreThread({{$item.id}});" class="btn-link {{$item.ignore.classdo}}" title="{{$item.ignore.do}}"><i class="fa fa-eye-slash" aria-hidden="true"></i> {{$item.ignore.do}}</a>
|
||||
<a id="ignore-{{$item.id}}" href="javascript:doIgnoreThread({{$item.id}});" class="btn-link {{$item.ignore.classdo}}" title="{{$item.ignore.do}}"><i class="fa fa-bell-slash" aria-hidden="true"></i> {{$item.ignore.do}}</a>
|
||||
</li>
|
||||
<li role="menuitem">
|
||||
<a id="unignore-{{$item.id}}" href="javascript:doIgnoreThread({{$item.id}});" class="btn-link {{$item.ignore.classundo}}" title="{{$item.ignore.undo}}"><i class="fa fa-eye" aria-hidden="true"></i> {{$item.ignore.undo}}</a>
|
||||
<a id="unignore-{{$item.id}}" href="javascript:doIgnoreThread({{$item.id}});" class="btn-link {{$item.ignore.classundo}}" title="{{$item.ignore.undo}}"><i class="fa fa-bell" aria-hidden="true"></i> {{$item.ignore.undo}}</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
|
|
@ -560,10 +560,10 @@ as the value of $top_child_total (this is done at the end of this file)
|
|||
|
||||
{{if $item.ignore}}
|
||||
<li role="menuitem">
|
||||
<a id="ignore-{{$item.id}}" href="javascript:doIgnoreThread({{$item.id}});" class="btn-link {{$item.ignore.classdo}}" title="{{$item.ignore.do}}"><i class="fa fa-eye-slash" aria-hidden="true"></i> {{$item.ignore.do}}</a>
|
||||
<a id="ignore-{{$item.id}}" href="javascript:doIgnoreThread({{$item.id}});" class="btn-link {{$item.ignore.classdo}}" title="{{$item.ignore.do}}"><i class="fa fa-bell-slash" aria-hidden="true"></i> {{$item.ignore.do}}</a>
|
||||
</li>
|
||||
<li role="menuitem">
|
||||
<a id="unignore-{{$item.id}}" href="javascript:doIgnoreThread({{$item.id}});" class="btn-link {{$item.ignore.classundo}}" title="{{$item.ignore.undo}}"><i class="fa fa-eye" aria-hidden="true"></i> {{$item.ignore.undo}}</a>
|
||||
<a id="unignore-{{$item.id}}" href="javascript:doIgnoreThread({{$item.id}});" class="btn-link {{$item.ignore.classundo}}" title="{{$item.ignore.undo}}"><i class="fa fa-bell" aria-hidden="true"></i> {{$item.ignore.undo}}</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue