Add new horizontal masonry and image height allocation

- Move image templates to content/image sub-folder

view/global.css

@@ -706,6 +706,39 @@ audio {
  * Image grid settings END
  **/
 
+/* This helps allocating space for image before they are loaded, preventing content shifting once they are.
+ * Inspired by https://www.smashingmagazine.com/2016/08/ways-to-reduce-content-shifting-on-page-load/
+ * Please note: The space is effectively allocated using padding-bottom using the image ratio as a value.
+ * This ratio is never known in advance so no value is set in the stylesheet.
+ */
+figure.img-allocated-height {
+	position: relative;
+	background: center / auto rgba(0, 0, 0, 0.05) url(/images/icons/image.png) no-repeat;
+	margin: 0;
+}
+figure.img-allocated-height img{
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+}
+
+/**
+ * Horizontal masonry settings START
+ **/
+.masonry-row {
+	display: -ms-flexbox; /* IE10 */
+	display: flex;
+	/* Both the following values should be the same to ensure consistent margins between images in the grid */
+	column-gap: 5px;
+	margin-top: 5px;
+}
+/**
+ * Horizontal masonry settings AND
+ **/
+
 #contactblock .icon {
 	width: 48px;
 	height: 48px;

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

view/theme/frio/scheme/black.css

@@ -394,3 +394,7 @@ input[type="text"].tt-input {
 textarea#profile-jot-text:focus + #preview_profile-jot-text, textarea.comment-edit-text:focus + .comment-edit-form .preview {
 	border-color: $link_color;
 }
+
+figure.img-allocated-height {
+	background-color: rgba(255, 255, 255, 0.15);
+}

view/theme/frio/scheme/dark.css

@@ -354,3 +354,7 @@ input[type="text"].tt-input {
 textarea#profile-jot-text:focus + #preview_profile-jot-text, textarea.comment-edit-text:focus + .comment-edit-form .preview {
 	border-color: $link_color;
 }
+
+figure.img-allocated-height {
+	background-color: rgba(255, 255, 255, 0.05);
+}