Show photo titles from filenames in catalog and lightbox

app.js

@@ -1,8 +1,9 @@
 (() => {
   const lightbox = document.getElementById('lightbox');
   const lightboxImage = document.getElementById('lightboxImage');
+  const lightboxTitle = document.getElementById('lightboxTitle');
 
-  if (!lightbox || !lightboxImage) {
+  if (!lightbox || !lightboxImage || !lightboxTitle) {
     return;
   }
 
@@ -37,6 +38,7 @@
 
       lightboxImage.src = full;
       lightboxImage.alt = title;
+      lightboxTitle.textContent = title;
       lightbox.hidden = false;
       document.body.style.overflow = 'hidden';
     });
@@ -49,6 +51,7 @@
   function closeLightbox() {
     lightbox.hidden = true;
     lightboxImage.src = '';
+    lightboxTitle.textContent = '';
     document.body.style.overflow = '';
   }
 })();

index.php

@@ -49,6 +49,7 @@ foreach ($categories as $categoryName => &$images) {
 
         $image['thumb_path'] = $thumbWebPath;
         $image['full_path'] = '?action=image&category=' . rawurlencode($categoryName) . '&file=' . rawurlencode($image['filename']);
+        $image['title'] = titleFromFilename($image['filename']);
         $image['mtime'] = $sourceMtime;
     }
 
@@ -115,14 +116,15 @@ if ($selectedCategory !== null && $selectedCategory !== '' && !isset($categories
                         <button
                             class="thumb-card js-thumb"
                             data-full="<?= htmlspecialchars($img['full_path'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
-                            data-title="<?= htmlspecialchars($img['filename'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
+                            data-title="<?= htmlspecialchars($img['title'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
                             type="button"
                         >
                             <img
                                 src="<?= htmlspecialchars($img['thumb_path'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
-                                alt="<?= htmlspecialchars($img['filename'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
+                                alt="<?= htmlspecialchars($img['title'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
                                 loading="lazy"
                             >
+                            <span class="thumb-title"><?= htmlspecialchars($img['title'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?></span>
                         </button>
                     <?php endforeach; ?>
                 </div>
@@ -140,6 +142,7 @@ if ($selectedCategory !== null && $selectedCategory !== '' && !isset($categories
     <div class="lightbox-content">
         <button class="lightbox-close js-close" type="button" aria-label="Закрыть">×</button>
         <img id="lightboxImage" src="" alt="">
+        <div id="lightboxTitle" class="lightbox-title"></div>
     </div>
 </div>
 
@@ -175,6 +178,24 @@ function serveImage(string $photosDir): never
     exit;
 }
 
+function titleFromFilename(string $filename): string
+{
+    $name = pathinfo($filename, PATHINFO_FILENAME);
+    $name = str_replace(['_', '-'], ' ', $name);
+    $name = preg_replace('/\s+/', ' ', $name) ?? $name;
+    $name = trim($name);
+
+    if ($name === '') {
+        return $filename;
+    }
+
+    if (function_exists('mb_convert_case')) {
+        return mb_convert_case($name, MB_CASE_TITLE, 'UTF-8');
+    }
+
+    return ucwords(strtolower($name));
+}
+
 function ensureDirectories(array $dirs): void
 {
     foreach ($dirs as $dir) {

style.css

@@ -124,6 +124,7 @@ h2 {
     background: #fff;
     padding: 0;
     cursor: pointer;
+    text-align: left;
     transition: transform .15s ease, box-shadow .15s ease;
 }
 
@@ -139,6 +140,16 @@ h2 {
     object-fit: cover;
 }
 
+.thumb-title {
+    display: block;
+    padding: 10px 10px 12px;
+    font-size: 13px;
+    line-height: 1.35;
+    color: var(--text);
+    border-top: 1px solid var(--border);
+    background: #fff;
+}
+
 .empty {
     color: var(--muted);
 }
@@ -188,6 +199,14 @@ h2 {
     background: #020617;
 }
 
+.lightbox-title {
+    color: #e5e7eb;
+    font-size: 14px;
+    line-height: 1.4;
+    padding: 2px 4px 6px;
+    word-break: break-word;
+}
+
 .lightbox-link {
     align-self: flex-end;
     color: #dbeafe;