Guidance

Use the gallery widget to display single or groups of images, videos or combinations of both images and videos on a home page or landing page. Images and videos can also have an accompanying caption.

In addition to the image or video each item can have an accompanying title and text content.

Clicking on the item expand button will open the item in a full-screen carousel. If a title and text content is available these can be accessed by clicking in the “I” button for the corresponding carousel item.

For videos YouTube is currently the only supported platform,

When to use

Use the Gallery Widget when you want to present images or videos on a home page or landing page and have them viewable in full screen.

When not to use

  • Do not use within page content eg. document pages, blog posts, news etc.
  • Do not use to display essential information as content may be missed within the carousel layout.
  • Do not use for the following content types
    • Graphs
    • Maps
  • Do not use when very high resolution images are needed and the user needs to see the image at full natural resolution.

Developer guidance

The Gallery Widget makes use of the @uol-gallery component.

{% if gallery.items.length %}
  {% extends '@uol-widget' %}

  {% block widget_content %}
    {% render '@uol-gallery', { gallery: gallery } %}
  {% endblock %}
{% endif %}
<div class="uol-widget-container">
    <div class="uol-widget">

        <div class="uol-widget__left-col">

            <div class="uol-widget__head">

                <h2 class="uol-widget__title">Gallery widget - Videos</h2>

                <div class="uol-widget__lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, ipsum nesciunt similique consequuntur quis distinctio praesentium mollitia aliquam dignissimos sapiente vel cumque neque illum veniam quisquam provident molestias quo voluptatibus.</div>

            </div>

        </div>

        <div class="uol-widget__content">

            <section class="uol-gallery-container" aria-label="Gallery of 6 items">
                <div class="uol-gallery uol-gallery--count-6">

                    <div class="uol-gallery__item uol-gallery__item--video  " data-video="https://www.youtube.com/watch?v=PpilTVi5Yk4">
                        <h3 class="uol-gallery__item__title">Ear tickle therapy, the world's thinnest gold and Hajj regulation</h3>
                        <figure class="uol-gallery__figure">
                            <div class="uol-gallery__image-container">
                                <img src="#" alt="">
                            </div>

                            <figcaption class="uol-gallery__image-caption">Ear tickle therapy, the world's thinnest gold and Hajj regulation</figcaption>

                        </figure>

                        <noscript>
                            <a href="https://www.youtube.com/watch?v=PpilTVi5Yk4">https://www.youtube.com/watch?v=PpilTVi5Yk4</a>
                        </noscript>

                        <div class="uol-gallery__item__content">
                            <p>Lorem ipsum <a href='/some-text-link'>dolor sit amet consectetur</a> adipisicing elit. Corrupti, quasi nostrum blanditiis hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, consequuntur recusandae? Ipsam, asperiores.</p>
                            <p>Expedita saepe illo vero sit et! Eveniet, deserunt. Nihil omnis fugit ut veniam ullam, non maiores, consequatur amet enim dolore totam, laborum accusantium voluptatum iure est ab aspernatur reiciendis explicabo.</p>
                            <p>Eos reprehenderit suscipit, at eveniet, minus ea quod quis provident, nisi fugit maiores molestias culpa. Rerum rem pariatur quo mollitia autem omnis eum officiis, natus beatae eos saepe culpa earum!</p>
                            <p>Eum ut tempore delectus quos unde tenetur neque perspiciatis. Dicta sunt rem dolore, in ab impedit assumenda, quaerat neque quos veritatis consequatur accusantium dignissimos eius natus iusto nostrum eos maxime.</p>
                        </div>

                    </div>

                    <div class="uol-gallery__item uol-gallery__item--video  " data-video="https://www.youtube.com/watch?v=_-hZg6E6OOc">
                        <h3 class="uol-gallery__item__title">Edible bugs, paying for parks, animals and climate change</h3>
                        <figure class="uol-gallery__figure">
                            <div class="uol-gallery__image-container">
                                <img src="#" alt="">
                            </div>

                            <figcaption class="uol-gallery__image-caption">Edible bugs, paying for parks, animals and climate change</figcaption>

                        </figure>

                        <noscript>
                            <a href="https://www.youtube.com/watch?v=_-hZg6E6OOc">https://www.youtube.com/watch?v=_-hZg6E6OOc</a>
                        </noscript>

                        <div class="uol-gallery__item__content">
                            <p>Lorem ipsum <a href='/some-text-link'>dolor sit amet consectetur</a> adipisicing elit. Corrupti, quasi nostrum blanditiis hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, consequuntur recusandae? Ipsam, asperiores.</p>
                            <p>Expedita saepe illo vero sit et! Eveniet, deserunt. Nihil omnis fugit ut veniam ullam, non maiores, consequatur amet enim dolore totam, laborum accusantium voluptatum iure est ab aspernatur reiciendis explicabo.</p>
                            <p>Eos reprehenderit suscipit, at eveniet, minus ea quod quis provident, nisi fugit maiores molestias culpa. Rerum rem pariatur quo mollitia autem omnis eum officiis, natus beatae eos saepe culpa earum!</p>
                            <p>Eum ut tempore delectus quos unde tenetur neque perspiciatis. Dicta sunt rem dolore, in ab impedit assumenda, quaerat neque quos veritatis consequatur accusantium dignissimos eius natus iusto nostrum eos maxime.</p>
                        </div>

                    </div>

                    <div class="uol-gallery__item uol-gallery__item--video  " data-video="https://www.youtube.com/watch?v=j4pt8l7e3u8">
                        <h3 class="uol-gallery__item__title">Studying in a different country</h3>
                        <figure class="uol-gallery__figure">
                            <div class="uol-gallery__image-container">
                                <img src="#" alt="">
                            </div>

                            <figcaption class="uol-gallery__image-caption">Studying in a different country</figcaption>

                        </figure>

                        <noscript>
                            <a href="https://www.youtube.com/watch?v=j4pt8l7e3u8">https://www.youtube.com/watch?v=j4pt8l7e3u8</a>
                        </noscript>

                        <div class="uol-gallery__item__content">
                            <p>Being an international student can be nerve-wracking, but at the University of Leeds we're here to help every step of the way. If you're studying in a new country, there's lots to get your head around, but lots of opportunities too, to make new friends and try new experiences. </p>
                            <p>Every year more than 6,000 international students choose to study with us, making our campus one of the most diverse and multicultural in the UK. </p>
                            <p>Join our new Virtual Open Days: <a href='https://virtualopenday.leeds.ac.uk'>https://virtualopenday.leeds.ac.uk</a></p>
                        </div>

                    </div>

                    <div class="uol-gallery__item uol-gallery__item--video  " data-video="https://www.youtube.com/watch?v=Ej7oXq_AHCU">
                        <h3 class="uol-gallery__item__title">You Can Master with the University of Leeds</h3>
                        <figure class="uol-gallery__figure">
                            <div class="uol-gallery__image-container">
                                <img src="#" alt="">
                            </div>

                            <figcaption class="uol-gallery__image-caption">You Can Master with the University of Leeds</figcaption>

                        </figure>

                        <noscript>
                            <a href="https://www.youtube.com/watch?v=Ej7oXq_AHCU">https://www.youtube.com/watch?v=Ej7oXq_AHCU</a>
                        </noscript>

                        <div class="uol-gallery__item__content">
                            <p>Whether you're continuing from undergraduate study, returning to education or changing direction, a postgraduate degree from the University of Leeds can help you take the next step. We'll challenge you to explore, question and discover.</p>
                            <p>You can Master with the University of Leeds.</p>
                            <p>Start your journey to postgraduate study today: <a href='https://www.leeds.ac.uk/info/101000/masters_courses'>Masters Courses</a></p>
                        </div>

                    </div>

                    <div class="uol-gallery__item uol-gallery__item--video  " data-video="https://youtu.be/_zbLlZ10R5Y">
                        <h3 class="uol-gallery__item__title">Understanding the past, shaping the present and innovating for the future with research at Leeds</h3>
                        <figure class="uol-gallery__figure">
                            <div class="uol-gallery__image-container">
                                <img src="#" alt="">
                            </div>

                            <figcaption class="uol-gallery__image-caption">Understanding the past, shaping the present and innovating for the future with research at Leeds</figcaption>

                        </figure>

                        <noscript>
                            <a href="https://youtu.be/_zbLlZ10R5Y">https://youtu.be/_zbLlZ10R5Y</a>
                        </noscript>

                        <div class="uol-gallery__item__content">
                            <p>This month, we're deepening our understanding of the past, present and future through research.
                            <p>
                            <p>Preserving invaluable cultural legacies for future generations</p>
                            <p>Children playing wallops (nine-pins) in the street at Castle Bolton in Wensleydale, North Yorkshire, 1964. A group of men can be seen sitting on a bench, watching men from the village playing quoits on the grass verge.</p>
                            <p>The University's Dialect and Heritage project has been awarded £530,500 from The National Lottery Heritage Fund to open up the extensive Leeds Archive of Vernacular Culture (LAVC) to the public. </p>
                            <p>As well as the National Lottery Heritage Fund £530,500 grant, the University of Leeds’ Footsteps Fund and other alumni donations have contributed almost £110,000 to the project, plus up to £23,000 from the partner museums.</p>
                            <p>The archive includes the ground-breaking work of the Survey of English Dialects, carried out by nine intrepid fieldworkers in the 1950s and is held in Leeds University Library’s Special Collections. The survey will now be updated and made available online for the first time.</p>
                            <p>Skipping breakfast linked to lower GCSE grades</p>
                            <p>Researchers, from the University of Leeds, have for the first time demonstrated a link between eating breakfast and GCSE performance for secondary school students in the UK.</p>
                            <p>Adding together all of a student’s exam results, they found that students who said they rarely ate breakfast achieved nearly two grades lower than those who rarely missed their morning meal.</p>
                            <p>The findings were covered extensively in the press, including on The Telegraph, The Mirror and the Daily Mail. </p>
                            <p>Pioneering new radiotherapy technologies</p>
                            <p>Leeds scientists and clinicians have been awarded a major cash boost from Cancer Research UK to pioneer new radiotherapy technologies that could help more people in Yorkshire survive cancer.</p>
                            <p>Professor David Sebag-Montefiore standing next to a radiotherapy machine in a blue room treatment room in a hospital in Leeds.</p>
                            <p>Experts from the University of Leeds and Leeds Teaching Hospitals NHS Trust are set to receive £3.5 million over the next five years to fund advances in radiotherapy research, including the use of artificial intelligence with imaging technology.</p>
                        </div>

                    </div>

                    <div class="uol-gallery__item uol-gallery__item--video  " data-video="https://youtu.be/y28L6rzglNY">
                        <h3 class="uol-gallery__item__title">New cancer research, heart attack care and superbug innovation</h3>
                        <figure class="uol-gallery__figure">
                            <div class="uol-gallery__image-container">
                                <img src="#" alt="">
                            </div>

                            <figcaption class="uol-gallery__image-caption">New cancer research, heart attack care and superbug innovation</figcaption>

                        </figure>

                        <noscript>
                            <a href="https://youtu.be/y28L6rzglNY">https://youtu.be/y28L6rzglNY</a>
                        </noscript>

                        <div class="uol-gallery__item__content">
                            <p>October roundup of some the latest research and education stories from the University.</p>
                            <p>Improving cancer treatments and patient care through collaboration</p>
                            <p>Researchers in Yorkshire are collaborating on a new national data hub that aims to transform how cancer data from across the UK can be used to improve patient care.</p>
                            <p>Collaborators from Yorkshire and Humber include the University of Leeds, Leeds Teaching Hospitals NHS Trust, University of Sheffield, Sheffield Teaching Hospitals, Sheffield Children’s Hospitals, Yorkshire and Humber Local Health Care Record, and Yorkshire & Humber Academic Health Science Network. </p>
                            <p>The work has been awarded £4.5 million to deliver DATA-CAN, the Health Data Research Hub for Cancer. </p>
                            <p>Another exciting Light Night in Leeds</p>
                            <p>Art and biology met on campus for another year of Light Night. </p>
                            <p>Light Night is the UK’s largest annual arts and light festival. It will see the transformation of some of Leeds' most recognisable indoor and outdoor spaces during two special nights.</p>
                            <p>Visitors were invited to step inside The Nectary - a series of huge, glowing flower heads, carefully crafted from recycled plastic and hung from trees in University Square - amongst other amazing cultural attractions on campus.</p>
                            <p>Leeds scientists reveal gender gaps in heart attack care </p>
                            <p>In partnership with the British Heart Foundation, Leeds researchers have helped to highlight the inequalities in awareness, diagnosis, treatment and care for women suffering a heart attack. </p>
                            <p>Professor Chris Gale's research looked at the disparity in care for men and women after experiencing a heart attack. The new report was covered widely, including extensively on the BBC.</p>
                            <p>Scientists have uncovered a novel approach to prevent and treating a widespread superbug</p>
                            <p>Helicobacter pylori, a bacterial pathogen carried by 4.4 billion people worldwide</p>
                            <p>Working with researchers across the UK and in Germany, Leeds scientists have developed an approach to tackling a widespread superbug using natural ingredients.</p>
                            <p>The bug, Helicobacter pylori (H. pylori), is a bacterial pathogen carried by 4.4 billion people worldwide, with the highest prevalence in Africa, Latin America and the Caribbean.</p>
                            <p>Although the majority of infections show no symptoms, if left untreated the pathogen can cause chronic inflammation of the stomach lining, ulcers and is associated with an increased risk of gastric cancer.</p>
                            <p>Current treatments involve multi-target therapy with a combination of antibiotics, but this has promoted the emergence of resistant strains.</p>
                            <p>Scientists have now uncovered a novel antibiotic-free approach using only food- and pharmaceutical-grade ingredients.</p>
                        </div>

                    </div>

                </div>
            </section>

        </div>
    </div>
