From 06818a96c30b2000bc4896b65d8fb87284260ae5 Mon Sep 17 00:00:00 2001
From: Hypolite Petovan <hypolite@mrpetovan.com>
Date: Sun, 24 Sep 2023 06:47:18 -0400
Subject: [PATCH] Add height allocation support for single images smaller than
 the available width

---
 src/Model/Item.php                    |  4 ++++
 src/Model/Post/Media.php              |  8 +-------
 view/templates/content/image.tpl      | 14 ++++++++++++--
 view/templates/content/image_grid.tpl |  6 +++++-
 4 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/Model/Item.php b/src/Model/Item.php
index 6eba41392..cd6b8a96f 100644
--- a/src/Model/Item.php
+++ b/src/Model/Item.php
@@ -3356,6 +3356,7 @@ class Item
 						'attachment' => $attachment,
 					],
 					'$allocated_height' => Media::getAllocatedHeightByMedia($attachment),
+					'$allocated_max_width' => ($attachment['preview-width'] ?? $attachment['width']) . 'px',
 				]);
 			}, $s);
 		}
@@ -3472,8 +3473,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 = '';
 			}
@@ -3529,6 +3532,7 @@ class Item
 			$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 23370de3f..6987472fd 100644
--- a/src/Model/Post/Media.php
+++ b/src/Model/Post/Media.php
@@ -1173,12 +1173,6 @@ class Media
 	 */
 	public static function getAllocatedHeightByMedia(array $media): string
 	{
-		if (!empty($media['preview-height'])) {
-			$allocated_height = (100 * $media['preview-height'] / $media['preview-width']) . '%';
-		} else {
-			$allocated_height = (100 * $media['height'] / $media['width']) . '%';
-		}
-
-		return $allocated_height;
+		return (100 * $media['height'] / $media['width']) . '%';
 	}
 }
diff --git a/view/templates/content/image.tpl b/view/templates/content/image.tpl
index 9cff3614a..f32d611ef 100644
--- a/view/templates/content/image.tpl
+++ b/view/templates/content/image.tpl
@@ -1,5 +1,11 @@
-{{* $image.widthRatio is only set in the context of Model\Item->makeImageGrid *}}
-<figure class="img-allocated-height" style="width: {{if $image.widthRatio}}{{$image.widthRatio}}%{{else}}auto{{/if}}; padding-bottom: {{$allocated_height}}">
+{{* 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}}">
@@ -8,3 +14,7 @@
 	<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 b0d32d8e1..baf0dfd1d 100644
--- a/view/templates/content/image_grid.tpl
+++ b/view/templates/content/image_grid.tpl
@@ -2,7 +2,11 @@
 	<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`)"}}
+        {{include file="content/image.tpl"
+            image=$image
+            allocated_height="calc(`$image.heightRatio * $image.widthRatio / 100`% - 5px / `$column_size`)"
+            allocated_width="`$image.widthRatio`%"
+        }}
     {{/foreach}}
 	</div>
 {{/foreach}}