Revert "Merge pull request #13463 from MrPetovan/task/imagegrid-improvement"

This reverts commit dd7bea4bd1, reversing
changes made to ce16cd12ec.

src/Model/Item.php

@@ -33,7 +33,6 @@ 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;
@@ -3274,65 +3273,25 @@ 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
 	{
-		static $column_size = 2;
+		// Image for first column (fc) and second column (sc)
+		$images_fc = [];
+		$images_sc = [];
 
-		$rows = array_map(
+		for ($i = 0; $i < count($images); $i++) {
-			function (array $row_images) {
+			($i % 2 == 0) ? ($images_fc[] = $images[$i]) : ($images_sc[] = $images[$i]);
-				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'), [
-			'$rows' => $rows,
+			'columns' => [
-			'$column_size' => $column_size,
+				'fc' => $images_fc,
+				'sc' => $images_sc,
+			],
 		]);
 	}
 
@@ -3350,20 +3309,7 @@ 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;
 	}
@@ -3478,10 +3424,8 @@ 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 = '';
 			}
@@ -3525,7 +3469,6 @@ class Item
 				if (self::containsLink($item['body'], $src_url)) {
 					continue;
 				}
-
 				$images[] = ['src' => $src_url, 'preview' => $preview_url, 'attachment' => $attachment, 'uri_id' => $item['uri-id']];
 			}
 		}
@@ -3536,8 +3479,6 @@ 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',
 			]);
 		}
 

src/Model/Post/Media.php

@@ -1169,15 +1169,4 @@ 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']) . '%';
-	}
 }

src/Model/Profile.php

@@ -813,14 +813,12 @@ 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 $server): array
+	public static function addVisitorCookieForHTTPSigner(): array
 	{
-		$requester = HTTPSignature::getSigner('', $server);
+		$requester = HTTPSignature::getSigner('', $_SERVER);
 		if (empty($requester)) {
 			return [];
 		}

src/Module/Photo.php

@@ -77,7 +77,7 @@ class Photo extends BaseApi
 			throw new NotModifiedException();
 		}
 
-		Profile::addVisitorCookieForHTTPSigner($this->server);
+		Profile::addVisitorCookieForHTTPSigner();
 
 		$customsize = 0;
 		$square_resize = true;

view/global.css

@@ -685,28 +685,22 @@ audio {
 .imagegrid-row {
 	display: -ms-flexbox; /* IE10 */
 	display: flex;
-	/* Both the following values should be the same to ensure consistent margins between images in the grid */
+	margin-top: 1em;
 	column-gap: 5px;
-	margin-top: 5px;
 }
 
-/* This helps allocating space for image before they loaded, preventing content shifting once they are
+.imagegrid-column {
- * Inspired by https://www.smashingmagazine.com/2016/08/ways-to-reduce-content-shifting-on-page-load/
+	-ms-flex: 50%; /* IE10 */
- * Please note: The space is effectively allocated using padding-bottom using the image ratio as a value.
+	flex: 50%;
- * In the image grid, this ratio isn't known in advance so no value is set in the stylesheet.
+	display: -ms-flexbox; /* IE10 */
- */
+	display: flex;
-figure.img-allocated-height {
+	flex-direction: column;
-	position: relative;
+	row-gap: 5px;
-	background: center / auto rgba(0, 0, 0, 0.05) url(/images/icons/image.png) no-repeat;
-	margin: 0;
 }
-figure.img-allocated-height img{
+
-	position: absolute;
+.imagegrid-column img {
-	top: 0;
+	-ms-flex: 50%; /* IE10 */
-	right: 0;
+	flex: 50%;
-	bottom: 0;
-	left: 0;
-	width: 100%;
 }
 /**
  * Image grid settings END

view/templates/content/image.tpl

@@ -1,20 +1,5 @@
-{{* 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}}">
+<a data-fancybox="{{$image.uri_id}}" href="{{$image.attachment.url}}"><img src="{{$image.preview}}" alt="{{$image.attachment.description}}" title="{{$image.attachment.description}}"></a>
-		<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}}">
+<img src="{{$image.src}}" alt="{{$image.attachment.description}}" title="{{$image.attachment.description}}">
-{{/if}}
-</figure>
-
-{{if $allocated_max_width}}
-</div>
 {{/if}}

view/templates/content/image_grid.tpl

@@ -1,12 +1,12 @@
-{{foreach $rows as $images}}
+<div class="imagegrid-row">
-	<div class="imagegrid-row" style="height: {{$images[0].commonHeightRatio}}%">
+	<div class="imagegrid-column">
-	{{foreach $images as $image}}
+		{{foreach $columns.fc as $img}}
-		{{* The absolute pixel value in the calc() should be mirrored from the .imagegrid-row column-gap value *}}
+				{{include file="content/image.tpl" image=$img}}
-        {{include file="content/image.tpl"
+		{{/foreach}}
-            image=$image
-            allocated_height="calc(`$image.heightRatio * $image.widthRatio / 100`% - 5px / `$column_size`)"
-            allocated_width="`$image.widthRatio`%"
-        }}
-    {{/foreach}}
 	</div>
-{{/foreach}}
+	<div class="imagegrid-column">
+		{{foreach $columns.sc as $img}}
+				{{include file="content/image.tpl" image=$img}}
+		{{/foreach}}
+	</div>
+</div>

view/theme/frio/scheme/black.css

@@ -394,7 +394,3 @@ 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);
-}

view/theme/frio/scheme/dark.css

@@ -354,7 +354,3 @@ 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);
-}

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-bell-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-eye-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-bell" 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-eye" aria-hidden="true"></i> {{$item.ignore.undo}}</a>
 							</li>
 						{{/if}}
 

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-bell-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-eye-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-bell" 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-eye" 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-bell-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-eye-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-bell" 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-eye" aria-hidden="true"></i> {{$item.ignore.undo}}</a>
 							</li>
 							{{/if}}