When a user sees the featured content section, they will see a title. They may also see an introduction sentence, an image and an image caption, a video (which will open in the gallery modal), along with some additional text, which may have formatting (paragraphs, bold, links, superscript, subscript, blockquote, cited blockquote).
The component also allows for multiple links (utilising the existing “uol-arrow-link”) to be added, a maximum of no more than twelve is advised.
Multiple arrow links can be added to the featured content component, this can be done through the config (adding a title and url for each):
'widget_arrow_links': [
{
"title" : "Text link with arrow effect",
"url" : "https://www.leeds.ac.uk"
},
{
"title" : "Text link with arrow effect",
"url" : "https://www.leeds.ac.uk"
},
];A single video can be added through the config, passing a boolean value (‘videoPlayIcon’: true) will display the alternate video icon. Please see the example here:
{
'widget_video': {
'headingLevel': 2,
'videoPlayIcon': true,
'items': galleryVideos.slice(2, 3),
},
...
},This component has a number of different properties that need to be passed to the ‘Featured content widget’ component to enable the different styling of the ‘Video highlighted’ variant. See below in the ‘Developer guidance’ for details of how to implement this. Currently this variant should only be used with the configuration detailed below.
The component must include the following:
To enable this variant the following configuration will be required:
{
'context': {
'widget_featured_video_highlighted': true,
'widget_featured_video_highlighted_sub_text': 'About The University of Leeds',
},
},The first property ‘widget_featured_video_highlighted’ enables the ‘Featured video highlighted’ different style.
The second property ‘widget_featured_video_highlighted_sub_text’ allows you to add a short piece of text as the first item on the component, in the example it’s shown as ‘About The University of Leeds’. Please note this additional text will only work with this new variant.
Here is the full configuration for this component:
{
'type': 'featured-content',
'title': 'Build confidence, connections and careers',
'lead': '<p>Supported to make an impact on what matters to you, at Leeds you\'ll be welcomed into our warm community with a world of opportunity to feed your passions and potential.</p>',
'widget_featured_video_highlighted': true,
'widget_featured_video_highlighted_sub_text': 'About The University of Leeds',
'video': {
'headingLevel': 3,
'videoPlayIcon': true,
"items": [
{
"title": 'Video about The University of Leeds',
"type": "video",
"video": "https://www.youtube.com/watch?v=j4pt8l7e3u8",
}
],
},
'content': '',
'link': {
'url': '/',
'text': 'Audio described video'
},
}
{% extends '@uol-widget' %}
{% block widget_content %}
{% render '@uol-image-featured--with-caption', { image_featured: widget_image } %}
{% render '@uol-gallery--single-video-with-play-icon', { gallery: widget_video } %}
<div class="uol-widget__content__text uol-rich-text">
{{ widget_content | safe }}
</div>
{% endblock %}
<div class="uol-widget-container uol-widget-container__featured-content">
<div class="uol-widget uol-widget--featured-content uol-widget--featured-video-highlighted">
<div class="uol-widget__left-col uol-widget__left-col--featured-video-highlighted">
<div class="uol-widget__head uol-widget__head--featured-video-highlighted">
<p class="uol-widget__featured-video-highlighted-sub-text">About The University of Leeds</p>
<h2 class="uol-widget__title uol-widget__title--featured-video-highlighted">Build confidence, connections and careers</h2>
<div class="uol-widget__lead uol-widget__lead--featured-video-highlighted">
<p>Supported to make an impact on what matters to you, at Leeds you'll be welcomed into our warm community with a world of opportunity to feed your passions and potential.</p>
</div>
<a class="uol-widget__link uol-widget__link--featured-video-highlighted" href="/">Audio described video</a>
</div>
</div>
<div class="uol-widget__content uol-widget__content--featured-video-highlighted">
<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">
<h3 class="uol-gallery__item__title">Video about The University of Leeds</h3>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img src="#" alt="">
</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="uol-widget__content__text uol-rich-text">
</div>
</div>
</div>
</div>
.uol-widget--featured-content {
.uol-gallery__image-caption {
padding-left: $spacing-4;
padding-right: $spacing-4;
@include media(">=uol-media-l") {
padding-left: 0;
padding-right: 0;
}
}
}
{
"widget_type": "featured-content",
"widget_title": "Build confidence, connections and careers",
"widget_lead": "<p>Supported to make an impact on what matters to you, at Leeds you'll be welcomed into our warm community with a world of opportunity to feed your passions and potential.</p>",
"widget_content": "",
"widget_featured_video_highlighted": true,
"widget_featured_video_highlighted_sub_text": "About The University of Leeds",
"widget_video": {
"headingLevel": 3,
"videoPlayIcon": true,
"items": [
{
"title": "Video about The University of Leeds",
"type": "video",
"video": "https://www.youtube.com/watch?v=j4pt8l7e3u8",
"content": false
}
]
},
"widget_link": {
"url": "/",
"text": "Audio described video"
}
}