Homepage Carousel Template

To help maintain consistency, the LAS Communications Department has created a header image template either for a carousel or individual page on your site similar to the Iowa State homepage at https://iastate.edu.

Quick Links


The Iowa State homepage graphics themselves have gone through some changes, and we will try and update our template below to account for the latest style guide.

Download .PSD Template

Fonts

The current branding fonts are explained in depth on the Typography page of the Office of University Branding’s website.  The template provided uses the fonts Univers and ITC Berkeley. As of November 2019, these fonts have been removed from direct download. If you or your department needs to purchase these fonts, they can do so through TechCYTE at the University Book Store by calling 1-800-478-0048. (Not available through online ordering)

Depending on the order of the letters, they may at times seem squished due to the kerning (spacing) of the font. If you open your character palette in Photoshop, you will see it is currently set at -70 to bring the letters closer together. You can adjust this setting individually per letter.

Source Photo Considerations

When working with the web, it is always good to keep your website in mind. A great rule of thumb is to always shoot a photo both portrait (like a standard letter) and a horizontal or landspace orientation. With today’s modern camera, you will be able to zoom in on the photo as needed to crop it later. For photos you know will be made into a slider, you will probably want to shoot them horizontally, and also provide a lot of room on the sides of the photo to aid in positioning on the slide.

In the photo examples below, notice how Example 1 has been taken to include not only the person of interest in the photo, but the sign as well. In Example 3, notice how the photo was framed so the text on the photo would fit between the two people.

When shooting photos for blog/news articles, always think about how the photos would be used and shoot a variety of different framing options and orientations.

Backgrounds and Montages

Sometimes you have to work with whatever photos you have been given. It is still possible to create a pleasing carousel image using photos that are not optimally sized.

Look at Example 2 below. This image was made from 4 different source images. First, a photo of campus was saturated to provide a striking red background. Next, each of the people in the photo was placed separately and the photos were carefully cut out using Photoshop to reveal the underlying background.

Do not try and put too many images on any one slide. Doing so will make the slide look cluttered and disorganized.

Headline / Text

The headline on the photo, if any, should be short and in the upper 2/3 of the slide. It is always advisable to add a short caption to the actual carousel code on the website to help screen readers. Your headline of text on the graphic will NOT be accessible to screen readers. Headlines do not need to be a long sentence.

Examples

Here are some examples of current ISU branding using the template.

Example 1:

Example 2:

Example 3:

Adding a Carousel in WordPress

Adding the carousel to the top of a WordPress page is fairly simple. Carousels should be used to highlight feature stories and content on the site, and their use should be a strategic decision. Not every page on the website needs to – or should – have a carousel.

Adding Images

After you have created your banner images, upload them to your site’s Media Gallery. Once uploaded, take a look at the following fields by clicking on a single image.

  • Alternative Text: Explain the graphic for someone who may be using assistive devices such as a screen reader. For instance: “Professor Michael Young at chalkboard with student.”
  • Title: This is a simple short title for the image that is only seen within your administration area
  • Caption: This is the caption that will be shown with an opaque overlay at the bottom of your carousel slide. It is best to keep this as short as possible, without duplicating the words that are actually on the slide.
  • Description: You can put in a longer description of the file here is you would like. Our ISU Theme does not use a media attachment page, so it really isn’t necessary
  • Carousel URL: Here is where you paste in the URL of the page you want the carousel image to send your visitor to when clicked. This is normally the feature story of the slide being presented. Be sure to use the entire URL (with the https or http) in it when pasting in this area.

Fill out all of the above information for any slides you want to have in your carousel.

Here is an example of a slide with a caption added. As you can see, most of the time anything you might think of adding to the graphic, should actually be in the caption.

Adding the Carousel To A Page

To add a carousel to a page, the basic code is:

[isu_carousel ids=””]

the code “isu_carousel” is our custom shortcode that invokes the carousel.

Inside of the “ids” part, we need to list – in order – the image IDs of the carousel slides we prepared. To do this, open a new window (so you don’t lose your place) and go to your site’s Media Gallery. once there, click on one of your slides.

In the address bar of your browser you will see something like:

https://wp.las.iastate.edu/wp-admin/upload.php?item=2454

You want the number after ?item= – in this case 2454. Copy that number, and insert it into the “ids” section of the code we put on our page. It should now look like:

[isu_carousel ids=”2454″]

Repeat this process so the id’s field has a list of id’s separate by commas, such as:

[isu_carousel ids=”2454,2455,2456,2457″]

Editing A Carousel

To change the order or add/remove carousel slides, simple edit the list of id’s in the code.

Randomize Your Carousel Slides

Oftentimes it is desirable to show the images in your carousel in a random order, so visitors to the website won’t see the same image first every time they go to your website. To make a random slide appear first, simple add the following code:

orderby=”rand”

So that our code would now look like:

[isu_carousel ids=”2454,2455,2456,2457″ orderby=”rand”]

MOTE: It is not possible to start the carousel to autoplay (go to the next slide automatically). The user needs to click on the play button or one of the carousel slide numbers in the lower right.

Hide The Page Title

By default the page title for your site will appear after the ISU header, and before any of the content on your site. This can make the page title look like it is hanging there between the navigation bar and yor carousel.

To fix this, edit the homepage, and scroll down to the bottom of the editing window until you see the “Hide Title” checkbox under the section “Theme Display.”

Put a checkmark in the box.

You may then want to create your own “h1” heading for the page title in your page’s content after your carousel, to replace the page title you just hid from view.