ISTWCMS-4054: fixing image gallery

js/component_scripts.min.js

@@ -123,9 +123,7 @@
           // Get the id to reference the individual FF.
           // Need this to ensure that if more than one FF on the page,
           // that all FFs get the carousel added.
-          var id = '#uw-ig-someid';
-
-          console.log(id);
+          var id = '#uw-ig-' + $(this).data('id');
 
           // Add the carousel to the FF using the id.
           $(id + ' .owl-carousel').owlCarousel({
@@ -165,6 +163,10 @@
         const tabs = document.querySelectorAll('[role="tab"]');
         const tabList = document.querySelector('[role="tablist"]');
 
+        if (tabs.length == 0) {
+          return;
+        }
+
         // Add a click event handler to each tab
         tabs.forEach(tab => {
           tab.addEventListener("click", changeTabs);

source/_patterns/04-components/image-gallery/image-gallery.js

@@ -9,9 +9,7 @@
           // Get the id to reference the individual FF.
           // Need this to ensure that if more than one FF on the page,
           // that all FFs get the carousel added.
-          var id = '#uw-ig-someid';
-
-          console.log(id);
+          var id = '#uw-ig-' + $(this).data('id');
 
           // Add the carousel to the FF using the id.
           $(id + ' .owl-carousel').owlCarousel({

source/_patterns/04-components/image-gallery/image-gallery.twig

-<div id="uw-ig-{{ images.id }}" class="uw-ig data-id="{{ images.id }}">
+<div id="uw-ig-{{ images.id }}" class="uw-ig" data-id="{{ images.id }}">
   <div class="uw-ig__wrapper">
 
     {% embed '@layouts/carousel/carousel.twig' %}
@@ -6,6 +6,7 @@
       {% block content %}
 
         {% for image in images.images %}
+
           <div class="uw-ig__item-wrapper">
             <div class="uw_ig__image">
               {% include '@components/responsive-image/responsive-image.twig' with {
@@ -14,11 +15,13 @@
                 'alt': 'some alt'
               } %}
             </div>
-            <div class="uw_ig__caption">
-              {% include '@components/caption/caption.twig' with {
-                'caption': image.caption
-              } %}
-            </div>
+            {% if image.caption %}
+              <div class="uw_ig__caption">
+                {% include '@components/caption/caption.twig' with {
+                  'caption': image.caption
+                } %}
+              </div>
+            {% endif %}
           </div>
 
         {% endfor %}