From 54c4294d08efc2660cddb0051bc1a11c455f1677 Mon Sep 17 00:00:00 2001
From: Aaron van Geffen <aaron@aaronweb.net>
Date: Sat, 11 Mar 2023 17:16:53 +0100
Subject: [PATCH] Add 'no thumb' vector image for use while loading

---
 public/css/default.css    |   1 +
 public/images/nothumb.png | Bin 3694 -> 0 bytes
 public/images/nothumb.svg |  10 ++++++++++
 templates/AlbumIndex.php  |   5 +++--
 templates/PhotosIndex.php |   2 +-
 5 files changed, 15 insertions(+), 3 deletions(-)
 delete mode 100644 public/images/nothumb.png
 create mode 100644 public/images/nothumb.svg

diff --git a/public/css/default.css b/public/css/default.css
index 8e85c9c3..3c60ef96 100644
--- a/public/css/default.css
+++ b/public/css/default.css
@@ -180,6 +180,7 @@ i.space-invader.alt-7::before {
 	width: 31%;
 }
 .tiled_grid div img {
+	background: url('../images/nothumb.svg') center no-repeat;
 	border: none;
 	width: 100%;
 }
diff --git a/public/images/nothumb.png b/public/images/nothumb.png
deleted file mode 100644
index ce6a2f2d8c7db907ef15baf54f579481e35a5e7a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3694
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
Q_7Bj*%?o{PU)T@-1_Re;XaE2J

diff --git a/public/images/nothumb.svg b/public/images/nothumb.svg
new file mode 100644
index 00000000..339274a2
--- /dev/null
+++ b/public/images/nothumb.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 150">
+<defs><style>.cls-2{fill:#cc9d9d;}</style></defs>
+<g>
+	<path class="cls-2" d="m221.34,135.39c-13.69,0-27.38-.09-41.07.06-3.43.04-4.94-.61-4.91-4.56.17-27.21.14-54.42.02-81.63-.02-3.41.9-4.57,4.45-4.56,27.69.13,55.38.12,83.07,0,3.36-.01,4.19,1.18,4.18,4.34-.1,27.37-.12,54.73.02,82.1.02,3.73-1.44,4.34-4.69,4.3-13.69-.14-27.38-.06-41.07-.06Zm-.11-27.1c11.37,0,22.74-.1,34.1.06,3.26.05,4.3-.97,4.28-4.25-.14-16.19-.14-32.38,0-48.56.03-3.28-1.01-4.27-4.27-4.25-22.74.12-45.47.12-68.21,0-3.26-.02-4.3.97-4.27,4.25.14,16.19.14,32.38,0,48.56-.03,3.28,1.01,4.3,4.27,4.26,11.37-.16,22.74-.06,34.1-.06Z"/>
+	<path class="cls-2" d="m271.69,111.12c.4-3.72-.27-8.33-.9-12.95-.4-2.96.59-3.73,3.62-3.01,6.71,1.61,6.75,1.45,8.74-5.81,3.66-13.3,7.37-26.59,10.95-39.91,1.64-6.09,1.55-6.23-4.53-7.87-20.8-5.63-41.65-11.12-62.43-16.82-3.48-.95-5.32-.26-6.11,3.33-.73,3.33-1.85,6.57-2.55,9.9-.71,3.39-3,4.22-5.87,3.73-3.34-.57-2.27-2.94-1.71-5.06,1.7-6.44,3.31-12.91,5.03-19.34.47-1.74.7-3.35,3.66-2.54,27.36,7.52,54.77,14.85,82.2,22.1,2.71.72,3.31,1.43,2.52,4.29-7.26,26.45-14.3,52.97-21.49,79.44-.5,1.84-.24,5.23-3.51,4.25-3.05-.92-8.22.3-7.68-5.77.21-2.32.03-4.67.03-7.96Z"/>
+	<path class="cls-2" d="m237.89,68.65c3.58,9.04,7.13,18.07,10.74,27.08.87,2.17.4,3.25-2.07,3.25-16.63-.01-33.25,0-49.88-.01-2.63,0-2.8-1.35-1.8-3.33.7-1.39,1.37-2.79,2.07-4.17,2.84-5.69,2.92-5.78,8.04-1.6,1.77,1.44,2.44,1.1,3.45-.67,1.69-2.95,3.7-5.72,5.45-8.64,1.39-2.31,2.67-2.5,4.73-.62,2.11,1.93,3.79,5.97,6.49,5.2,2.2-.63,3.51-4.41,5.19-6.81,2.13-3.04,4.23-6.1,6.37-9.13.15-.21.54-.25,1.23-.54Z"/>
+	<path class="cls-2" d="m201.38,75.62c-3.33.17-5.32-1.1-5.41-4.73-.09-3.64,1.37-6.17,5.12-6.38,3.38-.19,5.57,1.83,6,5.22.4,3.09-2.39,5.81-5.72,5.89Z"/>
+</g>
+</svg>
diff --git a/templates/AlbumIndex.php b/templates/AlbumIndex.php
index 56635a45..3205b81b 100644
--- a/templates/AlbumIndex.php
+++ b/templates/AlbumIndex.php
@@ -55,11 +55,12 @@ class AlbumIndex extends Template
 					echo '
 								<img src="', $thumbs[1], '"' . (isset($thumbs[2]) ?
 									' srcset="' . $thumbs[2] . ' 2x"' : '') .
-									' alt="">';
+									' alt="" style="width: ', static::TILE_WIDTH,
+										'px; height: ', static::TILE_HEIGHT, 'px">';
 				}
 				else
 					echo '
-								<img src="', BASEURL, '/images/nothumb.png" alt="">';
+								<img src="', BASEURL, '/images/nothumb.svg" alt="">';
 
 				if ($this->show_labels)
 					echo '
diff --git a/templates/PhotosIndex.php b/templates/PhotosIndex.php
index 7fbdf552..29fa06a7 100644
--- a/templates/PhotosIndex.php
+++ b/templates/PhotosIndex.php
@@ -100,7 +100,7 @@ class PhotosIndex extends Template
 		else
 			echo ' srcset="', $image->getThumbnailUrl($image->width(), $image->height(), true), ' 2x"';
 
-		echo ' alt="" title="', $image->getTitle(), '" style="aspect-ratio: ', $image->ratio(), '">';
+		echo ' alt="" title="', $image->getTitle(), '" style="width: ', $width, 'px; height: ', $height, 'px">';
 
 		if ($this->show_labels)
 			echo '