Add height allocation support for single images smaller than the available width

diff --git a/src/Model/Item.php b/src/Model/Item.php
index 6eba41392b56af5341d716b4da53151192deff25..cd6b8a96fbb193aa1172a32651dae61d86487084 100644 (file)
--- 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 23370de3f493389cdb1d6e51d6f9bcecaa562483..6987472fd4db71e1181a64ca63d2934fd48e5515 100644 (file)
--- 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 9cff3614a1596750f31544c3574c435648df99ee..f32d611ef43863041f3f65d485a52aa4886b56a0 100644 (file)
--- 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 b0d32d8e161d3441bf42f31111e43323578f8600..baf0dfd1d9ddeb64977298e17474171192c98da9 100644 (file)
--- 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}}