<div class="wt-grid-full banner banner--image" role="banner">
<img class="banner--image__image lazyload" role="presentation" data-src="../../assets/images/sample/home-ju015-aspect-3to2.jpg" data-sizes="auto" alt="With a big title" src="../../assets/images/sample/home-ju015-aspect-3to2.jpg">
<div class="banner--image__overlay" role="presentation"></div>
<div class="banner--image__main-wrapper">
<div class="wt-grid-main wt-grid-content-main banner--image__main-container">
<div class="wt-grid-left wt-grid-section-left">
</div>
<div class="wt-grid-center wt-grid-section-center">
Notice: Undefined index: type in /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php(20) : eval()'d code on line 18 Call Stack: 0.0002 278376 1. {main}() /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:0
0.0006 292160 2. eval('?>
<div class="wt-grid-full banner banner--image" role="banner">
<img class="banner--image__image lazyload" role="presentation" data-src="<?php print $variables['image_url']; ?>" data-sizes="auto" alt="<?php print $variables['title']; ?>" <?php if ($variables[ 'immediate']): ?> src="
<?php print $variables['image_url']; ?>"
<?php endif; ?> >
<div class="banner--image__overlay" role="presentation"></div>
<div class="banner--image__main-wrapper">
<div class="wt-grid-main wt-grid-content-main banner--image__main-container">
<div class="wt-grid-left wt-grid-section-left">
</div>
<div class="wt-grid-center wt-grid-section-center">
<?php if ($variables['type'] !== 'researcher_story' ): ?>
<p class="banner--image__subtitle">
<?php print $variables['subtitle']; ?>
</p>
<h1 class="banner--image__heading">
<?php print $variables['title']; ?>
</h1>
<?php endif; ?>
</div>
<div class="wt-grid-right wt-grid-section-right">
</div>
</div>
</div>
</div>
<?php if ($variables['type'] === 'researcher_story' ): ?>
<div class="wt-grid-main wt-grid-content-main banner-title__container">
<div class="wt-grid-left wt-grid-section-left">
</div>
<div class="wt-grid-center wt-grid-section-center">
<?php if (isset($variables['article_type']) && $variables['article_type'] === 'researcher_story'): ?>
<div class='banner--image__subtitle--container'>
<p class="banner--image__subtitle">
<?php print $variables['subtitle']; ?>
</p>
</div>
<?php endif; ?>
<div class="banner--image__heading--container <?php (!isset($variables['article_type']) || !$variables['article_type']) ? print 'banner--image__header--nosubtitle' : '' ; ?>">
<h1 class="banner--image__heading">
<?php print $variables['title']; ?>
</h1>
</div>
</div>
<div class="wt-grid-right wt-grid-section-right">
</div>
</div>
<?php endif; ?> ') /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:20
<p class="banner--image__subtitle">Image Banner</p>
<h1 class="banner--image__heading">With a big title</h1>
</div>
<div class="wt-grid-right wt-grid-section-right">
</div>
</div>
</div>
</div>
Notice: Undefined index: type in /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php(20) : eval()'d code on line 29 Call Stack: 0.0002 278376 1. {main}() /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:0
0.0006 292160 2. eval('?>
<div class="wt-grid-full banner banner--image" role="banner">
<img class="banner--image__image lazyload" role="presentation" data-src="<?php print $variables['image_url']; ?>" data-sizes="auto" alt="<?php print $variables['title']; ?>" <?php if ($variables[ 'immediate']): ?> src="
<?php print $variables['image_url']; ?>"
<?php endif; ?> >
<div class="banner--image__overlay" role="presentation"></div>
<div class="banner--image__main-wrapper">
<div class="wt-grid-main wt-grid-content-main banner--image__main-container">
<div class="wt-grid-left wt-grid-section-left">
</div>
<div class="wt-grid-center wt-grid-section-center">
<?php if ($variables['type'] !== 'researcher_story' ): ?>
<p class="banner--image__subtitle">
<?php print $variables['subtitle']; ?>
</p>
<h1 class="banner--image__heading">
<?php print $variables['title']; ?>
</h1>
<?php endif; ?>
</div>
<div class="wt-grid-right wt-grid-section-right">
</div>
</div>
</div>
</div>
<?php if ($variables['type'] === 'researcher_story' ): ?>
<div class="wt-grid-main wt-grid-content-main banner-title__container">
<div class="wt-grid-left wt-grid-section-left">
</div>
<div class="wt-grid-center wt-grid-section-center">
<?php if (isset($variables['article_type']) && $variables['article_type'] === 'researcher_story'): ?>
<div class='banner--image__subtitle--container'>
<p class="banner--image__subtitle">
<?php print $variables['subtitle']; ?>
</p>
</div>
<?php endif; ?>
<div class="banner--image__heading--container <?php (!isset($variables['article_type']) || !$variables['article_type']) ? print 'banner--image__header--nosubtitle' : '' ; ?>">
<h1 class="banner--image__heading">
<?php print $variables['title']; ?>
</h1>
</div>
</div>
<div class="wt-grid-right wt-grid-section-right">
</div>
</div>
<?php endif; ?> ') /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:20
.banner--image {
@include flex(flex-end, flex-start);
@include rem(margin-bottom, $grid-typo-spacing-s);
background: $paBoxoutBackground;
height: $grid-typo-spacing-xxl * 3 + $column;
overflow: hidden;
position: relative;
@include respond-to($grid-breakpoint-s) {
// TODO: when we update typography, this should be grid-typo-spacing-m
@include rem(margin-bottom, 38px);
}
.wt-grid-section-center {
@include respond-to($grid-breakpoint-m) {
@include rem(padding-right, $column * 2);
box-sizing: content-box;
}
}
// in the RHC under the banner, we need smaller spacing on top
+ .wt-grid-main > .wt-grid-section-right {
padding-top: 0;
}
@media print {
display: none;
}
}
.banner--image__main-wrapper {
@include gradientBackgroundWithOffset;
@include rem(padding-top, $grid-typo-spacing-xl);
width: 100%;
z-index: 2;
}
.banner--image__heading {
color: $white;
padding-top: 0;
text-shadow: 0 0 #{$h1FontSizeSmall + 5px} $black;
@include respond-to($grid-breakpoint-m) {
width: calc(100% + #{$column * 2});
}
}
.banner--image__image {
left: 50%;
max-width: none;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 0;
transform: translateX(-50%);
width: auto;
}
.banner--image__subtitle {
color: $white;
text-shadow: 0 0 3px $black;
}
A banner with a large background image, a title and subtitle (subtitle appears above the title).
Example usage: https://wellcome.ac.uk/what-we-do/our-work/our-planet-our-health
{
"image_url": "{{ path /assets/images/sample/home-ju015-aspect-3to2.jpg }}",
"title": "With a big title",
"subtitle": "Image Banner",
"immediate": true
}