Commit c3d0ce09 authored by Eric Bremner's avatar Eric Bremner

Adding image gallery and caption

parent d7c19f09
......@@ -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; }
......
......@@ -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);
......
.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
<div class="uw-caption">
<p class="caption">{{ caption }}</p>
</div>
\ No newline at end of file
caption: 'This is some caption text'
\ No newline at end of file
(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);
<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>
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
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment