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,
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.
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 - Five items</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 5 items">
<div class="uol-gallery uol-gallery--count-5">
<div class="uol-gallery__item uol-gallery__item--image ">
<h3 class="uol-gallery__item__title">“Dual Form” 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">“Dual Form” 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 class="uol-gallery__item uol-gallery__item--image ">
<h3 class="uol-gallery__item__title">Edward Boyle Library</h3>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img src="/placeholders/campus/medium/28573.jpeg" alt="Steps outside Edward Boyle Library" data-src-high-quality="/placeholders/campus/full/28573.jpeg">
</div>
</figure>
<div class="uol-gallery__item__content">
<p>Lorem ipsum dolor sit amet consectetur 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, <a href='/some-text-link'>minus ea quod</a> 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--image ">
<h3 class="uol-gallery__item__title">Victoria Quarter Arcade, Leeds</h3>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img src="/placeholders/campus/medium/29936.jpeg" alt="Interior of Victoria Quarter Arcade" data-src-high-quality="/placeholders/campus/full/29936.jpeg">
</div>
<figcaption class="uol-gallery__image-caption">Victoria Quarter</figcaption>
</figure>
<div class="uol-gallery__item__content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, quasi nostrum blanditiis hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, <a href='/some-text-link'>consequuntur recusandae? Ipsam</a>, 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--image ">
<h3 class="uol-gallery__item__title">Reger Stevens building</h3>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img src="/placeholders/campus/medium/29921.jpeg" alt="Pond outside Roger Stevens building" data-src-high-quality="/placeholders/campus/full/29921.jpeg">
</div>
</figure>
<div class="uol-gallery__item__content">
<p>Lorem ipsum dolor sit amet consectetur <a href='/some-text-link'>adipisicing elit</a>. 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--image ">
<h3 class="uol-gallery__item__title">Great Hall</h3>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img src="/placeholders/campus/medium/30092.jpeg" alt="The Great Hall viewed through Autumn trees" data-src-high-quality="/placeholders/campus/full/30092.jpeg">
</div>
<figcaption class="uol-gallery__image-caption">The Great Hall is the focus for the University's ceremonial activities</figcaption>
</figure>
<div class="uol-gallery__item__content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, quasi <a href='/some-text-link'>nostrum blanditiis</a> 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 - Five items",
"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": "“Dual Form” by Barbara Hepworth",
"img": {
"srcHighQuality": "/placeholders/campus/full/29940.jpeg",
"src": "/placeholders/campus/medium/29940.jpeg",
"alt": "Dual Form sculpture by Barbara Hepworth with people relaxing on grass in background",
"caption": "“Dual Form” by Barbara Hepworth"
},
"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": "Edward Boyle Library",
"img": {
"srcHighQuality": "/placeholders/campus/full/28573.jpeg",
"src": "/placeholders/campus/medium/28573.jpeg",
"alt": "Steps outside Edward Boyle Library"
},
"content": "<p>Lorem ipsum dolor sit amet consectetur 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, <a href='/some-text-link'>minus ea quod</a> 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": "Victoria Quarter Arcade, Leeds",
"img": {
"srcHighQuality": "/placeholders/campus/full/29936.jpeg",
"src": "/placeholders/campus/medium/29936.jpeg",
"alt": "Interior of Victoria Quarter Arcade",
"caption": "Victoria Quarter"
},
"content": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, quasi nostrum blanditiis hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, <a href='/some-text-link'>consequuntur recusandae? Ipsam</a>, 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": "Reger Stevens building",
"img": {
"srcHighQuality": "/placeholders/campus/full/29921.jpeg",
"src": "/placeholders/campus/medium/29921.jpeg",
"alt": "Pond outside Roger Stevens building"
},
"content": "<p>Lorem ipsum dolor sit amet consectetur <a href='/some-text-link'>adipisicing elit</a>. 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": "Great Hall",
"img": {
"srcHighQuality": "/placeholders/campus/full/30092.jpeg",
"src": "/placeholders/campus/medium/30092.jpeg",
"alt": "The Great Hall viewed through Autumn trees",
"caption": "The Great Hall is the focus for the University's ceremonial activities"
},
"content": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, quasi <a href='/some-text-link'>nostrum blanditiis</a> 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>"
}
]
}
}