<section class="media-gallery">
<section class="text-block" role="region" aria-labelledby="media-gallery-item-video-with-transcript">
<h2 id="media-gallery-item-video-with-transcript">Media gallery item video with transcript</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" 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> <p class='view-transcript'><a href='https://www.w3.org/WAI/highlights/200606wcag2interview.html'>View Applicant Days at the University of Derby transcript</a></p>
" href="https://www.youtube.com/watch?v=Tj2dbHofw4I">
<div class="media-gallery-image-inner">
<img class="media-gallery-image-a-img" src="../../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": "Media gallery item video with transcript",
"images": [
{
"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",
"transcript": "https://www.w3.org/WAI/highlights/200606wcag2interview.html",
"mediaName": "Applicant Days at the University of Derby"
}
]
}
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.