Problem with eleventy image build update

[dannystaple]

The issue arises from attempting to access properties of undefined in the JavaScript code at src/shortcodes/make_tab_gallery.js. Specifically, the error points to line 54:

'<img src="' + image.thumb_metadata.jpeg[1].url + '" loading="lazy" decoding="async" width="128" height="112" alt="' + image.alt + '">'

The problem seems to occur because image.thumb_metadata.jpeg[1] is undefined. This indicates that the make_thumbnail_for function isn't generating the expected metadata structure, or the jpeg array doesn't contain an index 1.

Solution

1. Validate thumb_metadata before accessing properties:
   Modify the relevant code to check if image.thumb_metadata.jpeg[1] exists before attempting to access it.

const tabs = images_with_metadata.map(image => {
    const thumbnailUrl = image.thumb_metadata?.jpeg?.[1]?.url || '';
    const thumbnailAlt = image.alt || '';
    return '<div class="image-tab-gallery-tab" title="' + thumbnailAlt + '" data-src="' + image.metadata.jpeg[0].url + '">' +
            '<img src="' + thumbnailUrl + '" loading="lazy" decoding="async" width="128" height="112" alt="' + thumbnailAlt + '">' +
            '</div>';
});

This ensures that if thumb_metadata.jpeg[1] is undefined, the code gracefully handles the situation rather than throwing an error.

2. Verify make_thumbnail_for output:
   Check the implementation of make_thumbnail_for to ensure it generates the expected structure for thumb_metadata. If necessary, make sure that it includes the jpeg array with the required data.

3. Handle missing gallery data in Liquid template:
   The Liquid template at _includes/layouts/product.liquid uses the custom tab_gallery shortcode:

{% if gallery %}
    {% tab_gallery "gallery", gallery.images %}
{% endif %}

Ensure that the gallery object passed into the template contains valid images data. If gallery.images is missing or empty, the JavaScript will not have valid input, leading to further issues.

---

Next Steps

• Verify the structure of the gallery.images data passed into the template and ensure it meets the expected format.
• Test the updated JavaScript code to confirm it handles missing metadata gracefully.
• Consider adding logging or error reporting in make_tab_gallery.js to identify problematic input data.

These changes should resolve the issue and prevent similar errors in the future.