The image quote is used to display current or former students or staff’s accounts of their experiences at the University. Currently purposely built and used only for the web improvements project.
Max character count needed. The position of image and text container are fixed. The text will align center vertically. However if character count is ignored text will overspill the container.
4:5 (344 x 430px across the viewpoints)
This component was originally built just for the corporate homepage, but it has been enhanced so it can work in document, article and course pages with or without side navigation.
The component also has a theme selection ability. By default the component has a teal background theme. By setting the ‘theme’ parameter to ‘cream’, this changes this styling (optimised for course pages displaying cream key facts).
The component also has the ability to apply a link to the quote.
'context': {
'image': {
'src': '/placeholders/new-homepage/student-portrait-2.png',
'alt': 'Portrait of Jefferson Sanchez'
},
'theme': 'cream',
'quote': {
'content': 'This whole experience has taught me to put myself out there, and do what makes me uncomfortable. If I had been too afraid to move out come to Leeds, I would not be where I am now, with the fantastic memories and people I have surrounding me. ',
'cite': {
'content': 'Student name, Course Name',
'url': '/test-url'
}
},
<section class="image-quote {{ 'image-quote--' + theme if theme }} {{ 'image-quote--video' if gallery }}">
{% if videoUrl %}
{% render '@uol-gallery', { gallery: gallery } %}
{% else %}
<img class="image-quote__img" src="{{ image.src }}" alt="{{ image.alt }}">
{% endif %}
<div class="image-quote__text-container">
{% render '@uol-typography-blockquote', quote %}
</div>
</section>
<section class="image-quote image-quote--video">
<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--video uol-gallery__item--video-play-icon" data-video="https://www.youtube.com/watch?v=j4pt8l7e3u8">
<h2 class="uol-gallery__item__title">Video about The University of Leeds</h2>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img class="uol-gallery__youTubeImage imageOveride" src="/placeholders/image-quote-example-image-2.png" alt="Test image">
</div>
</figure>
<noscript>
<a href="https://www.youtube.com/watch?v=j4pt8l7e3u8">https://www.youtube.com/watch?v=j4pt8l7e3u8</a>
</noscript>
</div>
</div>
</section>
<div class="image-quote__text-container">
<blockquote class="uol-typography-blockquote" cite="/test-url">
This whole experience has taught me to put myself out there, and do what makes me uncomfortable. If I had been too afraid to move out come to Leeds, I would not be where I am now, with the fantastic memories and people I have surrounding me.
<footer>
<cite>
<a href="/test-url">
Student name, Course Name
</a>
</cite>
</footer>
</blockquote>
</div>
</section>
body {
--imageQuoteImageHeight: 459px;
--imageQuoteImageWidth: 344px;
--imageQuoteGapToLeft: 48px;
--imageQuoteGapToQuote: 32px;
--imageQuoteTopWhiteSpace: 80px;
--imageQuoteBlockHeight: 30px;
--imageQuoteBlockRightGap: 30px;
--imageQuoteMobilePaddingTop: 20px;
--imageQuoteMobilePaddingBottom: 32px;
--imageQuoteMobilePaddingHorizontal: 32px;
--imageQuoteTheme1BlockColour: #fff0e2;
--imageQuoteTheme1QuoteColour: #00d0a0;
--imageQuoteTheme2BlockColour: white;
--imageQuoteTheme2QuoteColour: #fff0e2;
}
.image-quote {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
margin: $spacing-6 0;
}
.image-quote__block {
position: absolute;
z-index: 2;
left: calc(var(--imageQuoteImageWidth));
top: calc(var(--imageQuoteImageHeight) - var(--imageQuoteBlockHeight));
height: var(--imageQuoteBlockHeight);
width: calc(100% - var(--imageQuoteImageWidth) - var(--imageQuoteBlockRightGap));
@include media('>=uol-media-xl') {
left: calc(var(--imageQuoteGapToLeft) + var(--imageQuoteImageWidth));
top: calc(var(--imageQuoteTopWhiteSpace) - var(--imageQuoteBlockHeight));
width: calc(100% - var(--imageQuoteGapToLeft) - var(--imageQuoteImageWidth) - var(--imageQuoteBlockRightGap));
}
}
.image-quote__img {
margin: 0;
z-index: 3;
height: var(--imageQuoteImageHeight);
width: var(--imageQuoteImageWidth);
max-width: 100%;
object-fit: cover;
@include media('>=uol-media-xl') {
position: absolute;
bottom: 0;
left: var(--imageQuoteGapToLeft);
width: var(--imageQuoteImageWidth);
}
}
.image-quote__text-container {
width: calc(100% - 2 * var(--imageQuoteMobilePaddingHorizontal));
position: relative;
padding: var(--imageQuoteMobilePaddingTop) var(--imageQuoteMobilePaddingHorizontal) var(--imageQuoteMobilePaddingBottom);
display: flex;
align-items: center;
@include media('>=uol-media-xl') {
width: 100%;
height: var(--imageQuoteImageHeight);
padding: 0;
position: relative;
height: var(--imageQuoteImageHeight);
display: flex;
align-items: center;
}
.uol-typography-blockquote {
@extend %uol-font-sans-serif;
max-width: 49rem;
font-style: normal;
font-weight: 600;
line-height: 1.75rem;
font-size: 1.25rem !important;
padding: 20px 10px 0;
margin-bottom: $spacing-4 !important;
&::before {
color: $color-black;
left: -0.625rem;
}
cite {
display: block;
color: $color-black;
font-style: normal;
margin-top: 1rem;
}
@include media('>=uol-media-xl') {
position: absolute;
left: calc(var(--imageQuoteGapToLeft) + var(--imageQuoteImageWidth) + var(--imageQuoteGapToQuote));
right: calc(var(--imageQuoteGapToQuote) / 2);
margin: 0;
margin-top: var(--imageQuoteTopWhiteSpace);
max-width: 49rem;
}
}
}
.image-quote--video {
/*
When there's a video which we want to open up a modal, embed gallery component
First set of important rules to negate rules set in gallery
*/
.uol-gallery {
margin: 0 !important;
.uol-gallery__item {
margin: 0;
@include media('>=uol-media-xl') {
position: absolute;
bottom: 0;
left: var(--imageQuoteGapToLeft);
z-index: 3;
}
}
.uol-gallery__image-container img {
position: relative !important;
top: 0 !important;
left: 0 !important;
transform: inherit !important;
width: 344px !important;
height: 459px !important;
min-width: inherit !important;
min-height: inherit !important;
max-height: inherit !important;
opacity: 1 !important;
margin: 0 !important;
}
.uol-gallery__figure {
margin: 0;
}
.uol-gallery__button {
left: 251px !important;
top: 381px !important;
background: $color-black--dark !important;
}
.uol-gallery__image-container {
background-color: white !important;
&::before {
padding-bottom: 0 !important;
}
}
}
}
/*
Separate out CSS colour rules for eash addition of further colours
*/
.image-quote {
.image-quote__block {
background: var(--imageQuoteTheme1BlockColour);
}
.image-quote__text-container {
background: var(--imageQuoteTheme1QuoteColour);
@include media('>=uol-media-xl') {
background-image: linear-gradient(white var(--imageQuoteTopWhiteSpace), var(--imageQuoteTheme1QuoteColour) 0);
}
}
}
.image-quote--cream {
.image-quote__block {
background: var(--imageQuoteTheme2BlockColour);
}
.image-quote__text-container {
background: var(--imageQuoteTheme2QuoteColour);
@include media('>=uol-media-xl') {
background-image: linear-gradient(white var(--imageQuoteTopWhiteSpace), var(--imageQuoteTheme2QuoteColour) 0);
}
}
}
// add second colour block above quote
export const imageQuote = () => {
const imageQuotes = document.querySelectorAll('.image-quote')
imageQuotes.forEach( (item) => {
// create block
const newNode = document.createElement("div");
newNode.classList.add("image-quote__block");
// block appears after different element whether just image or gallery
const imageQuoteImage = item.getElementsByClassName("image-quote__img")[0];
const imageQuoteVideo = item.getElementsByClassName("uol-gallery__item")[0];
// do image first, because gallery can also have image overide
if (imageQuoteImage) {
imageQuoteImage.after(newNode);
} else {
imageQuoteVideo.after(newNode);
}
})
}
{
"name": "uol-image-quote",
"type": "new",
"image": {
"src": "/placeholders/new-homepage/student-portrait-2.png",
"alt": "Portrait of Jefferson Sanchez"
},
"quote": {
"content": "This whole experience has taught me to put myself out there, and do what makes me uncomfortable. If I had been too afraid to move out come to Leeds, I would not be where I am now, with the fantastic memories and people I have surrounding me. ",
"cite": {
"content": "Student name, Course Name",
"url": "/test-url"
}
},
"videoUrl": true,
"gallery": {
"headingLevel": 2,
"videoPlayIcon": true,
"items": [
{
"title": "Video about The University of Leeds",
"type": "video",
"video": "https://www.youtube.com/watch?v=j4pt8l7e3u8",
"videoOverideImage": "/placeholders/image-quote-example-image-2.png",
"content": false
}
]
}
}