credit artists when provided

src/components/Lightbox.astro

@@ -9,13 +9,14 @@
   const lightbox = document.querySelector(".app-lightbox");
   let portal = lightbox.querySelector(".portal");
   let desc = lightbox.querySelector(".desc");
-
+  let artist = lightbox.querySelector("#artist");
   // eslint-disable-next-line no-restricted-syntax
   for (const trig of lbTriggers) {
     trig.addEventListener("click", () => {
       const T = trig.getElementsByTagName("img")[0];
-
-      portal.src = T.src;
+      const url = new URL(T.src)
+      const noThumb = url.href.replaceAll(url.search, '')
+      portal.src = noThumb;
       // console.log();
       if (!T.alt) desc.classList.add("hidden");
       else desc.classList.remove("hidden");
@@ -55,6 +56,7 @@
   .app-lightbox {
     position: fixed;
     margin: auto auto;
+    padding: 2rem;
     align-items: center;
     justify-content: center;
     z-index: 3;
@@ -100,7 +102,7 @@
   }
 
   .desc {
-    max-width: 20%;
+    max-width: 50%;
     margin: auto auto;
     padding: 1rem;
   }

src/pages/characters/[slug].astro

@@ -11,16 +11,15 @@ const imageCollection = await pb.collection("images").getFullList({
 const characterDetails = await pb
   .collection("characters")
   .getFirstListItem(`(slug~"${slug}")`);
-// console.log(characterDetails);
 const images = imageCollection.map((record) => {
   const url = pb.files.getUrl(record, record.file, { thumb: record.thumb });
-  return {
-    url: url,
-    desc: record.description,
-    nsfw: record.nsfw,
-  };
+    return {
+      url: url,
+      desc: record.description,
+      nsfw: record.nsfw,
+      artist: record.artist,
+    };
 });
-
 export const prerender = false;
 ---
 
@@ -45,7 +44,12 @@ export const prerender = false;
     >
       {
         images.map((image) => (
-          <Image nsfw={image.nsfw} src={image.url} alt={image.desc} />
+          <Image
+            nsfw={image?.nsfw}
+            src={image?.url}
+            alt={image?.desc}
+            artist={image?.artist}
+          />
         ))
       }
     </div>