<section class="media-gallery">
<section class="text-block" role="region" aria-labelledby="gallery-with-3-images">
<h2 id="gallery-with-3-images">Gallery with 3 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">
<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>
</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">
<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>
</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">
<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>
</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',
scheme: 'yellow'
} %}</p>
{% endfilter %}
{% 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 %}
>
<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.show360Icon %}<i class="uod-icons uod-icons-360-view"></i>{% endif %}
</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 3 images",
"images": [
{
"path": "/images/media-gallery-demo/media-gallery-test-image.jpg",
"alt": "Rolling hills",
"caption": null,
"callToAction": {
"href": "#",
"label": null
},
"iframe": null,
"show360Icon": null,
"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,
"show360Icon": null,
"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,
"show360Icon": null,
"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,
youtubePlayerParams: {
modestbranding: 1,
showinfo: 0,
rel: 0,
controls: 0
},
});
.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-a {
lost-column: 4/8 2 10px;
margin-bottom: 10px;
position: relative;
cursor: pointer;
@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;
}
&-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 {
position: absolute;
bottom: 10px;
right: 10px;
color: $white;
font-size: responsive 40px 60px;
font-range: $mobile-portrait $desktop;
z-index: 1;
text-shadow: rgba($black,0.5) 2px 2px 10px;
}
}
}
/* Plugin style overrides */
.lg-sub-html {
background-color: rgba($black, .65);
color: #ffffff;
h1, h2, h3, h4, h5, h6 {
color: $white;
font-size: inherit;
}
@include for-largerthan-ipad-portrait {
> p, > h1, > h2, > h3, > h4, > h5, h6 {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
}
}
.lg-toolbar .lg-close:after {
@extend %uod-icons;
content: $uod-icons-cross;
}
.lg-toolbar .lg-close {
@include hover-rotate;
}
.lg-actions {
.lg-prev {
transform: rotate(90deg);
&:after {
@extend %uod-icons;
content: $uod-icons-down-arrow;
}
}
.lg-next {
transform: rotate(90deg);
&:before {
@extend %uod-icons;
content: $uod-icons-up-arrow;
}
}
}
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.