<section class="teaser-group-listing">
{% if title %}<h2 class="teaser-listing-title">{{title}}</h2>{% endif %}
<div class="teaser-listing-container">
<!-- Loading spinner goes here -->
<div class="teaser-listing">
<div class="gutter-sizer"></div>
<div class="masonry-sizer"></div>
{% for teaser in teasers %}
<div class="teaser-group-item">
<div class="teaser-group-item__content {% if teaser.small %}teaser-group-item__content--small{% endif %}">
{% if teaser.image.path | path %}
<img src="{{teaser.image.path}}" alt="">
{% endif %}
<div class="teaser-group-item__content--text">
<div class="teaser-tag"><a class="teaser-group-item-link" href="{% if teaser.taghref%}{{teaser.taghref}}{% else %}#{% endif %}">{{teaser.tag}}</a></div>
<a class="teaser-group-item-link" href="{% if teaser.href%}{{teaser.href}}{% else %}#{% endif %}">
<h3 class="teaser-title">{{teaser.title}}</h3>
</a>
<a class="teaser-group-item-link" href="{% if teaser.authorhref%}{{teaser.authorhref}}{% else %}#{% endif %}">
{% if teaser.author %}<div class="teaser-author">{{teaser.author}}</div>{% endif %}
</a>
<a class="teaser-group-item-link" href="{% if teaser.href%}{{teaser.href}}{% else %}#{% endif %}">
<p class="teaser-content">{{teaser.content}}</p>
{% if teaser.postdate %}<div class="teaser-postdate">Posted: {{teaser.postdate}}</div>{% endif %}
<a class="teaser-group-item-link" href="{% if teaser.href%}{{teaser.href}}{% else %}#{% endif %}">
<div class="teaser-group-item-arrow"><i class="uod-icons uod-icons-up-arrow"></i></div>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
{
"title": "You may be interested in",
"teasers": [
{
"tag": "Case Study",
"title": "Satisfaction, happiness and our connection to nature",
"content": "Many studies have shown that a stronger connection to nature increases a person’s life satisfaction and happiness, at the same time as lowering their anxiety levels.",
"image": {
"path": "https://www.derby.ac.uk/media/derbyacuk/assets/homepage/Homepage-University-promo-(1).jpg"
}
},
{
"small": true,
"tag": "Undergraduate Course",
"title": "Business and Management BSc (Hons) degree",
"content": "You’ll experiment with the latest digital software, learn about the principles of animation, produce distinctive animated films and develop the professional awareness you need to launch your career.",
"image": {
"path": "https://www.derby.ac.uk/media/derbyacuk/assets/homepage/virtual-tour-promo-image.jpg"
}
},
{
"small": true,
"tag": "News",
"title": "University of Derby students win national bursary for engineering talent",
"content": "Many studies have shown that a stronger connection to nature increases a person’s life satisfaction and happiness, at the same time as lowering their anxiety levels."
},
{
"tag": "Undergraduate Course",
"title": "Business and Management BSc (Hons) degree",
"content": "You’ll experiment with the latest digital software, learn about the principles of animation, produce distinctive animated films and develop the professional awareness you need to launch your career."
},
{
"small": true,
"tag": "News",
"title": "University of Derby students win national bursary for engineering talent",
"content": "Many studies have shown that a stronger connection to nature increases a person’s life satisfaction and happiness, at the same time as lowering their anxiety levels.",
"image": {
"path": "https://www.derby.ac.uk/media/derbyacuk/assets/homepage/UG19Prosp-Keyvis-396.jpg"
}
},
{
"small": true,
"tag": "Undergraduate Course",
"title": "Business and Management BSc (Hons) degree",
"content": "You’ll experiment with the latest digital software, learn about the principles of animation, produce distinctive animated films and develop the professional awareness you need to launch your career."
}
]
}
import $ from "jquery";
import masonry from 'masonry-layout';
import imagesLoaded from 'imagesloaded';
if ($('.teaser-listing-container').length > 0) {
var loaderMarkup = '<div class="teaser-loader"><div class="spinner"></div></div>';
(function(){
$('.teaser-listing-container').prepend(loaderMarkup);
})();
var msnry = new masonry( '.teaser-listing', {
// options
horizontalOrder: true,
columnWidth: '.masonry-sizer',
gutter: ".gutter-sizer",
initLayout: false,
isResizable: true,
});
// element
imagesLoaded( document.querySelector('.teaser-listing'), function( instance ) {
msnry.layout();
});
msnry.on('layoutComplete', function() {
setTimeout(function (){
$('.teaser-loader').fadeOut(1000, function(){
$(this).remove();
});
}, 2000);
});
}
.teaser-listing-title {
text-align: center;
width: 100%;
}
.teaser-listing-container {
@include body-font;
position: relative;
min-width: 100%;
min-height: 100vh;
@include margin-large;
.teaser-listing {
z-index:1;
.masonry-sizer, .teaser-group-item {
position: relative;
width: 49.75%;
@include for-phone-only {
width: 100%;
}
}
.gutter-sizer {
width: 0.25%;
}
.teaser-group-item {
overflow: hidden;
margin-bottom: 0.25%;
&:nth-child(odd) .teaser-group-item__content.teaser-group-item__content--small {
float: right;
}
&:nth-child(even) .teaser-group-item__content.teaser-group-item__content--small {
float: left;
}
&-link {
color: #fff;
text-decoration: none;
background: none;
&:hover {
.teaser-group-item-arrow{
animation: hover-indicator .5s 1;
}
}
}
&-arrow {
display: inline-flex;
color: $white;
font-size: px-to-em(30, 17);
width: 30px;
height: 30px;
align-self: flex-end;
margin-bottom: -14px;
i {
transform: rotate(90deg) translateY(-3px);
transform-origin: center center;
}
}
&__content {
color: #fff;
background-color: $primary-blue;
margin: 4px;
&--text{
padding: 1em;
}
&--small {
@include for-phone-only {
max-width: 100%;
}
max-width: 80%;
}
img {
max-width: 100%;
}
.teaser-tag {
font-size: responsive 17px 15px;
text-transform: uppercase;
line-height: 11px;
}
.teaser-author {
font-size: responsive 17px 15px;
line-height: 1;
font-weight: bold;
margin-bottom: 30px;
}
.teaser-postdate {
font-size: responsive 17px 15px;
line-height: 1;
margin-bottom: 30px;
}
.teaser-title {
font-size: responsive 18px 24px;
font-range: $mobile-portrait $tablet-landscape;
line-height: 26px;
font-weight: bold;
color: #fff;
padding: 17px 0;
}
.teaser-content {
font-size: responsive 17px 16px;
font-range: $mobile-portrait $tablet-landscape;
}
}
}
}
}
.teaser-loader {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
z-index: 2;
.spinner {
position: fixed;
left: 50%;
}
}
Creates a responsive two column teaser content layout. Uses masonry.js to generate the markup and incorporates a spinner to hide the restructuring of the markup while the images load.