Banners & Sliders

Banners

Banners for section child pages are being removed. Banners on section pages will remain.

Section page refers to things like Open Learning, Current Students, Research, etc.

Landing pages for Open Learning, Current Students, and Research all still have banners, but the child pages beneath them do not.

This change only affects the pages that have the main right wide template. The faculty templates that include full screen banners are not affected.

If colleagues insist that the banner photos come back, incorporate the photos into the page somewhere.

Image dimensions

• Desktop: h 1040 x w 4000
• Mobile: h 800 x w 1280
• Tablet: h 800 x w 2040

.top-banner-2020 {
background-image: url("/__shared/assets/Solar_Compass_-_Desktop47412.jpg");
}
@media only screen and (max-width: 64rem) {
.top-banner-2020 {
background-image: url("/__shared/assets/Solar_Compass_-_Mobile47413.jpg");
}
}
@media only screen and (max-width: 40rem) {
.top-banner-2020 {
background-image: url("/__shared/assets/Solar_Compass_-_Tablet47414.jpg");
}
}

<div class="top-banner-2020"></div>

Faculties and schools

Example from Faculty of Education and Social Work

Image size: h973 x w1752

<style>
.fds-body-wrap {
background-image: url('/AssetFactory.aspx?did=42746');
background-repeat: no-repeat;
background-position: 55% 40px;
background-size: contain;
}
button.button.cta {font-weight: 600;}
a.readAirini {
text-decoration: underline;
transition: .2s all ease-out;
}
a.readAirini:hover {
text-decoration: none;
}
.bluebg-st {
background-color: rgba(0,62,81,.8);
}
@media only screen and (max-width: 125rem) {
.fds-body-wrap { background-size: contain; }
}
@media only screen and (max-width:40rem) {
.fds-body-wrap {
background: none;
}
}
</style>

<div class="fds-section-title row">
<div class="columns bluebg-st v2pad h2pad hide-for-small">
<div class="row">
<div class="small-12 medium-7 large-8 columns">
<h2 class="whitetext" >Committed to realizing your potential</h2>
<p class="lead whitetext">Your goals, your possibilities and your future are at
the heart of the studies, research and learning experiences at the Faculty of
Education and Social Work.</p>
<p class="lead whitetext"><a class="whitetext readAirini"
href="/edsw/about.html">Read the complete welcome from Dean Airini.</a>
</p>
</div>
<div class="small-12 medium-4 large-3 columns">
<button class=" expand button right yellowbg cta m1top"
data-options="align:bottom"
data-dropdown="drop1"><i class="fas fa-caret-down fa-lg">&nbsp;</i>
How to apply</button>
<ul id="drop1" class="medium content f-dropdown nopadding nomargin"
data-dropdown-content="">
<li><a href="/edsw/schools-and-departments/education/master-education/application.html">Master of Education</a></li>
<li><a href="/edsw/schools-and-departments/education/bed/application.html">Bachelor of Education (Elementary)</a></li>
<li><a href="/edsw/schools-and-departments/education/bachelor-of-education-secondary-stem.html">Bachelor of Education (Secondary)</a></li>
<li><a href="/edsw/schools-and-departments/social-work/bsw/admissions.html">Bachelor of Social Work</a></li>
<li><a href="/edsw/schools-and-departments/social-work/human-service-diploma/admission.html">Human Service Diploma</a></li>
<li><a href="/edsw/schools-and-departments/education/ece/program-info.html">Early Childhood Education</a></li>
<li><a href="/edsw/schools-and-departments/social-work/eacs/admission.html">Education Assistant and Community
Support</a></li>
</ul>
<a class="expand button yellowbg nomargin right contactEDSW"
href="/edsw/about/contact.html">Contact Us</a>
</div>
</div>
</div>
</div>

HTML5 Video Banners

This banner has a background video, overlaid by a heading and a button.

