From 3b20c2b94ff4d5090393de59f15b89827e2be34e Mon Sep 17 00:00:00 2001
From: Jonah Lawrence <jonah@freshidea.com>
Date: Mon, 10 Jan 2022 12:21:02 -0700
Subject: [PATCH] feat(site): display filename and size in lightbox

---
 index.php | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/index.php b/index.php
index 80209b1..be178b3 100644
--- a/index.php
+++ b/index.php
@@ -99,6 +99,7 @@ if (isset($_GET['random'])) {
         .gallery img {
             width: 100%;
             height: 100%;
+            min-height: 122px;
             border-radius: 8px;
             display: flex;
             align-items: center;
@@ -111,6 +112,14 @@ if (isset($_GET['random'])) {
         .gallery img:hover {
             box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
         }
+
+        .glightbox-clean .gslide-description {
+            background: #1d1d1d
+        }
+
+        div.gslide-desc {
+            color: #fff;
+        }
     </style>
 </head>
 
@@ -146,8 +155,9 @@ if (isset($_GET['random'])) {
 
     <div class="gallery">
         <?php foreach ($images as $image) : ?>
-            <a href="<?= $image; ?>" class="glightbox">
-                <img src="<?= $imgproxy_prefix . basename($image); ?>" loading="lazy" alt="<?php echo basename($image); ?>" title="<?php echo basename($image); ?>">
+            <?php $dimensions = getimagesize($image); ?>
+            <a href="<?= $image; ?>" class="glightbox" data-description="<?= basename($image); ?> • <?= $dimensions[0] . 'x' . $dimensions[1]; ?>">
+                <img src="<?= $imgproxy_prefix . basename($image); ?>" loading="lazy" alt="<?= basename($image); ?>" title="<?= basename($image); ?>">
             </a>
         <?php endforeach; ?>
     </div>