Added numbering to gallery

Author: rishikeshsreehari

assets/css/extended/misc.css

@@ -390,4 +390,25 @@ text-decoration: none;
 
 .info-tooltip .tooltip-text a:hover {
 text-decoration: underline;
+}
+
+.gallery-item {
+    position: relative;
+}
+
+.gallery-number {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background: rgba(0, 0, 0, 0.75);
+    color: white;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.9rem;
+    font-weight: 600;
+    z-index: 5;
 }

themes/hugo-PaperMod/layouts/shortcodes/gallery.html

@@ -1,11 +1,14 @@
 <div class="gallery">
     {{ $images := split .Inner "\n" }}
     <div class="gallery-grid">
+        {{ $index := 0 }}
         {{ range $images }}
             {{ $item := findRE `"([^"]*)"` . }}
             {{ if ge (len $item) 2 }}
+                {{ $index = add $index 1 }}
                 <figure class="gallery-item">
                     <a href="{{ trim (index $item 0) `"` }}" class="lightbox">
+                        <span class="gallery-number">{{ $index }}</span>
                         <img 
                             src="{{ trim (index $item 0) `"` }}" 
                             alt="{{ trim (index $item 1) `"` }}"