Add new horizontal masonry and image height allocation

- Move image templates to content/image sub-folder

view/templates/content/image/grid.tpl

@@ -1,12 +1,12 @@
 <div class="imagegrid-row">
 	<div class="imagegrid-column">
 		{{foreach $columns.fc as $img}}
-				{{include file="content/image.tpl" image=$img}}
+				{{include file="content/image/single.tpl" image=$img}}
 		{{/foreach}}
 	</div>
 	<div class="imagegrid-column">
 		{{foreach $columns.sc as $img}}
-				{{include file="content/image.tpl" image=$img}}
+				{{include file="content/image/single.tpl" image=$img}}
 		{{/foreach}}
 	</div>
-</div>
+</div>

view/templates/content/image/horizontal_masonry.tpl

@@ -0,0 +1,12 @@
+{{foreach $rows as $images}}
+	<div class="masonry-row" style="height: {{$images->getHeightRatio()}}%">
+        {{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/single_with_height_allocation.tpl"
+	            image=$image
+	            allocated_height="calc(`$image->heightRatio * $image->widthRatio / 100`% - 5px / `$column_size`)"
+	            allocated_width="`$image->widthRatio`%"
+            }}
+        {{/foreach}}
+	</div>
+{{/foreach}}

view/templates/content/image/single_with_height_allocation.tpl

@@ -0,0 +1,20 @@
+{{* 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="uri-id-{{$image->uriId}}" href="{{$image->url}}">
+			<img src="{{$image->preview}}" alt="{{$image->description}}" title="{{$image->description}}" loading="lazy">
+		</a>
+    {{else}}
+		<img src="{{$image->url}}" alt="{{$image->description}}" title="{{$image->description}}" loading="lazy">
+    {{/if}}
+</figure>
+
+{{if $allocated_max_width}}
+</div>
+{{/if}}