From 9a76dac0c580e759b94045a784ba2b5bb8f436cd Mon Sep 17 00:00:00 2001
From: Joshua Goins <josh@redstrate.com>
Date: Sat, 12 Oct 2024 16:36:58 -0400
Subject: [PATCH] Only show gallery type icons with Javascript, which are only
 layouted in JS anyway

---
 themes/red/assets/css/site.css              | 4 ++++
 themes/red/assets/js/gallery.js             | 6 ++++++
 themes/red/layouts/partials/render-art.html | 6 +++---
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/themes/red/assets/css/site.css b/themes/red/assets/css/site.css
index 3a9b753..578c5f5 100644
--- a/themes/red/assets/css/site.css
+++ b/themes/red/assets/css/site.css
@@ -684,3 +684,7 @@ model-viewer {
 .character span {
     display: block;
 }
+
+.gallery-type-icon-hidden {
+    visibility: hidden;
+}
diff --git a/themes/red/assets/js/gallery.js b/themes/red/assets/js/gallery.js
index a179946..c5cfdde 100644
--- a/themes/red/assets/js/gallery.js
+++ b/themes/red/assets/js/gallery.js
@@ -1,4 +1,10 @@
 imagesLoaded(document.querySelector('.grid'), function(instance) {
+    var typeIcons = document.getElementsByClassName('gallery-type-icon-hidden');
+
+    for(var i = 0; i < typeIcons.length; i++) {
+        typeIcons[i].classList.remove("gallery-type-icon-hidden");
+    }
+
     new Masonry('.grid', {
         itemSelector: '.grid-item',
         columnWidth: '.grid-sizer',
diff --git a/themes/red/layouts/partials/render-art.html b/themes/red/layouts/partials/render-art.html
index d6c77be..8fcb77e 100644
--- a/themes/red/layouts/partials/render-art.html
+++ b/themes/red/layouts/partials/render-art.html
@@ -11,19 +11,19 @@
 {{ with $full }}
         {{ if $.Params.threed }}
                 {{ with resources.Get "3d.png" }}
-                        <img alt="3D cube icon" title="Viewable 3D" style="z-index: 1; position: absolute; left: 10px; top: 10px; border: none" src="{{ .RelPermalink }}">
+                        <img class="gallery-type-icon-hidden" alt="3D cube icon" title="Viewable 3D" style="z-index: 1; position: absolute; left: 10px; top: 10px; border: none" src="{{ .RelPermalink }}">
                 {{ end }}
         {{ end }}
 
         {{ if $.Params.comic }}
                 {{ with resources.Get "comic.png" }}
-                        <img alt="Comic icon" title="Viewable Comic" style="z-index: 1; position: absolute; left: 10px; top: 10px; border: none" src="{{ .RelPermalink }}">
+                        <img class="gallery-type-icon-hidden" alt="Comic icon" title="Viewable Comic" style="z-index: 1; position: absolute; left: 10px; top: 10px; border: none" src="{{ .RelPermalink }}">
                 {{ end }}
         {{ end }}
 
         {{ if $.Params.animation }}
                 {{ with resources.Get "play-circle.png" }}
-                        <img alt="Play animation icon" title="Viewable Animation" style="z-index: 1; position: absolute; left: 10px; top: 10px; border: none" src="{{ .RelPermalink }}">
+                        <img class="gallery-type-icon-hidden" alt="Play animation icon" title="Viewable Animation" style="z-index: 1; position: absolute; left: 10px; top: 10px; border: none" src="{{ .RelPermalink }}">
                 {{ end }}
         {{ end }}