University of Derby

Media Gallery: 24 Images 

<section class="media-gallery">
    <section class="text-block" role="region" aria-labelledby="gallery-with-24-images">
        <h2 id="gallery-with-24-images">Gallery with 24 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" 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">
                <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" 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-yellow button-small&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;
                                            " 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" 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">
                <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" 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-yellow button-small&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;
                                            " 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" 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">
                <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" 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-yellow button-small&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;
                                            " 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" 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">
                <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" 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-yellow button-small&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;
                                            " 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" 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">
                <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" 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-yellow button-small&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;
                                            " 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" 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">
                <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" 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-yellow button-small&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;
                                            " 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" 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">
                <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" 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-yellow button-small&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;
                                            " 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" 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">
                <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" 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-yellow button-small&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;
                                            " 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 24 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": "<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,
      "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": "<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": "Book your Open Day"
      },
      "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": "<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,
      "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": "<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": "Book your Open Day"
      },
      "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": "<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,
      "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": "<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": "Book your Open Day"
      },
      "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": "<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,
      "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": "<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": "Book your Open Day"
      },
      "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": "<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,
      "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": "<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": "Book your Open Day"
      },
      "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": "<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,
      "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": "<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": "Book your Open Day"
      },
      "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": "<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,
      "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": "<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": "Book your Open Day"
      },
      "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": "<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,
      "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": "<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": "Book your Open Day"
      },
      "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
        }
      ]
    }
  ]
}
  • Content: 
    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
    },
});
  • URL: /components/raw/media-gallery/media-gallery.js
  • Filesystem Path: components/components/media-gallery/media-gallery.js
  • Size: 312 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-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;
        }
    }
}
  • URL: /components/raw/media-gallery/media-gallery.scss
  • Filesystem Path: components/components/media-gallery/media-gallery.scss
  • Size: 3.1 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.

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)]
  • show360Icon [required, bool]
  • path [required, string(path)]
  • alt [required, string]
  • srcset [optional, Array of ResponsiveImage]

ResponsiveImage

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