From 86141eb363ff7f82fefab94a4ba671013534ef35 Mon Sep 17 00:00:00 2001
From: Hypolite Petovan <hypolite@mrpetovan.com>
Date: Sat, 23 Sep 2023 22:20:00 -0400
Subject: [PATCH] Add height allocation to single post attached images

- Force single images to expand to the total width of the post
---
 src/Model/Item.php                    | 10 +++++++++-
 view/global.css                       |  5 +++--
 view/templates/content/image.tpl      | 11 +++++++----
 view/templates/content/image_grid.tpl |  4 +---
 view/theme/frio/scheme/black.css      |  2 +-
 view/theme/frio/scheme/dark.css       |  2 +-
 6 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/Model/Item.php b/src/Model/Item.php
index 8b0fa29a2..31cc0ac87 100644
--- a/src/Model/Item.php
+++ b/src/Model/Item.php
@@ -3325,7 +3325,8 @@ class Item
 		);
 
 		return Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image_grid.tpl'), [
-			'rows' => $rows,
+			'$rows' => $rows,
+			'$column_size' => $column_size,
 		]);
 	}
 
@@ -3512,8 +3513,15 @@ class Item
 		if (count($images) > 1) {
 			$media = self::makeImageGrid($images);
 		} elseif (count($images) == 1) {
+			if (!empty($images[0]['attachment']['preview-height'])) {
+				$allocated_height = (100 * $images[0]['attachment']['preview-height'] / $images[0]['attachment']['preview-width']) . '%';
+			} else {
+				$allocated_height = (100 * $images[0]['attachment']['height'] / $images[0]['attachment']['width']) . '%';
+			}
+
 			$media = Renderer::replaceMacros(Renderer::getMarkupTemplate('content/image.tpl'), [
 				'$image' => $images[0],
+				'$allocated_height' => $allocated_height,
 			]);
 		}
 
diff --git a/view/global.css b/view/global.css
index 6bee34b8b..247a9694f 100644
--- a/view/global.css
+++ b/view/global.css
@@ -695,16 +695,17 @@ audio {
  * 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 {
+figure.img-allocated-height {
 	position: relative;
 	background: center / auto rgba(0, 0, 0, 0.05) url(/images/icons/image.png) no-repeat;
 }
-.imagegrid-row figure img{
+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 16610722c..9cff3614a 100644
--- a/view/templates/content/image.tpl
+++ b/view/templates/content/image.tpl
@@ -1,7 +1,10 @@
+{{* $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}}">
 {{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}}">
+	<img src="{{$image.src}}" alt="{{$image.attachment.description}}" title="{{$image.attachment.description}}">
 {{/if}}
+</figure>
diff --git a/view/templates/content/image_grid.tpl b/view/templates/content/image_grid.tpl
index 35e9324ae..b0d32d8e1 100644
--- a/view/templates/content/image_grid.tpl
+++ b/view/templates/content/image_grid.tpl
@@ -2,9 +2,7 @@
 	<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>
+        {{include file="content/image.tpl" image=$image allocated_height="calc(`$image.heightRatio * $image.widthRatio / 100`% - 5px / `$column_size`)"}}
     {{/foreach}}
 	</div>
 {{/foreach}}
diff --git a/view/theme/frio/scheme/black.css b/view/theme/frio/scheme/black.css
index 21a40f1c7..561f708a8 100644
--- a/view/theme/frio/scheme/black.css
+++ b/view/theme/frio/scheme/black.css
@@ -395,6 +395,6 @@ textarea#profile-jot-text:focus + #preview_profile-jot-text, textarea.comment-ed
 	border-color: $link_color;
 }
 
-.imagegrid-row figure {
+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 29b2782da..434681c55 100644
--- a/view/theme/frio/scheme/dark.css
+++ b/view/theme/frio/scheme/dark.css
@@ -355,6 +355,6 @@ textarea#profile-jot-text:focus + #preview_profile-jot-text, textarea.comment-ed
 	border-color: $link_color;
 }
 
-.imagegrid-row figure {
+figure.img-allocated-height {
 	background-color: rgba(255, 255, 255, 0.05);
 }