University of Leeds Design System v1.0.15

Gallery widget

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 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 - One item</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 1 items">
                <div class="uol-gallery uol-gallery--count-1">

                    <div class="uol-gallery__item  uol-gallery__item--image ">
                        <h3 class="uol-gallery__item__title">&ldquo;Dual Form&rdquo; by Barbara Hepworth</h3>
                        <figure class="uol-gallery__figure">
                            <div class="uol-gallery__image-container">
                                <img src="/placeholders/campus/medium/29940.jpeg" alt="Dual Form sculpture by Barbara Hepworth with people relaxing on grass in background" data-src-high-quality="/placeholders/campus/full/29940.jpeg">
                            </div>

                            <figcaption class="uol-gallery__image-caption">&ldquo;Dual Form&rdquo; by Barbara Hepworth</figcaption>

                        </figure>

                        <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>
            </section>

        </div>
    </div>
</div>
 
{
  "widget_title": "Gallery widget",
  "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."
}