New web
Web pattern library, style and technical reference
Container Templates
Media gallery
The Media Gallery component allows for a standardised method of including a gallery of images and/or videos on a web page. It provides both carousel and grid display layouts.
This component can be used by applying the Media gallery container template to a WYSIWYG content area.
The media gallery component is part of our standardised Unicorn Component Library for the UON website.
Asset setup
| Asset type | WYSIWYG content container on a Standard Page |
|---|---|
| Container template | Media gallery |
| Content asset | A folder containing images and/or link assets. Asset ID gets entered into the 'Gallery folder' configuration field. |
Asset configuration
| Field | Type | Value | Default | Usage |
|---|---|---|---|---|
| Gallery folder Required |
Related Asset | - none - | Referenced Asset must be a folder containing images and/or link assets (for YouTube videos) | |
| Heading (H2) Optional |
Text | - none - | ||
| Menu label Optional |
Text | - none - | Used to display a menu link in the horizontal inline menu, for example on degrees and study areas. Can be the same value as 'Heading', or customised to suite the menu. Only applicable if a 'Heading' has been specified. | |
| Intro Optional |
WYSIWYG | - none - | Allows you to provide an introductory sentence/paragraph to explain the contents of the gallery to users. | |
| Layout Required |
Select |
|
Slideshow carousel | Defines the layout of the gallery, see examples below to see how each style works and displays. |
| Hide all captions Required |
Select |
|
No | This will hide all captions from images in a slideshow. Only applicable when the selected 'Layout' value is 'Slideshow carousel' |
Examples
Slideshow carousel example
The best option for a clean look, works best for small to medium sized galleries.
Small carousel example
The best option if you need to include a gallery but want to minimse the space it takes up on the page.
Square grid example
The best option for a clean grid look, works best for small to medium sized galleries.
Masonry grid example
For stacking a gallery that is a mixture of portrait and landscape size, goot for medium to large galleries.
Small grid example
This small grid style could be useful for those spots where people dump a gallery of 30 images onto a page. The small thumbnails would help load time, and prevent the length of the page from blowing out.
Related assets
Resources
| Javascript | uon-media-gallery.js | Loaded as part of the unicorn.min.js library (#432462) |
|---|---|---|
| Stylesheet | uon-media-gallery.css | Loaded as part of the unicorn.min.css library (#432456) |
Content container template
| Content container template | #474238 - Media gallery | |
|---|---|---|
| Metadata schema | #474239 - Media gallery - Metadata schema | |
| Paint layout | #474251 - Media gallery - Paint layout | |
| Simple edit layout | #474259 - Media gallery - Edit layout |
Paint layouts
| Media gallery - Slideshow carousel | #474262 | |
|---|---|---|
| Media gallery - Small carousel | #476255 | |
| Media gallery - Standard grid | #474349 | |
| Media gallery - Masonry grid | #474402 | |
| Media gallery - Small grid | #474528 |
Code
/*********************************/
/** UON Media Gallery **/
/** -- August 2018 **/
/** -- Dean Robinson (djr145) **/
/*********************************/
/** UON Gallery Carousel **/
.body-content .uon-gallery-carousel img {max-width:none;}
.uon-gallery-carousel {padding-bottom:50px;margin:40px 0;}
h2 + .uon-gallery-carousel {margin-top:0;}
.uon-gallery-carousel:first-child {margin-top:0;}
.uon-gallery-carousel:last-child {margin-bottom:0;}
.uon-gallery-carousel .flickity-slider {display:flex;align-items:center;margin:0 -5px;}
.uon-gallery-carousel .flickity-viewport {transition:height 0.2s;}
.uon-gallery-carousel-cell {width:calc(100% - -10px);height:auto;display:flex;justify-content:center;align-items:center;}
.two-column .uon-gallery-carousel-cell {max-width:792px;width:100%;}
.one-column .uon-gallery-carousel-cell {max-width:810px;width:100%;}
.uon-gallery-carousel .image-figure, .uon-gallery-carousel .video-figure {margin:0 5px;}
.uon-gallery-carousel .image-figure img, .uon-gallery-carousel .video-figure .youtube-replace {display:block;border-radius:3px;}
.uon-gallery-carousel .image-figure img {max-height:50rem;max-width:100%;}
.uon-gallery-carousel-cell .video-figure {height:100%;width:100%;display:block;}
.one-column .uon-gallery-carousel-cell .video-figure {max-width:800px;}
/*.two-column .uon-gallery-carousel-cell .video-figure {width:770px;}*/
/*.two-column .grid-2-column .uon-gallery-carousel-cell .video-figure {width:370px;}*/
.uon-gallery-carousel .flickity-prev-next-button {position:absolute;bottom:0;width:40px;height:40px;border:0 none;background:none;cursor:pointer;z-index:100;top:auto;transform:none;}
.uon-gallery-carousel .flickity-prev-next-button:hover {background:#1090D5;}
.uon-gallery-carousel .flickity-prev-next-button.previous {left:0;border-radius:3px;}
.uon-gallery-carousel .flickity-prev-next-button.next {right:0;border-radius:3px;}
.uon-gallery-carousel .flickity-page-dots {line-height:40px;bottom:0;}
.uon-gallery-carousel .flickity-prev-next-button .arrow {fill:#3D414A;}
.uon-gallery-carousel .flickity-prev-next-button:hover .arrow {fill:#FFF;}
.uon-gallery-carousel .flickity-page-dots .dot.is-selected {background:#1090D5;}
.uon-gallery-carousel .flickity-prev-next-button .flickity-button-icon {height:40%;left:30%;position:absolute;top:30%;width:40%;}
.uon-gallery-carousel-small .uon-gallery-carousel-cell {width:auto;height:250px;display:flex;justify-content:center;align-items:center;}
.uon-gallery-carousel-small .uon-gallery-carousel .image-figure img {max-height:none;max-width:none;height:250px;}
.one-column .uon-gallery-carousel-edge-to-edge .uon-gallery-carousel-cell {max-width:1150px;width:100%;}
.one-column .uon-gallery-carousel-edge-to-edge .uon-gallery-carousel .image-figure img {max-height:auto;width:1140px;height:auto;}
.one-column .grid-content.grid-2-column .youtube-replace {height:auto;}
/** UON Gallery Grid **/
h2 + .uon-gallery-grid {margin-top:0;}
.uon-gallery-grid {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;margin:40px 0;}
.uon-gallery-grid.uon-gallery-grid-small {justify-content:flex-start;}
.two-column .uon-gallery-grid, .two-column-alt .uon-gallery-grid {margin-bottom:10px;}
.three-column .uon-gallery-grid-cell {width:31%;margin-bottom:3.5%;}
.two-column .uon-gallery-grid-cell, .two-column-alt .uon-gallery-grid-cell {width:31%;margin-bottom:3.5%;}
.one-column .uon-gallery-grid-cell {width:22%;margin-bottom:4%;margin-left:4%;}
.one-column .uon-gallery-grid-cell:first-child {margin-left:0;}
.three-column .uon-gallery-grid-small .uon-gallery-grid-cell {width:24%;margin-bottom:1.33%;}
.two-column .uon-gallery-grid-small .uon-gallery-grid-cell, .two-column-alt .uon-gallery-grid-small .uon-gallery-grid-cell {width:19%;margin-bottom:1.25%;}
.one-column .uon-gallery-grid-small .uon-gallery-grid-cell {width:13%;margin-bottom:1.5%;}
.uon-gallery-grid a:hover img {box-shadow:0 0 0 2px #1090D5;}
.uon-gallery-grid .image-figure img, .uon-gallery-grid .video-figure .youtube-replace {display:block;border-radius:3px;margin:0 auto;}
.uon-gallery-grid .stackable-block .image-figure, .uon-gallery-grid .stackable-block .video-figure {margin:10px;}
.three-column .uon-gallery-grid .stackable-block {width:33.3333%;}
.two-column .uon-gallery-grid .stackable-block, .two-column-alt .uon-gallery-grid .stackable-block {width:33.33333%;}
.one-column .uon-gallery-grid .stackable-block {width:25%;}
.uon-gallery-grid-video-cell {position:relative;}
.uon-gallery-grid-video-cell a {display:block;position:relative;}
.uon-gallery-grid-video-cell a::after {content:"\f144";font-size:60px;text-align:center;position:absolute;height:100%;width:100%;top:50%;margin-top:-30px;transition:all 0.2s ease-out;text-shadow:0 0 20px #2D3138;color:#FFF;font-family:fontawesome;left:0;}
.uon-gallery-grid-video-cell a:hover::after {color:#FFF;font-size:80px;margin-top:-40px;}
@media screen and (max-width:768px) {
.uon-gallery-carousel .flickity-slider {margin:0;}
.three-column .uon-gallery-grid-cell {width:48%;}
.two-column .uon-gallery-grid-cell, .two-column-alt .uon-gallery-grid-cell {width:48%;}
.one-column .uon-gallery-grid-cell {width:48%;}
.three-column .uon-gallery-grid-small .uon-gallery-grid-cell {width:31%;margin-bottom:3.5%;}
.two-column .uon-gallery-grid-small .uon-gallery-grid-cell, .two-column-alt .uon-gallery-grid-small .uon-gallery-grid-cell {width:31%;margin-bottom:3.5%;}
.one-column .uon-gallery-grid-small .uon-gallery-grid-cell {width:22%;margin-bottom:4%;margin-left:4%;}
.three-column .uon-gallery-grid .stackable-block {width:50%;}
.two-column .uon-gallery-grid .stackable-block, .two-column-alt .uon-gallery-grid .stackable-block {width:50%;}
.one-column .uon-gallery-grid .stackable-block {width:50%;}
.uon-gallery-grid-video-cell a::after {font-size:40px;margin-top:-20px;}
.uon-gallery-grid-video-cell a:hover::after {font-size:40px;margin-top:-20px;}
}
/*
@media screen and (max-width:400px) {
.three-column .uon-gallery-grid .stackable-block {width:100%;}
.two-column .uon-gallery-grid .stackable-block, .two-column-alt .uon-gallery-grid .stackable-block {width:100%;}
.one-column .uon-gallery-grid .stackable-block {width:100%;}
}
*/
/*********************************/
/** UON Media Gallery **/
/** -- August 2018 **/
/** -- Dean Robinson (djr145) **/
/*********************************/
var uonMediaGalleryCarousel;
var uonMediaGalleryGrid;
uonMediaGalleryCarousel = function(s) {
var g = $(s);
if(g.length > 0) {
var uon_gallery_carousel = g.flickity({
// options
cellAlign: $('#uon-body').hasClass('one-column') ? 'center' : 'left', // 'center' doesn't work with 100% width images
contain: true,
wrapAround: true,
lazyLoad: true,
imagesLoaded: true,
adaptiveHeight: true,
percentPosition: false,
dragThreshold: 20
});
/* stretch edge-to-edge */
if($('.one-column .body-content .uon-gallery-carousel-edge-to-edge').length > 0) {
var pad = ($(window).width() - $('.body-content').width())/2;
if(pad > 0) {
$('.body-content .uon-gallery-carousel').css({'margin-left':'-'+pad+'px','margin-right':'-'+pad+'px'});
$('.body-content .uon-gallery-carousel .flickity-button.previous').css({'left':pad+'px'});
$('.body-content .uon-gallery-carousel .flickity-button.next').css({'right':pad+'px'});
uon_gallery_carousel.flickity('resize');
}
$(window).on('resize',function(){
var pad = ($(window).width() - $('.body-content').width())/2;
if(pad > 0) {
$('.body-content .uon-gallery-carousel').css({'margin-left':'-'+pad+'px','margin-right':'-'+pad+'px'});
$('.body-content .uon-gallery-carousel .flickity-button.previous').css({'left':pad+'px'});
$('.body-content .uon-gallery-carousel .flickity-button.next').css({'right':pad+'px'});
uon_gallery_carousel.flickity('resize');
}
});
}
uon_gallery_carousel.on( 'settle.flickity', function( event, index ) {
container.isotope('layout');
});
}
}
uonMediaGalleryGrid = function(s) {
// var g = $(s);
//
// if(!is_mobile) {
//
// g.find('.gallery-popup-link').each(function(){
//
// var media_asset = $(this).data('media-asset');
// var media_type = $(this).data('media-type');
//
// $(this).on('click',function(event){
// event.preventDefault();
// $(this).attr('href','/media/viewer?media='+media_asset);
// });
//
// });
//
// uonLightbox('.body-content a.gallery-popup-link');
//
// } else {
//
//
//
// }
}
uonMediaGalleryCarousel('.uon-gallery-carousel');
uonMediaGalleryGrid('.uon-gallery-grid');