diff --git a/js/component_scripts.min.js b/js/component_scripts.min.js index 62c7ddb881220290b1944836bf6cf8d80ab0a6b3..a9e05b5661eb13101580b860f08a5d4438747fa3 100644 --- a/js/component_scripts.min.js +++ b/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); diff --git a/source/_patterns/04-components/image-gallery/image-gallery.js b/source/_patterns/04-components/image-gallery/image-gallery.js index 6b7e05bf6aa767604798b2fa32232aa675640df2..d465ba73af58bd6115f9c3d7bda916d38d56db8b 100644 --- a/source/_patterns/04-components/image-gallery/image-gallery.js +++ b/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({ diff --git a/source/_patterns/04-components/image-gallery/image-gallery.twig b/source/_patterns/04-components/image-gallery/image-gallery.twig index fc00d2e00b633b0c93db05bc55c1e1f1d13b2e3b..c864e521f81382e02e62c0a12da0523594714a0f 100644 --- a/source/_patterns/04-components/image-gallery/image-gallery.twig +++ b/source/_patterns/04-components/image-gallery/image-gallery.twig @@ -1,4 +1,4 @@ -<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 %}