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>

HTML5 Video Banners

Study by Distance

Testing text overlay

Click here

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>
Search To Top