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 8e85c9c..3c60ef9 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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

diff --git a/public/images/nothumb.svg b/public/images/nothumb.svg
new file mode 100644
index 0000000..339274a
--- /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 56635a4..3205b81 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 7fbdf55..29fa06a 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 '