The image quote is used to display a persons picture alongside a quote. This was initially built for leeds.ac.uk but has now been extended to work in any homepage, content page (document or article) and in the bespoke course page.
A small amount of quote text is permitted. There is no specific character count because consideration is required for other optional content. As an example, an optional quote citation and links can be added which will impact on space for the quote. The image dimensions are set, and care should be give to ensure there is no overflow out of containers whilst previewing content. Advise to view preview in development environemnts before publishing content to live environments.
The image displays at a ratio of 3:4 (344 x 459px across the viewpoints). Images larger than this or with different proportions shall be scaled/cropped to fit these container values, but larger images will lead to larger file sizes and slower load time.
As well as supporting static images, this component can also link to a video. When a video is used then a play button appears, and selecting this opens up the video playing in a modal. To achieve this the gallery component is utilised. By default the image used is the chosen still from the included video. A portrait ‘crop’ is taken of this image to ensure the video still is the same size as the static image mentioned above.
As most videos are in landscape orientation, the crop to a portrait shape horizontally centres on the image and can lead to unwanted cropping when the person isn’t in the centre. To this effect an image override option is available. Here, a content editor can add an image which overrides the youTube selected image.
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 the styling (optimised for course pages displaying cream key facts). It is advised to use this theme when inserting in to document pages. Consideration to the theme should be considered for insertion in to home pages dependent upon other content on the page.
The component also has the ability to apply one or more links which display below the quote. When using a video it is advised to link to an accessible transcript of the video content. More than one link can be added, but space should be considered as this appears in the same area as quote text.
Given the above permutations, three options are shown in the example config below.
'context': {
'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'
}
},
}'context': {
'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",
"content": false
}
],
},
'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'
}
},
}'context': {
'videoUrl': true,
'theme': 'cream',
'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
}
],
},
'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'
}
},
'links': [
{
'url': 'https://www.leeds.ac.uk/',
'text': 'Audio described video'
},
]
}
<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 %}
{% if links %}
<div class="image-quote__links-container">
{% for link in links %}
<a class="" href="{{ link.url }}">{{ link.text }}</a>
{% endfor %}
</div>
{% endif %}
</div>
</section>
<section class="image-quote image-quote--cream 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 class="image-quote__links-container">
<a class="" href="https://www.leeds.ac.uk/">Audio described video</a>
</div>
</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;
container-name: imageQuote;
container-type: inline-size;
width: 100%;
margin-top: $spacing-6;
margin-bottom: $spacing-7;
@include media('>=uol-media-m') {
margin-bottom: $spacing-8;
}
@include media('>=uol-media-l') {
margin-bottom: $spacing-9;
}
}
.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));
@container imageQuote (width >=1024px) {
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;
@container imageQuote (width >=1024px) {
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;
flex-direction: column;
// align-items: center;
@container imageQuote (width >=1024px) {
width: 100%;
height: var(--imageQuoteImageHeight);
padding: 0;
position: relative;
height: var(--imageQuoteImageHeight);
display: flex;
flex-direction: row;
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;
a {
text-decoration: underline;
font-weight: 600;
text-decoration-thickness: 1px;
text-decoration-color: #111;
font-size: 1.25rem;
&:hover {
text-decoration-color: inherit;
}
}
}
@container imageQuote (width >=1024px) {
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__links-container {
margin-left: 10px; // to line up with blockquote link
a {
display: block;
text-decoration: underline;
font-weight: 600;
text-decoration-thickness: 1px;
font-size: 1.25rem;
}
@container imageQuote (width >=1024px) {
position: absolute;
margin-left: 0;
left: calc(var(--imageQuoteGapToLeft) + var(--imageQuoteImageWidth) + var(--imageQuoteGapToQuote) + 10px);
bottom: $spacing-4;
}
}
.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-container {
margin: 0 !important;
}
.uol-gallery {
margin: 0 !important;
.uol-gallery__item {
margin: 0;
@container imageQuote (width >=1024px) {
// @include media('>=uol-media-xl') {
position: absolute;
bottom: 0;
left: var(--imageQuoteGapToLeft);
z-index: 3;
}
}
.uol-gallery__image-container {
outline: 0;
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);
@container imageQuote (width >=1024px) {
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);
@container imageQuote (width >=1024px) {
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,
"theme": "cream",
"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
}
]
},
"links": [
{
"url": "https://www.leeds.ac.uk/",
"text": "Audio described video"
}
]
}