Add height allocation to single post attached images

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

diff --git a/src/Model/Item.php b/src/Model/Item.php
index 8b0fa29a25cf4f4c79837ba6bf2775585f747c64..31cc0ac875b59f0737f2d6be4d65ca33590b0f01 100644 (file)
--- 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 6bee34b8bc6f3b3391bc0d0a9f476c396af5df1c..247a9694f73d791f7e19009695021c89680b2725 100644 (file)
--- 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 16610722ccc753079da38313cead3c80d842e723..9cff3614a1596750f31544c3574c435648df99ee 100644 (file)
--- 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 35e9324aec187351837432549d9842005969c57c..b0d32d8e161d3441bf42f31111e43323578f8600 100644 (file)
--- 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 21a40f1c7c4d47b0a6bacf96c5bf94a7fea9ce71..561f708a81b312951bdea12833b84a650dcbe7d2 100644 (file)
--- 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 29b2782da28e893ea8494e8f334d71d5ed718fb6..434681c5587a3e49e33eece3020e7c9f3b999631 100644 (file)
--- 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);
 }