Skip to main content » Skip to section navigation » Site map » Top of page

2017 Redesign

LiveWhale Help » 2017 Redesign

The 2017 redesign introduces new templates and widgets. This guide serves as a reference for the new design elements.

Menlo Homepage

The header image on the homepage is an image chosen from Menlo’s Flickr account.

The left column of the homepage white box shows up to three events occurring today. If there’s only one event occurring each day, this results in lot of white space. In that case, you may wish to switch the event widget on the homepage: replace the Events Happening Today widget with Events Happening This Week.

If there are no events today, or if there are no events this week, the next three upcoming events are displayed instead. 

Quick Dispatch stories on the homepage display the top 10 stories tagged with Quick Dispatch that have an image.

News from Inside the Loop on the homepage displays a random story tagged with Inside the Loop that has an image.

The homepage footer displays the 5 newest starred images from the 2017 Homepage Footer Images collection.

Page Templates

Inside Page Template

The inside page template will be used for most pages on the site.

Inside Page Template with Header Images

The inside page with header images displays two header images at the top of the page. Tag the images with header image left or header image right to appear at the top of any page. Optionally tag the images with the page title or section title to show the images on a specific page or a specific section of the website.

Landing Page Template with Spotlight Image

The large image displayed at the top of the landing page is:

  • tagged spotlight image (this makes it “live”)
  • tagged with the word to display on top of the image
  • tagged with left or right if the focus is on one side
  • optionally tagged with the page title to display on a specific landing page

Use the Spotlight Image Preview Page to view the image before it goes live and adjust the word position. Tag the image with spotlight image preview to display on the preview page before it goes live.  The word position for desktop and mobile can be added in the image editor.

Department Page Template

Department homepages should use the department page template. By default, this displays the academic department menu, course listings, department faculty, and news widgets. The widget arguments need adjusting on a per-page basis, to display the content appropriate to each department. 

The “Jump To” links displayed at the top of each department page are generated automatically from links within the page content. To create a new link, add a heading to the page, then create an anchor link at the start of the heading, using the bookmark button in the editing toolbar.

The header image should be tagged with “header image” and the page title. If there’s no page title tag, it falls back to display an image tagged with “header image” and “global”.

US Team Page Template

This template contains all the athletic team widgets from the original templates. When an athletic team homepage is switched to the new 2017 US Team  Template, the team ID and team tag must be added to the widget arguments, for the correct team schedule, gallery and news to display.

Widgets

All widgets that can be added to the page  are in the Menlo group. Widgets that are in the LiveWhale Admin group are for use in the templates only.

To display one type of event, or faculty, or story on a particular page, add the widget to the page, then edit the widget arguments in the source code to display the desired results.

2017 Circular Faculty Photo

Displays a random faculty profile in a circle.

2017 Single Event Showcase 

Displays the next upcoming event that has an image. Edit the widget arguments to show events from a particular category.

2017 Meet Menlo Footer

This is displayed fullwidth on all landing pages by default and cannot be removed. 

The Meet Menlo Footer widget can also be added to the sub-content editable area on inside pages.

 

Academic Department Widgets

2017 Academic Departments Menu

The academic department selector displays a list of “Departmental Links” blurbs when the selector is clicked. By default, the selector placeholder text is “More Departments”. You can change this on a per-page basis by adjusting the format arg for the widget: 

<arg id="format_widget">
  <div class="select-menu"> 
    <button type="button" class="select-menu-btn">More Departments</button>
    <div class="select-menu-options">{widget}</div>
  </div>
</arg>

2017 Course Listings

Displays course listings in an accordion on each department homepage. Edit the page source code and add the widget tag argument to filter courses by department tag.

2017 Department Faculty

Displays faculty profiles in a grid on each department homepage. Edit the page source code and add the widget tag argument to filter faculty by department tag.

2017 Department NewS Card

This displays a single news story that has an image, on the department homepage.  Edit the page source code and add the widget tag argument to filter news stories by department tag.

2017 Student Work Stories

Tag a story with “student work” and the department tag. In the Contact Info field, enter the student name and a link to the relevant course.

Then, add the 2017 Student Work Stories widget to the department homepage. Edit the page source code and add the widget tag argument to show student work by department tag. 

<widget id="136_news_2017_student_work_stories">
 <arg id="format_widget">history</arg>
</widget>

2017 Frequently Asked Questions

Go to Blurbs > FAQs to enter a new Frequently Asked Question. FAQs will appear in search page results.

Add the 2017 FAQs by Department widget to the department homepage, then edit the page source code and include the widget tag argument to show FAQs by department tag. 

<widget id="137_blurbs_2017_faqs_by_department">
 <arg id="format_widget">mathematics</arg>
</widget>


Slideshows

There are two styles you can use when adding a gallery to the page: mini or carousel.

Adding a slideshow to the page.

Carousel

Carousel adds a scrolling carousel of images to the page.  You can tweak the widget class arguments to further customize the carousel display.  For example:  

<widget type="galleries_inline">
  <arg id="class">autoplay</arg>
  <arg id="id">158</arg>
  <arg id="type">mini</arg></widget>
</widget>

Auto play without captions: apply widget class autoplay
Show dot navigation: apply widget class dots
Hide captions: apply widget class no-captions
Hide arrow navigation: apply widget class no-arrows
Hide title: apply widget class no-title

 

Mini

Mini gallery displays a “Photo Flip” with the first image in the gallery. When you click on the gallery, it opens fullscreen and displays all the images. You can navigate through the images with the keyboard arrow keys, or with your mouse. Some examples of galleries are displayed here.