Completed the updates.

src/components/EventMasonry.astro

@@ -22,7 +22,7 @@ const {
     images.slice(0, 4).map((image, index) => (
       <div class="flex-auto overflow-hidden">
         <img
-          class="object-cover w-full max-h-28 md:max-h-[223px] cursor-pointer gallery-image"
+          class="object-cover w-full max-h-28 max-h-[80px] md:max-h-[223px] cursor-pointer gallery-image"
           src={image.webp}
           alt={`Image ${index + 1}`}
           data-index={index}
@@ -39,7 +39,7 @@ const {
     images.slice(4).map((image, index) => (
       <div class="flex-auto overflow-hidden">
         <img
-          class="object-cover w-full max-h-28 md:max-h-[223px] cursor-pointer gallery-image"
+          class="object-cover w-full max-h-28 max-h-[80px] md:max-h-[223px] cursor-pointer gallery-image"
           src={image.webp}
           alt={`Image ${index + 5}`}
           data-index={index + 4}

src/components/SpeakerGrid.astro

@@ -1,4 +1,6 @@
 ---
+import { parseAndWrapCaptions } from "../../utils/captionParser";
+
 const { people, team, core } = Astro.props;
 
 // Filter based on the `core` parameter
@@ -58,9 +60,9 @@ function personLink(person) {
               {person.refs.matrix && ` | Matrix: ${person.refs.matrix}`}
               {person.refs.email && ` | Email: ${person.refs.email}`}
             </p>
-              <p class="text-xs text-gray-500">
-            {person.caption && person.caption}
-            </p>
+       <p class="text-xs text-gray-500" set:html={person.caption && parseAndWrapCaptions(person.caption)}></p>
+
+
             <p class="text-xs text-gray-500">
               {person.refs.designation && `${person.refs.designation}`}
 

utils/captionParser.js

@@ -0,0 +1,21 @@
+export function parseAndWrapCaptions(caption) {
+    console.log(caption)
+    return caption.replace(/\[([^\]]+)\]\((https?:\/\/[^\)]+)\)/g, (match,text, content) => {
+        // Split the content by spaces to identify potential URLs
+        const parts = content.split(' ');
+        const url = parts.find(part => part.startsWith('https://'));
+
+        console.log(content)
+        if (url) {
+            // If a URL is found, wrap the content in an anchor tag using the first URL
+            return `<a href="${url}"
+            target="_blank"
+            class="underline"
+            style="text-underline-offset: 4px;"
+            >${text}</a>`;
+        } else {
+            // If no URL, join the parts with a comma
+            return content.split(' ').join(', ');
+        }
+    });
+}