Merge pull request #198 from orionrobots/fix-197

Fix #197

Author: dannystaple

README.md

@@ -8,8 +8,7 @@ Creative Commons By Attribution Share-Alike v3.0
 ## Running serve and build in docker
 
 ```bash
-docker compose up --rm dist
-docker compose run --interactive --rm serve npm install
+docker compose up dist
 docker compose run --interactive --rm serve npm run dev
 docker compose up serve
 ```

docker-compose.yml

@@ -1,12 +1,17 @@
 services:
   dist:
-    image: node:18-bullseye
+    build:
+      context: .
+      dockerfile: Dockerfile.dist
     command: ["npm", "run", "dist"]
     volumes:
       - .:/src
     working_dir: /src
 
   dist_clean:
+    build:
+      context: .
+      dockerfile: Dockerfile.dist
     volumes:
       - .:/src
     working_dir: /src
@@ -21,7 +26,9 @@ services:
   #     - ./_site:/var/www/html
 
   serve:
-    image: node:18-bullseye
+    build:
+      context: .
+      dockerfile: Dockerfile.dist
     volumes:
       - .:/src
     working_dir: /src

serve.Dockerfile

@@ -0,0 +1,4 @@
+FROM node:18-bullseye
+# Install dependencies
+RUN npm install
+

src/shortcodes/make_tab_gallery.js

@@ -49,10 +49,24 @@ async function make_gallery(id, images) {
     const description_element = '<div class="image-tab-gallery-description row"></div>';
     const current_image_element = '<div class="image-tab-gallery-current-image col-md-5"></div>';
 
-    const tabs = images_with_metadata.map( 
-        image => '<div class="image-tab-gallery-tab" title="' + image.alt + '" data-src="' + image.metadata.jpeg[0].url + '">' +
-                '<img src="' + image.thumb_metadata.jpeg[1].url + '" loading="lazy" decoding="async" width="128" height="112" alt="' + image.alt + '">' +
-                '</div>');
+    const tabs = images_with_metadata.map(image => {
+        let thumbnailUrl = '';
+        let mainImageUrl = '';
+        const thumbnailAlt = image.alt || '';
+        if (image.thumb_metadata?.jpeg?.[1]?.url) {
+            thumbnailUrl = image.thumb_metadata.jpeg[1].url;
+        } else {
+            console.warn(`Tab Gallery: Missing thumbnail for image alt='${thumbnailAlt}'. Falling back to empty src.`);
+        }
+        if (image.metadata?.jpeg?.[0]?.url) {
+            mainImageUrl = image.metadata.jpeg[0].url;
+        } else {
+            console.warn(`Tab Gallery: Missing main image for image alt='${thumbnailAlt}'. Falling back to empty src.`);
+        }
+        return '<div class="image-tab-gallery-tab" title="' + thumbnailAlt + '" data-src="' + mainImageUrl + '">' +
+            '<img src="' + thumbnailUrl + '" loading="lazy" decoding="async" width="128" height="112" alt="' + thumbnailAlt + '">' +
+            '</div>';
+    });
     // put the joined tabs in the tabs element.
 
     const tabs_element = '<div class="image-tab-gallery-tabs col-md-3">' + tabs.join("\n") + '</div>';