<section class="media-gallery">
<section class="text-block" role="region" aria-labelledby="gallery-with-8-mixed-media-images">
<h2 id="gallery-with-8-mixed-media-images">Gallery with 8 mixed media images</h2>
<p>The pathways have been used to develop an indicator that measures how connected to nature a person is. It’s hoped that this indicator will be adopted by national policy makers as a way of measuring the effects of interventions. The University
led this work, alongside The Wildlife Trusts, National Trust, Natural England, RSPB, and Historic England.</p>
</section>
<section class="media-gallery-images">
<a class="media-gallery-image-a" href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
data-sizes="(min-width: 40em) 80vw, 100vw">
<div class="media-gallery-image-inner">
<img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
<div class="media-gallery-image-a-overlay">
<i class="uod-icons uod-icons-search"></i>
</div>
</div>
</a>
<a class="media-gallery-image-a" data-sub-html="<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p> "
href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
data-sizes="(min-width: 40em) 80vw, 100vw">
<div class="media-gallery-image-inner">
<img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
<div class="media-gallery-image-a-overlay">
<i class="uod-icons uod-icons-search"></i>
</div>
</div>
</a>
<a class="media-gallery-image-a" href="https://www.youtube.com/watch?v=Tj2dbHofw4I" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
data-sizes="(min-width: 40em) 80vw, 100vw">
<div class="media-gallery-image-inner">
<img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
<div class="media-gallery-image-a-overlay">
<i class="uod-icons uod-icons-search"></i>
</div>
<i class="uod-icons uod-icons-right-navigation media-play-button"></i>
</div>
</a>
<a class="media-gallery-image-a" data-sub-html="<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p> "
href="https://www.youtube.com/watch?v=Tj2dbHofw4I" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
data-sizes="(min-width: 40em) 80vw, 100vw">
<div class="media-gallery-image-inner">
<img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
<div class="media-gallery-image-a-overlay">
<i class="uod-icons uod-icons-search"></i>
</div>
<i class="uod-icons uod-icons-right-navigation media-play-button"></i>
</div>
</a>
<a class="media-gallery-image-a" href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
data-sizes="(min-width: 40em) 80vw, 100vw">
<div class="media-gallery-image-inner">
<img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
<div class="media-gallery-image-a-overlay">
<i class="uod-icons uod-icons-search"></i>
</div>
</div>
</a>
<a class="media-gallery-image-a" data-sub-html="<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p> "
href="../../images/media-gallery-demo/media-gallery-test-image.jpg" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
data-sizes="(min-width: 40em) 80vw, 100vw">
<div class="media-gallery-image-inner">
<img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
<div class="media-gallery-image-a-overlay">
<i class="uod-icons uod-icons-search"></i>
</div>
</div>
</a>
<a class="media-gallery-image-a" href="https://www.youtube.com/watch?v=Tj2dbHofw4I" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
data-sizes="(min-width: 40em) 80vw, 100vw">
<div class="media-gallery-image-inner">
<img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
<div class="media-gallery-image-a-overlay">
<i class="uod-icons uod-icons-search"></i>
</div>
<i class="uod-icons uod-icons-right-navigation media-play-button"></i>
</div>
</a>
<a class="media-gallery-image-a" data-sub-html="<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p> "
href="https://www.youtube.com/watch?v=Tj2dbHofw4I" data-srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
data-sizes="(min-width: 40em) 80vw, 100vw">
<div class="media-gallery-image-inner">
<img class="media-gallery-image-a-img" src="../../images/media-gallery-demo/media-gallery-test-image.jpg" srcset="../../images/media-gallery-demo/media-gallery-test-image,w_250.jpg 250w, ../../images/media-gallery-demo/media-gallery-test-image,w_400.jpg 400w, ../../images/media-gallery-demo/media-gallery-test-image,w_600.jpg 600w, ../../images/media-gallery-demo/media-gallery-test-image,w_900.jpg 900w, ../../images/media-gallery-demo/media-gallery-test-image,w_1200.jpg 1200w, ../../images/media-gallery-demo/media-gallery-test-image.jpg"
data-sizes="(min-width: 40em) 80vw, 100vw" alt="Rolling hills" />
<div class="media-gallery-image-a-overlay">
<i class="uod-icons uod-icons-search"></i>
</div>
<i class="uod-icons uod-icons-right-navigation media-play-button"></i>
</div>
</a>
</section>
</section>
<section class="media-gallery">
{% if ( title or content ) %}
{% include '@text-block' with {
title: title,
content: content
} %}
{% endif %}
<section class="media-gallery-images">
{% for image in images %}
<a class="media-gallery-image-a"
{% if image.caption %}
data-sub-html="{{ image.caption }}{% if image.callToAction.label %}
{% filter escape %}
<p>{% include '@button' with {
label: image.callToAction.label,
href: image.callToAction.href,
size: 'small',
} %}</p>
{% endfilter %}
{% endif %}
{% if image.transcript %}
<p class='view-transcript'><a href='{{ image.transcript }}'>View {{ image.mediaName }} transcript</a></p>
{% endif %}"
{% endif %}
{% if image.show360Icon %} data-iframe="true"{% endif %}
href="{% if image.iframe %}{{ image.iframe | path }}{% else %}{{ image.path | path }}{% endif %}"
{% if image.srcset %} data-srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}" data-sizes="(min-width: 40em) 80vw, 100vw"{% endif %}
>
<div class="media-gallery-image-inner">
<img class="media-gallery-image-a-img" src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} data-sizes="(min-width: 40em) 80vw, 100vw" alt="{{ image.alt }}" />
<div class="media-gallery-image-a-overlay">
<i class="uod-icons uod-icons-search"></i>
</div>
{% if image.type == '360' %}
<!--i class="uod-icons uod-icons-360-view"></i-->
<img src="https://www.derby.ac.uk/media/global/images/360-view.svg" class="uod-icons uod-icons-360-image" alt="">
{% elseif image.type == 'video' %}
<i class="uod-icons uod-icons-right-navigation media-play-button"></i>
{% endif %}
</div>
</a>
{% endfor %}
</section>
</section>
{
"content": "<p>The pathways have been used to develop an indicator that measures how connected to nature a person is. It’s hoped that this indicator will be adopted by national policy makers as a way of measuring the effects of interventions. The University led this work, alongside The Wildlife Trusts, National Trust, Natural England, RSPB, and Historic England.</p>",
"title": "Gallery with 8 mixed media images",
"images": [
{
"path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
"alt": "Rolling hills",
"caption": null,
"callToAction": {
"href": "#",
"label": null
},
"iframe": null,
"type": "image",
"srcset": [
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
"width": 250
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
"width": 400
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
"width": 600
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
"width": 900
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
"width": 1200
}
]
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
"alt": "Rolling hills",
"caption": "<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>",
"callToAction": {
"href": "#",
"label": null
},
"iframe": null,
"type": "image",
"srcset": [
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
"width": 250
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
"width": 400
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
"width": 600
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
"width": 900
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
"width": 1200
}
]
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
"alt": "Rolling hills",
"caption": null,
"callToAction": {
"href": "#",
"label": null
},
"iframe": "https://www.youtube.com/watch?v=Tj2dbHofw4I",
"type": "video",
"srcset": [
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
"width": 250
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
"width": 400
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
"width": 600
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
"width": 900
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
"width": 1200
}
]
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
"alt": "Rolling hills",
"caption": "<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>",
"callToAction": {
"href": "#",
"label": null
},
"iframe": "https://www.youtube.com/watch?v=Tj2dbHofw4I",
"type": "video",
"srcset": [
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
"width": 250
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
"width": 400
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
"width": 600
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
"width": 900
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
"width": 1200
}
]
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
"alt": "Rolling hills",
"caption": null,
"callToAction": {
"href": "#",
"label": null
},
"iframe": null,
"type": "image",
"srcset": [
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
"width": 250
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
"width": 400
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
"width": 600
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
"width": 900
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
"width": 1200
}
]
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
"alt": "Rolling hills",
"caption": "<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>",
"callToAction": {
"href": "#",
"label": null
},
"iframe": null,
"type": "image",
"srcset": [
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
"width": 250
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
"width": 400
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
"width": 600
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
"width": 900
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
"width": 1200
}
]
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
"alt": "Rolling hills",
"caption": null,
"callToAction": {
"href": "#",
"label": null
},
"iframe": "https://www.youtube.com/watch?v=Tj2dbHofw4I",
"type": "video",
"srcset": [
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
"width": 250
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
"width": 400
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
"width": 600
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
"width": 900
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
"width": 1200
}
]
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
"alt": "Rolling hills",
"caption": "<h4>This is the title of a caption</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus mauris nec tellus rhoncus mattis eget ut risus. Donec sit amet sem et nisl suscipit laoreet et in purus.</p>",
"callToAction": {
"href": "#",
"label": null
},
"iframe": "https://www.youtube.com/watch?v=Tj2dbHofw4I",
"type": "video",
"srcset": [
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_250.jpg",
"width": 250
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_400.jpg",
"width": 400
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_600.jpg",
"width": 600
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_900.jpg",
"width": 900
},
{
"path": "/images/media-gallery-demo/media-gallery-test-image,w_1200.jpg",
"width": 1200
}
]
}
]
}
import $ from 'jquery'
import lightgallery from 'lightgallery'
import '../../../node_modules/lg-video/dist/lg-video.min.js'
$('.media-gallery-images').lightGallery({
download: false,
videoMaxWidth: '1080px',
youtubePlayerParams: {
modestbranding: 1,
showinfo: 1,
rel: 0,
controls: 1
},
});
.media-gallery{
lost-column: 8/8;
@include margin-medium;
@include for-largerthan-ipad-portrait {
lost-column: 16/16;
@include margin-large;
}
@include for-desktop-up {
lost-offset: 2/16;
lost-column: 12/16;
}
> .text-block {
@include margin-small;
@include for-desktop-up {
lost-offset: 1/12;
lost-column: 10/12;
}
}
&-images {
display: flex;
flex-wrap: wrap;
lost-utility: clearfix;
&:before{
width: 0; //fixes bug in safari at certain browser widths
}
}
&-image-inner {
position: relative;
display: block;
padding-top: 66.7%;
height: 0;
overflow: hidden;
}
&-image-a {
lost-column: 4/8 2 10px;
margin-bottom: 10px;
cursor: pointer;
@include disable-underlines();
position: relative;
display: block;
@include for-largerthan-ipad-portrait {
lost-column: 4/16 4 10px;
}
@include for-desktop-up {
lost-column: 3/12 4 10px;
}
&:hover {
.media-gallery-image-a-overlay{
opacity: 1;
background-color: rgba($black, 0.65);
> i {
opacity: 1;
}
}
}
&-img {
max-width: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
}
&-overlay {
background-color: rgba($black, 0);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: background-color 0.15s $default-animation-curve;
z-index: 2;
> i {
left: 50%;
margin-left: -17px;
margin-top: -17px;
opacity: 0;
position: absolute;
top: 50%;
font-size: 34px;
color: #FFFFFF;
transition: opacity 0.3s $default-animation-curve;
}
}
.uod-icons-360-view, .uod-icons-360-image {
position: absolute;
bottom: 10px;
right: 10px;
width: 22.5%;
z-index: 1;
// text-shadow: rgba($black,0.5) 2px 2px 10px;
}
.uod-icons-360-image {
bottom: 0;
}
}
}
A media gallery is a way of displaying images and iframed content. A gallery is made up of number of blocks, ideally in mulitples of 4.
An image in a media gallery can open to contain a static image, a Youtube video or other iframed content.
Iframed content can have a transcript URL supplied. This will be linked to in the modal that opens the media. The media name will be used in the link text for the transcript to provide the user context.