diff --git a/css/styles.css b/css/styles.css
index 9391ef5295699aa0ac04a0b3d40d4ddf19d56a33..224dbc940ecaf70a94dbacb49bc3012e983433ea 100644
--- a/css/styles.css
+++ b/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; }
diff --git a/js/component_scripts.min.js b/js/component_scripts.min.js
index ed77c3a64573d68632b3c42d0304c82592def060..83115fc844b91ae0d6d36dd9cfe5842384b5cf31 100644
--- a/js/component_scripts.min.js
+++ b/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);
diff --git a/source/_patterns/04-components/caption/_caption.scss b/source/_patterns/04-components/caption/_caption.scss
new file mode 100644
index 0000000000000000000000000000000000000000..93ff6d18167efc22016fdb2ca4f441234a5bb3ac
--- /dev/null
+++ b/source/_patterns/04-components/caption/_caption.scss
@@ -0,0 +1,10 @@
+.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
diff --git a/source/_patterns/04-components/caption/caption.twig b/source/_patterns/04-components/caption/caption.twig
new file mode 100644
index 0000000000000000000000000000000000000000..6137b6c6542f77d64f9299232968793047c886ea
--- /dev/null
+++ b/source/_patterns/04-components/caption/caption.twig
@@ -0,0 +1,3 @@
+<div class="uw-caption">
+ <p class="caption">{{ caption }}</p>
+</div>
\ No newline at end of file
diff --git a/source/_patterns/04-components/caption/caption.yml b/source/_patterns/04-components/caption/caption.yml
new file mode 100644
index 0000000000000000000000000000000000000000..1745503de3d3dd2aabd2d9851ba03111b8663ed1
--- /dev/null
+++ b/source/_patterns/04-components/caption/caption.yml
@@ -0,0 +1 @@
+caption: 'This is some caption text'
\ No newline at end of file
diff --git a/source/_patterns/04-components/image-gallery/image-gallery.js b/source/_patterns/04-components/image-gallery/image-gallery.js
new file mode 100644
index 0000000000000000000000000000000000000000..6b7e05bf6aa767604798b2fa32232aa675640df2
--- /dev/null
+++ b/source/_patterns/04-components/image-gallery/image-gallery.js
@@ -0,0 +1,44 @@
+(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);
diff --git a/source/_patterns/04-components/image-gallery/image-gallery.twig b/source/_patterns/04-components/image-gallery/image-gallery.twig
new file mode 100644
index 0000000000000000000000000000000000000000..fc00d2e00b633b0c93db05bc55c1e1f1d13b2e3b
--- /dev/null
+++ b/source/_patterns/04-components/image-gallery/image-gallery.twig
@@ -0,0 +1,28 @@
+<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>
diff --git a/source/_patterns/04-components/image-gallery/image-gallery.yml b/source/_patterns/04-components/image-gallery/image-gallery.yml
new file mode 100644
index 0000000000000000000000000000000000000000..6c20fda15bcfcf23bbac61ac56e18e63c813a8ae
--- /dev/null
+++ b/source/_patterns/04-components/image-gallery/image-gallery.yml
@@ -0,0 +1,45 @@
+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