From fb97e69482c205acb2485db35e996f0cbf0e09e5 Mon Sep 17 00:00:00 2001
From: Jonah Lawrence <jonah@freshidea.com>
Date: Tue, 28 Jun 2022 22:07:29 -0600
Subject: [PATCH] feat(site): Image scaling and loading skeleton (#60)

---
 index.php | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/index.php b/index.php
index d99c418..fa0c72f 100644
--- a/index.php
+++ b/index.php
@@ -102,6 +102,8 @@ if (isset($_GET['random'])) {
         .gallery img {
             width: 100%;
             height: 100%;
+            object-fit: cover;
+            object-position: center;
             min-height: 122px;
             border-radius: 8px;
             display: flex;
@@ -123,6 +125,24 @@ if (isset($_GET['random'])) {
         div.gslide-desc {
             color: #fff;
         }
+
+        .gallery img.loading {
+            background:
+                linear-gradient(0.25turn, transparent, #3c3c3c, transparent),
+                linear-gradient(#2c2c2c, #2c2c2c),
+                radial-gradient(38px circle at 19px 19px, #2c2c2c 50%, transparent 51%),
+                linear-gradient(#2c2c2c, #2c2c2c);
+            background-repeat: no-repeat;
+            background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px;
+            background-position: -315px 0, 0 0, 0px 190px, 50px 195px;
+            animation: loading 1.5s infinite;
+        }
+
+        @keyframes loading {
+            to {
+                background-position: 315px 0, 0 0, 0 190px, 50px 195px;
+            }
+        }
     </style>
 </head>
 
@@ -160,7 +180,7 @@ if (isset($_GET['random'])) {
         <?php foreach ($images as $image) : ?>
             <?php $dimensions = getimagesize($image); ?>
             <a href="<?= $image; ?>" class="glightbox" data-alt="<?= basename($image); ?>" data-description="<?= basename($image); ?> • <?= $dimensions[0] . 'x' . $dimensions[1]; ?>">
-                <img src="<?= $imgproxy_prefix . basename($image); ?>" loading="lazy" alt="<?= basename($image); ?>" title="<?= basename($image); ?>">
+                <img src="<?= $imgproxy_prefix . basename($image); ?>" loading="lazy" alt="<?= basename($image); ?>" title="<?= basename($image); ?>" class="loading" onload="this.classList.remove('loading')">
             </a>
         <?php endforeach; ?>
     </div>