<div class="row top-banner lh-0">
<video class="small-12" src="http://int.nyt.com/data/videotape/finished/2014/11/1416002593/nade3-1050.mp4" loop preload="auto" autoplay="autoplay" poster="http://graphics8.nytimes.com/images/2014/11/17/technology/17celebrity-top1/17celebrity-top1-custom1.jpg"></video>
<h2 class="section-title"><a href="#">Study by Distance</a></h2>
<div class="absolute top-30 small-12 h4pad">
<h2 class="whitetext">Testing text overlay</h2>
<a href="#" class="button tealbg radius">Click here</a>
</div>
</div>

Sliders

Sliders - also known as carousels - can be inserted into pages to display content one (or several) at a time. As sliders are controlled by Javascript, the template has to be set up for a slider in advance. Most elements of a slider can be customized: show/hide arrows, show/hide dots, the number of slides shown, how many slides to advance, auto-looping, auto-resizing height, and mobile responsiveness.

The following slider is set to display 2 slides, advance by 2, loop infinitely, display dots and arrows and adapt its height to the content. It will switch to displaying 1 slide at a time at 640px (mobile devices).

<div class="featured">
<div class="slide">
<a href="https://placeimg.com/800/600/animals" class="venobox" data-gall="myGallery"><img src="https://placeimg.com/800/600/animals" alt="image"></a>
<p>Sample content</p>
</div>
<div class="slide">
<a href="https://placeimg.com/800/600/nature" class="venobox" data-gall="myGallery"><img src="https://placeimg.com/800/600/nature" alt="nature"></a>
<p>Sample content</p>
</div>
<div class="slide">
<a href="https://placeimg.com/800/600/people" class="venobox" data-gall="myGallery"><img src="https://placeimg.com/800/600/people" alt="image"></a>
<p>Slightly longer sample content</p>
</div>
<div class="slide">
<a href="https://placeimg.com/800/600/arch" class="venobox" data-gall="myGallery"><img src="https://placeimg.com/800/600/arch" alt="image"></a>
<p>Sample content</p>
</div>
<div class="slide">
<a href="https://placeimg.com/800/500/tech" class="venobox" data-gall="myGallery"><img src="https://placeimg.com/800/500/tech" alt="image"></a>
<h3>Content title</h3>
<p>Really, really long sample content below a slide</p>
</div>
<div class="slide">
<a href="https://placeimg.com/800/500/animals" class="venobox" data-gall="myGallery"><img src="https://placeimg.com/800/500/animals" alt="image"></a>
<p>Sample content</p>
</div>
<div class="slide">
<a href="https://placeimg.com/800/500/nature" class="venobox" data-gall="myGallery"><img src="https://placeimg.com/800/500/nature" alt="image"></a>
</div>
<div class="slide">
<a href="https://placeimg.com/800/500/people" class="venobox" data-gall="myGallery"><img src="https://placeimg.com/800/500/people" alt="image"></a>
</div>
</div>

Homepage Banner

With Video

<div class="slide">
<img class="videothumb" src="/__shared/assets/TRU_Orientation_2015_-_screenshot36460.jpg" alt="TRU Orientation 2015">
<div class="slide-content slide-full flex-video">
<a href="#" class="videobutton">
<div class="content">
<h2>TRU Orientation 2015</h2>
<img src="/__shared/assets/videoplay_button36459.png" alt="Play the video">
</div>
</a>
<iframe class="ytvideo" width="560" height="315" src="http://www.youtube.com/embed/NS_hDg-j3JA" frameborder="0" allowfullscreen></iframe>
</div>
</div>

With HTML Video

<div class="row featured home-slider tealbg">
<div class="slide">
<script>
window.onload=function(){
var h5video = document.getElementById('theVideo');
h5video.play();
}
</script>
<video id="theVideo" style="width:100% !important; height: auto !important;" loop preload="true" autoplay="autoplay" controls poster="/__shared/assets/A_to_B_background39332.jpg">
<source src="/__shared/assets/A_to_B_-_Homepage39331.mp4" type="video/mp4">Your browser does not support the video tag.</source>
</video>
</div>
</div>