feat: add tooltip for images in a gallery

feat: add image index inside a gallery
fix: return gap inside a gallery

2 files changed, 72 insertions, 2 deletions

diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go
index 3da98eb..5514b6d 100644
--- a/internal/glightbox/html_renderer.go
+++ b/internal/glightbox/html_renderer.go
@@ -86,8 +86,12 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 				}
 			}
 
+			if len(img.Caption) > 0 {
+				tagClassList = append(tagClassList, "grid-tooltip")
+			}
+
 			elements = append(elements, fmt.Sprintf(`
-	<a href="https://f003.backblazeb2.com/file/sayana-photos/full/%s" class="glightbox-%s grid-item %s grid-item-%s"
+	<a href="https://f003.backblazeb2.com/file/sayana-photos/full/%s" class="glightbox-%s grid-item %s grid-item-%s p-1"
 	    data-gallery="gallery-%s" data-title="%s" %s>
 		<picture>
 			<source media="(width < 640px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp" />
@@ -97,7 +101,9 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 			<source media="(width >= 2400px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-1600p/%s.webp" />
 			<img src="https://f003.backblazeb2.com/file/sayana-photos/webp-800p/%s.webp" />
 		</picture>
-	</a>`, img.URL, galleryID, strings.Join(tagClassList, " "), galleryID, galleryID, dayDate.Format("2006-01-02 15:04:05 -07:00"), dataDescriptionAttribute, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt))
+		<span class="grid-tooltip-text">%s</span>
+		<span class="grid-item-index">%d</span>
+	</a>`, img.URL, galleryID, strings.Join(tagClassList, " "), galleryID, galleryID, dayDate.Format("2006-01-02 15:04:05 -07:00"), dataDescriptionAttribute, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, captionHTML, i+1))
 
 			if glightboxDescId != "" {
 				elements = append(elements, fmt.Sprintf(`
diff --git a/static/input.css b/static/input.css
index 8080d13..cfefa0d 100644
--- a/static/input.css
+++ b/static/input.css
@@ -327,10 +327,74 @@ a:hover {
     transform: scale(1.1);
 }
 
+.grid-tooltip {
+    position: relative;
+    display: inline-block;
+    box-shadow: inset 0rem 0rem 0.5rem var(--main-light-color);
+    transition: box-shadow 0.5s ease-in-out;
+}
+
+.grid-tooltip:hover {
+    box-shadow: none;
+}
+
+.grid-tooltip-text {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.5s;
+    width: 100%;
+    top: 100%;
+    background-color: var(--background-dark-color);
+    color: var(--main-dark-color);
+    text-align: center;
+    padding: 0.25rem 0.25rem;
+    margin-top: 0.25rem;
+    border-radius: 0.5rem;
+    position: absolute;
+    z-index: 15;
+}
+
+.grid-tooltip:hover .grid-tooltip-text {
+    visibility: visible;
+    opacity: 1;
+}
+
+.grid-tooltip-text::after {
+    content: " ";
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    margin-left: -0.25rem;
+    border-width: 0.25rem;
+    border-style: solid;
+    border-color: transparent transparent black transparent;
+}
+
 .grid-item, .grid-sizer {
+    position: relative;
+    display: inline-block;
     width: 50%;
 }
 
+.grid-item-index {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 0.5s;
+    top: 0%;
+    left: 0%;
+    background-color: var(--main-light-color);
+    color: var(--background-dark-color);
+    text-align: center;
+    padding: 0.25rem 0.25rem;
+    position: absolute;
+    z-index: 14;
+}
+
+.grid-item:hover .grid-item-index {
+    visibility: hidden;
+    opacity: 0;
+}
+
 .grid-item-2x {
     width: 100%;
 }