Add height allocation to single post attached images

- Force single images to expand to the total width of the post

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,
 			]);
 		}
 

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

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>

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

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

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