diff --git a/src/Model/Item.php b/src/Model/Item.php
index 41aae0413..5d2f7ca3c 100644
--- a/src/Model/Item.php
+++ b/src/Model/Item.php
@@ -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',
 			]);
 		}
 
diff --git a/src/Model/Post/Media.php b/src/Model/Post/Media.php
index e0c8d3561..8a2c731a2 100644
--- a/src/Model/Post/Media.php
+++ b/src/Model/Post/Media.php
@@ -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']) . '%';
+	}
 }
diff --git a/src/Model/Profile.php b/src/Model/Profile.php
index b80c83881..9c7aab54a 100644
--- a/src/Model/Profile.php
+++ b/src/Model/Profile.php
@@ -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 [];
 		}
diff --git a/src/Module/Photo.php b/src/Module/Photo.php
index c8e0656d2..be2408edf 100644
--- a/src/Module/Photo.php
+++ b/src/Module/Photo.php
@@ -77,7 +77,7 @@ class Photo extends BaseApi
 			throw new NotModifiedException();
 		}
 
-		Profile::addVisitorCookieForHTTPSigner();
+		Profile::addVisitorCookieForHTTPSigner($this->server);
 
 		$customsize = 0;
 		$square_resize = true;
diff --git a/view/global.css b/view/global.css
index 714bb55db..25fe653b7 100644
--- a/view/global.css
+++ b/view/global.css
@@ -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
diff --git a/view/templates/content/image.tpl b/view/templates/content/image.tpl
index 00b1aac10..f32d611ef 100644
--- a/view/templates/content/image.tpl
+++ b/view/templates/content/image.tpl
@@ -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}}
diff --git a/view/templates/content/image_grid.tpl b/view/templates/content/image_grid.tpl
index 95e49ee3e..baf0dfd1d 100644
--- a/view/templates/content/image_grid.tpl
+++ b/view/templates/content/image_grid.tpl
@@ -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>
\ No newline at end of file
+{{/foreach}}
diff --git a/view/theme/frio/scheme/black.css b/view/theme/frio/scheme/black.css
index debf9d99b..561f708a8 100644
--- a/view/theme/frio/scheme/black.css
+++ b/view/theme/frio/scheme/black.css
@@ -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);
+}
diff --git a/view/theme/frio/scheme/dark.css b/view/theme/frio/scheme/dark.css
index add36fff1..434681c55 100644
--- a/view/theme/frio/scheme/dark.css
+++ b/view/theme/frio/scheme/dark.css
@@ -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);
+}
diff --git a/view/theme/frio/templates/search_item.tpl b/view/theme/frio/templates/search_item.tpl
index 2d130cab8..bdc2ca384 100644
--- a/view/theme/frio/templates/search_item.tpl
+++ b/view/theme/frio/templates/search_item.tpl
@@ -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}}
 
diff --git a/view/theme/frio/templates/wall_thread.tpl b/view/theme/frio/templates/wall_thread.tpl
index 16494e1c0..00e738d9a 100644
--- a/view/theme/frio/templates/wall_thread.tpl
+++ b/view/theme/frio/templates/wall_thread.tpl
@@ -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}}