From 3cc469c0b76114821836474e89ab06e8c1891404 Mon Sep 17 00:00:00 2001 From: Hypolite Petovan Date: Sat, 23 Sep 2023 15:56:49 -0400 Subject: [PATCH] Rework image grid into a horizontal masonry - The new server-based horizontal masonry enables tightly packed image grids even with images of varying aspect ratios - Additionally, the space an image takes is now allocated before it's loaded, reducing content shifting --- src/Model/Item.php | 60 ++++++++++++++++++++++----- view/global.css | 27 ++++++------ view/templates/content/image.tpl | 4 +- view/templates/content/image_grid.tpl | 20 ++++----- 4 files changed, 77 insertions(+), 34 deletions(-) diff --git a/src/Model/Item.php b/src/Model/Item.php index de8c2e6da6..8b0fa29a25 100644 --- a/src/Model/Item.php +++ b/src/Model/Item.php @@ -3268,25 +3268,64 @@ 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, ]); } @@ -3464,6 +3503,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']]; } } diff --git a/view/global.css b/view/global.css index 714bb55dbd..054ac05159 100644 --- a/view/global.css +++ b/view/global.css @@ -685,22 +685,25 @@ 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. + */ +.imagegrid-row figure { + position: relative; } - -.imagegrid-column img { - -ms-flex: 50%; /* IE10 */ - flex: 50%; +.imagegrid-row figure img{ + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; } /** * Image grid settings END diff --git a/view/templates/content/image.tpl b/view/templates/content/image.tpl index 00b1aac100..16610722cc 100644 --- a/view/templates/content/image.tpl +++ b/view/templates/content/image.tpl @@ -1,5 +1,7 @@ {{if $image.preview}} -{{$image.attachment.description}} + + {{$image.attachment.description}} + {{else}} {{$image.attachment.description}} {{/if}} diff --git a/view/templates/content/image_grid.tpl b/view/templates/content/image_grid.tpl index 95e49ee3e1..35e9324aec 100644 --- a/view/templates/content/image_grid.tpl +++ b/view/templates/content/image_grid.tpl @@ -1,12 +1,10 @@ -
-
- {{foreach $columns.fc as $img}} - {{include file="content/image.tpl" image=$img}} - {{/foreach}} +{{foreach $rows as $images}} +
+ {{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}} +
+ {{/foreach}}
-
- {{foreach $columns.sc as $img}} - {{include file="content/image.tpl" image=$img}} - {{/foreach}} -
-
\ No newline at end of file +{{/foreach}} -- 2.39.5