Adding image gallery and caption

css/styles.css

@@ -2495,6 +2495,14 @@ ul.toolbar-menu {
 .uw-cta__wrapper {
   padding: 1rem 0; }
 
+.uw-caption .caption {
+  background: #eee;
+  border: solid 1px #dfdfdf;
+  color: #000;
+  font-family: Typ1451-Regular,verdana,sans-serif;
+  font-size: .88889rem;
+  padding: .5rem; }
+
 .card {
   display: flex;
   flex-direction: column; }

js/component_scripts.min.js

@@ -112,10 +112,56 @@
   };
 })(jQuery, Drupal);
 
+(function ($, Drupal) {
+  Drupal.behaviors.imagegallery = {
+    attach: function (context, settings) {
+      $(document).ready(function(){
+
+        // Step through each FF on the page.
+        $('.uw-ig').each(function() {
+
+          // 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);
+
+          // Add the carousel to the FF using the id.
+          $(id + ' .owl-carousel').owlCarousel({
+            loop: true,
+            nav: true,
+            margin: 10,
+            responsiveClass: true,
+            responsive: {
+              0: {
+                items: 1,
+                nav: true,
+                loop: true
+              },
+              600: {
+                items: 1,
+                nav: true,
+                loop: true
+              },
+              1000: {
+                items: 1,
+                nav: true,
+                loop: true
+              }
+            }
+          });
+        });
+      });
+    }
+  };
+})(jQuery, Drupal);
+
 (function ($, Drupal) {
   Drupal.behaviors.multitypelist = {
     attach: function (context, settings) {
 
+      /*
       window.addEventListener("DOMContentLoaded", () => {
         const tabs = document.querySelectorAll('[role="tab"]');
         const tabList = document.querySelector('[role="tablist"]');
@@ -178,6 +224,7 @@
             .removeAttribute("hidden");
 
       }
+      */
     }
   };
 })(jQuery, Drupal);

source/_patterns/04-components/caption/_caption.scss

+.uw-caption {
+  .caption {
+    background: #eee;
+    border: solid 1px #dfdfdf;
+    color: #000;
+    font-family: Typ1451-Regular,verdana,sans-serif;
+    font-size: .88889rem;
+    padding: .5rem;
+  }
+}
\ No newline at end of file

source/_patterns/04-components/caption/caption.twig

+<div class="uw-caption">
+  <p class="caption">{{ caption }}</p>
+</div>
\ No newline at end of file

source/_patterns/04-components/caption/caption.yml

+caption: 'This is some caption text'
\ No newline at end of file

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

+(function ($, Drupal) {
+  Drupal.behaviors.imagegallery = {
+    attach: function (context, settings) {
+      $(document).ready(function(){
+
+        // Step through each FF on the page.
+        $('.uw-ig').each(function() {
+
+          // 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);
+
+          // Add the carousel to the FF using the id.
+          $(id + ' .owl-carousel').owlCarousel({
+            loop: true,
+            nav: true,
+            margin: 10,
+            responsiveClass: true,
+            responsive: {
+              0: {
+                items: 1,
+                nav: true,
+                loop: true
+              },
+              600: {
+                items: 1,
+                nav: true,
+                loop: true
+              },
+              1000: {
+                items: 1,
+                nav: true,
+                loop: true
+              }
+            }
+          });
+        });
+      });
+    }
+  };
+})(jQuery, Drupal);

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

+<div id="uw-ig-{{ images.id }}" class="uw-ig data-id="{{ images.id }}">
+  <div class="uw-ig__wrapper">
+
+    {% embed '@layouts/carousel/carousel.twig' %}
+
+      {% 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 {
+                'sources': image.image.sources,
+                'img_element': image.image.img_element['#uri'],
+                'alt': 'some alt'
+              } %}
+            </div>
+            <div class="uw_ig__caption">
+              {% include '@components/caption/caption.twig' with {
+                'caption': image.caption
+              } %}
+            </div>
+          </div>
+
+        {% endfor %}
+      {% endblock %}
+    {% endembed %}
+  </div>
+</div>

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

+images:
+  id: 'someid'
+  images:
+    -
+      image:
+        sources:
+          - srcset: '../../../../source/images/president/president_xlarge.jpg'
+            media: 'all and (min-width: 63.19rem)'
+            type: 'image/jpeg'
+          - srcset: '../../../../source/images/president/president_large.jpg'
+            media: 'all and (min-width: 49.81rem)'
+            type: 'image/jpeg'
+          - srcset: '../../../../source/images/president/president_medium.jpg'
+            media: 'all and (min-width: 30rem)'
+            type: 'image/jpeg'
+          - srcset: '../../../../source/images/president/president_small.jpg'
+            media: 'all and (min-width: 25rem)'
+            type: 'image/jpeg'
+          - srcset: '../../../../source/images/president/president_xsmall.jpg'
+            media: 'all and (min-width: 15rem)'
+            type: 'image/jpeg'
+        img_element: '../../../../source/images/president/president_xlarge.jpg'
+        alt: 'Alternative text'
+      caption: 'UW President'
+    -
+      image:
+        sources:
+          - srcset: '../../../../source/images/president/president_xlarge.jpg'
+            media: 'all and (min-width: 63.19rem)'
+            type: 'image/jpeg'
+          - srcset: '../../../../source/images/president/president_large.jpg'
+            media: 'all and (min-width: 49.81rem)'
+            type: 'image/jpeg'
+          - srcset: '../../../../source/images/president/president_medium.jpg'
+            media: 'all and (min-width: 30rem)'
+            type: 'image/jpeg'
+          - srcset: '../../../../source/images/president/president_small.jpg'
+            media: 'all and (min-width: 25rem)'
+            type: 'image/jpeg'
+          - srcset: '../../../../source/images/president/president_xsmall.jpg'
+            media: 'all and (min-width: 15rem)'
+            type: 'image/jpeg'
+        img_element: '../../../../source/images/president/president_xlarge.jpg'
+        alt: 'Alternative text'
+      caption: 'UW President'
\ No newline at end of file