</div>
{
  "widget_title": "Gallery widget - Videos",
  "widget_lead": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, ipsum nesciunt similique consequuntur quis distinctio praesentium mollitia aliquam dignissimos sapiente vel cumque neque illum veniam quisquam provident molestias quo voluptatibus.",
  "gallery": {
    "headingLevel": 3,
    "items": [
      {
        "title": "Ear tickle therapy, the world's thinnest gold and Hajj regulation",
        "type": "video",
        "video": "https://www.youtube.com/watch?v=PpilTVi5Yk4",
        "img": {
          "caption": "Ear tickle therapy, the world's thinnest gold and Hajj regulation"
        },
        "content": "<p>Lorem ipsum <a href='/some-text-link'>dolor sit amet consectetur</a> adipisicing elit. Corrupti, quasi nostrum blanditiis hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, consequuntur recusandae? Ipsam, asperiores.</p><p>Expedita saepe illo vero sit et! Eveniet, deserunt. Nihil omnis fugit ut veniam ullam, non maiores, consequatur amet enim dolore totam, laborum accusantium voluptatum iure est ab aspernatur reiciendis explicabo.</p><p>Eos reprehenderit suscipit, at eveniet, minus ea quod quis provident, nisi fugit maiores molestias culpa. Rerum rem pariatur quo mollitia autem omnis eum officiis, natus beatae eos saepe culpa earum!</p><p>Eum ut tempore delectus quos unde tenetur neque perspiciatis. Dicta sunt rem dolore, in ab impedit assumenda, quaerat neque quos veritatis consequatur accusantium dignissimos eius natus iusto nostrum eos maxime.</p>"
      },
      {
        "title": "Edible bugs, paying for parks, animals and climate change",
        "type": "video",
        "video": "https://www.youtube.com/watch?v=_-hZg6E6OOc",
        "img": {
          "caption": "Edible bugs, paying for parks, animals and climate change"
        },
        "content": "<p>Lorem ipsum <a href='/some-text-link'>dolor sit amet consectetur</a> adipisicing elit. Corrupti, quasi nostrum blanditiis hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, consequuntur recusandae? Ipsam, asperiores.</p><p>Expedita saepe illo vero sit et! Eveniet, deserunt. Nihil omnis fugit ut veniam ullam, non maiores, consequatur amet enim dolore totam, laborum accusantium voluptatum iure est ab aspernatur reiciendis explicabo.</p><p>Eos reprehenderit suscipit, at eveniet, minus ea quod quis provident, nisi fugit maiores molestias culpa. Rerum rem pariatur quo mollitia autem omnis eum officiis, natus beatae eos saepe culpa earum!</p><p>Eum ut tempore delectus quos unde tenetur neque perspiciatis. Dicta sunt rem dolore, in ab impedit assumenda, quaerat neque quos veritatis consequatur accusantium dignissimos eius natus iusto nostrum eos maxime.</p>"
      },
      {
        "title": "Studying in a different country",
        "type": "video",
        "video": "https://www.youtube.com/watch?v=j4pt8l7e3u8",
        "img": {
          "caption": "Studying in a different country"
        },
        "content": "<p>Being an international student can be nerve-wracking, but at the University of Leeds we're here to help every step of the way. If you're studying in a new country, there's lots to get your head around, but lots of opportunities too, to make new friends and try new experiences. </p><p>Every year more than 6,000 international students choose to study with us, making our campus one of the most diverse and multicultural in the UK. </p><p>Join our new Virtual Open Days: <a href='https://virtualopenday.leeds.ac.uk'>https://virtualopenday.leeds.ac.uk</a></p>"
      },
      {
        "title": "You Can Master with the University of Leeds",
        "type": "video",
        "video": "https://www.youtube.com/watch?v=Ej7oXq_AHCU",
        "img": {
          "caption": "You Can Master with the University of Leeds"
        },
        "content": "<p>Whether you're continuing from undergraduate study, returning to education or changing direction, a postgraduate degree from the University of Leeds can help you take the next step. We'll challenge you to explore, question and discover.</p><p>You can Master with the University of Leeds.</p><p>Start your journey to postgraduate study today: <a href='https://www.leeds.ac.uk/info/101000/masters_courses'>Masters Courses</a></p>"
      },
      {
        "title": "Understanding the past, shaping the present and innovating for the future with research at Leeds",
        "type": "video",
        "video": "https://youtu.be/_zbLlZ10R5Y",
        "img": {
          "caption": "Understanding the past, shaping the present and innovating for the future with research at Leeds"
        },
        "content": "<p>This month, we're deepening our understanding of the past, present and future through research.<p><p>Preserving invaluable cultural legacies for future generations</p><p>Children playing wallops (nine-pins) in the street at Castle Bolton in Wensleydale, North Yorkshire, 1964. A group of men can be seen sitting on a bench, watching men from the village playing quoits on the grass verge.</p><p>The University's Dialect and Heritage project has been awarded £530,500 from The National Lottery Heritage Fund to open up the extensive Leeds Archive of Vernacular Culture (LAVC) to the public. </p><p>As well as the National Lottery Heritage Fund £530,500 grant, the University of Leeds’ Footsteps Fund and other alumni donations have contributed almost £110,000 to the project, plus up to £23,000 from the partner museums.</p><p>The archive includes the ground-breaking work of the Survey of English Dialects, carried out by nine intrepid fieldworkers in the 1950s and is held in Leeds University Library’s Special Collections. The survey will now be updated and made available online for the first time.</p><p>Skipping breakfast linked to lower GCSE grades</p><p>Researchers, from the University of Leeds, have for the first time demonstrated a link between eating breakfast and GCSE performance for secondary school students in the UK.</p><p>Adding together all of a student’s exam results, they found that students who said they rarely ate breakfast achieved nearly two grades lower than those who rarely missed their morning meal.</p><p>The findings were covered extensively in the press, including on The Telegraph, The Mirror and the Daily Mail. </p><p>Pioneering new radiotherapy technologies</p><p>Leeds scientists and clinicians have been awarded a major cash boost from Cancer Research UK to pioneer new radiotherapy technologies that could help more people in Yorkshire survive cancer.</p><p>Professor David Sebag-Montefiore standing next to a radiotherapy machine in a blue room treatment room in a hospital in Leeds.</p><p>Experts from the University of Leeds and Leeds Teaching Hospitals NHS Trust are set to receive £3.5 million over the next five years to fund advances in radiotherapy research, including the use of artificial intelligence with imaging technology.</p>"
      },
      {
        "title": "New cancer research, heart attack care and superbug innovation",
        "type": "video",
        "video": "https://youtu.be/y28L6rzglNY",
        "img": {
          "caption": "New cancer research, heart attack care and superbug innovation"
        },
        "content": "<p>October roundup of some the latest research and education stories from the University.</p><p>Improving cancer treatments and patient care through collaboration</p><p>Researchers in Yorkshire are collaborating on a new national data hub that aims to transform how cancer data from across the UK can be used to improve patient care.</p><p>Collaborators from Yorkshire and Humber include the University of Leeds, Leeds Teaching Hospitals NHS Trust, University of Sheffield, Sheffield Teaching Hospitals, Sheffield Children’s Hospitals, Yorkshire and Humber Local Health Care Record, and Yorkshire & Humber Academic Health Science Network. </p><p>The work has been awarded £4.5 million to deliver DATA-CAN, the Health Data Research Hub for Cancer. </p><p>Another exciting Light Night in Leeds</p><p>Art and biology met on campus for another year of Light Night. </p><p>Light Night is the UK’s largest annual arts and light festival. It will see the transformation of some of Leeds' most recognisable indoor and outdoor spaces during two special nights.</p><p>Visitors were invited to step inside The Nectary - a series of huge, glowing flower heads, carefully crafted from recycled plastic and hung from trees in University Square - amongst other amazing cultural attractions on campus.</p><p>Leeds scientists reveal gender gaps in heart attack care </p><p>In partnership with the British Heart Foundation, Leeds researchers have helped to highlight the inequalities in awareness, diagnosis, treatment and care for women suffering a heart attack. </p><p>Professor Chris Gale's research looked at the disparity in care for men and women after experiencing a heart attack. The new report was covered widely, including extensively on the BBC.</p><p>Scientists have uncovered a novel approach to prevent and treating a widespread superbug</p><p>Helicobacter pylori, a bacterial pathogen carried by 4.4 billion people worldwide</p><p>Working with researchers across the UK and in Germany, Leeds scientists have developed an approach to tackling a widespread superbug using natural ingredients.</p><p>The bug, Helicobacter pylori (H. pylori), is a bacterial pathogen carried by 4.4 billion people worldwide, with the highest prevalence in Africa, Latin America and the Caribbean.</p><p>Although the majority of infections show no symptoms, if left untreated the pathogen can cause chronic inflammation of the stomach lining, ulcers and is associated with an increased risk of gastric cancer.</p><p>Current treatments involve multi-target therapy with a combination of antibiotics, but this has promoted the emergence of resistant strains.</p><p>Scientists have now uncovered a novel antibiotic-free approach using only food- and pharmaceutical-grade ingredients.</p>"
      }
    ]
  }
}