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

@@ -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']];
 			}
 		}

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

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}}

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 $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>
+{{/foreach}}