University of Derby

Media Gallery 

<section class="media-gallery">
    <section class="text-block" role="region" aria-labelledby="gallery-with-8-images">
        <h2 id="gallery-with-8-images">Gallery with 8 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" 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>                                                            &lt;p&gt;&lt;a href=&quot;#&quot; class=&quot;button-outline button-small&quot; title=&quot;Gallery with 8 images&quot; role=&quot;button&quot; tabindex=&quot;0&quot; data-scroll&gt;
        Book your Open Day
            &lt;span class=&quot;button-overlay&quot;&gt;&lt;span&gt;
                        Book your Open Day
                    &lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
                                                                                                        <p class='view-transcript'><a href='https://www.w3.org/WAI/highlights/200606wcag2interview.html'>View  transcript</a></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="../../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" 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>                                                            &lt;p&gt;&lt;a href=&quot;#&quot; class=&quot;button-outline button-small&quot; title=&quot;Gallery with 8 images&quot; role=&quot;button&quot; tabindex=&quot;0&quot; data-scroll&gt;
        Book your Open Day
            &lt;span class=&quot;button-overlay&quot;&gt;&lt;span&gt;
                        Book your Open Day
                    &lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
                                                                                                        <p class='view-transcript'><a href='https://www.w3.org/WAI/highlights/200606wcag2interview.html'>View  transcript</a></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="../../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>
    </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>"
}
  • Content: 
    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
    },
});
  • URL: /components/raw/media-gallery/media-gallery.js
  • Filesystem Path: components/components/media-gallery/media-gallery.js
  • Size: 341 Bytes
  • Content: 
    .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;
        }

    }
}
  • URL: /components/raw/media-gallery/media-gallery.scss
  • Filesystem Path: components/components/media-gallery/media-gallery.scss
  • Size: 2.5 KB

Media Gallery Component

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.

Options

  • A gallery can have a text block to act as an introduction

Properties

  • title [optional, string]
  • content [optional, block]
  • Images [required, Array of Image]

Image

  • caption [optional, string]
  • callToAction [optional, LinkObject]
  • iframe [optional, string(path)]
  • type [required, string “video” or “360”]
  • path [required, string(path)]
  • alt [required, string]
  • srcset [optional, Array of ResponsiveImage]
  • transcript [optional, string(path)]
  • mediaName [optional, string]

ResponsiveImage

  • image [required, string(path)]
  • width [required, number]