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

diff --git a/src/Model/Item.php b/src/Model/Item.php
index de8c2e6da62900171113983fb68c48f1dd7ace8a..8b0fa29a25cf4f4c79837ba6bf2775585f747c64 100644 (file)
--- 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 714bb55dbd7f029aade134a669d1275f7cbb889d..054ac05159f8cb2e1e85b478e805566433b07dce 100644 (file)
--- 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 00b1aac100ca38880e39b7160011088c002a3824..16610722ccc753079da38313cead3c80d842e723 100644 (file)
--- a/view/templates/content/image.tpl
+++ b/view/templates/content/image.tpl
@@ -1,5 +1,7 @@
 {{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}}">
 {{/if}}

diff --git a/view/templates/content/image_grid.tpl b/view/templates/content/image_grid.tpl
index 95e49ee3e186dbabf18c8e59c0a7660e512d4612..35e9324aec187351837432549d9842005969c57c 100644 (file)
--- a/view/templates/content/image_grid.tpl
+++ b/view/templates/content/image_grid.tpl
@@ -1,12 +1,10 @@
-<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 *}}
+               <figure style="width: {{$image.widthRatio}}%; padding-bottom: calc({{$image.heightRatio * $image.widthRatio / 100}}% - 5px / 2)">
+            {{include file="content/image.tpl" image=$image}}
+               </figure>
+    {{/foreach}}
        </div>
-       <div class="imagegrid-column">
-               {{foreach $columns.sc as $img}}
-                               {{include file="content/image.tpl" image=$img}}
-               {{/foreach}}
-       </div>
-</div>
\ No newline at end of file
+{{/foreach}}