slideshow

UC Slideshow

Note: If you’re using Hale 2015, Sherman, or any other Cornerstone based theme, use Meta Slider instead of UC Slideshow.

UC Slideshow is a custom widget developed by UITS to create basic image slideshows for your homepage.

Setup

slideshow-setup-1

  • Log in and go to Appearance > Widgets.
  • Drag UC Slideshow into one of the Home sections.
  • Click the Save button.

Using UC Slideshow

Use the Add Images button to select up to 5 images from your media library. If you haven’t yet added the images to your media library, cancel. Look for Media > Add in the main system navigation, upload your images, and then return to Add Images.

Text

If you’d like text to appear with the image, fill in the ‘Caption‘ field.

Links

To add a link, paste a web address into the ‘UCS Link‘ field, and the entire image will be clickable. For example: http://aurora.uconn.edu/

Ordering

To change the order of the slides, click and drag the thumbnails along the bottom of the window.

Removing Slides

As you select an image, you’ll see a checkmark appear in the top right corner of the thumbnail. To remove the slide, click the checkmark again.

Additional Features

slideshow-setup-2

Effect

Choose what kind of animated transition will occur in between the slides.

Speed

This determines how much time each slide will remain on the screen before moving to the next.

Theme

This will influence how the display controls will look.

Formatting Your Images

If you don’t crop your images, they may not fit quite right into your slideshow.

Depending on which section you place your slideshow in, the maximum width and height will change. If you want a simple rule, just clip your images to the ‘Full Width’ measurements below. That will also give you the greatest degree of flexibility in deciding where to place things.

Homepage Column Type Width (px) Height (px)
Full Width* 1170 456
Two-Thirds width 770 300
Half width 570 221
Third width 370 144
Quarter width 270 105

* If you save it at this size, it will size down correctly to any of the other configurations. If you’re not sure what layout you want to use, sizing your photos to these dimensions is a good option.

Full-Width Homepage Slideshow or Image

Follow these instructions for a full-width slideshow or image at the top of your homepage. Examples of this can be found on the UConn website as well as The Major Experience website. Note that your homepage must be using the Page Builder and the Template must be Blank. Also, your theme must be either Sherman or Hale 2015.

Slideshow

  1. Create the slideshow. You can find more information about our Meta Slider slideshow tool here.
  2. Go to your homepage edit screen. Under Page Attributes, make sure that the Template is set to ‘Blank’.
    Full Width Slider Blank Template
  3. On your homepage, create the top row with 1 column. In the Row Styles, open Layout, and underneath Row Layout select ‘Full Width Stretched’.
    Full Width Slider Row Styles
  4. Insert a Meta Slider widget into the row and select the slideshow. Do not add a title.
  5. Add the following code to your Custom CSS:
    • SHERMAN THEME
      .home .entry-content {
      margin-top:0
      }
    • HALE 2015 THEME
      .home #content {
      padding:0
      }

Image

  1. Please Note:  Currently extra CSS may need to be added for the image to stretch full screen.  Follow the instructions below, if the image is left justified.
  2. Upload the image. Note: It may be a good idea to crop the image before adding it to your homepage. Normally, the ideal full-width homepage image will be very wide and very short.
  3. Go to your homepage edit screen. Under Page Attributes, make sure that the Template is set to ‘Blank’.
    Full Width Slider Blank Template
  4. On your homepage, create the top row with 1 column. In the Row Styles, open Layout, and underneath Row Layout select ‘Full Width Stretched’.
    Full Width Slider Row Styles
  5. Insert an Image widget into the row and select the image. Do not add a title, but you must add alternate text.
  6. Add the following code to your Custom CSS:
    • SHERMAN THEME
      .home .entry-content {
      margin-top:0
      }
    • HALE 2015 THEME
      .home #content {
      padding:0
      }
  7. If your image is Left Justified and not fully stretched, add the following to your Custom CSS:
    • Custom CSS
      .siteorigin-panels-stretch img {
          width: 100%;
      }

Meta Slider

Meta Slider is the primary slideshow tool for Aurora. It can be accessed from the left-hand menu on your dashboard.

To add a new slider, click the + tab at the top of the screen. You can then rename your slider by clicking directly on its tab.

   

Then, simply click the Add Slide button to start adding slides!

 

Types of Slides

On the left-hand side of the Add Slide window, there is a menu with different types of slides that can be added to a Meta Slider. Below is a description of each.

Image

The most common type of slide is an Image slide. For this slide the user must either choose an image from their Media Library or upload a new image.
 

External URL

This slide type is used if the user wants to embed an image located elsewhere on the web. To use this slide type, the user must click Add to slider before they can insert the image URL.
 

Layer Slide

To create an image slide with layers, such as text, links, and more, add a Layer Slide. Like the Image slide type, the user must either select an image from the Media Library or upload one. Once the slide is added to the slider, the user can click ‘Launch Layer Editor’ under the General tab of the slide in order to add/edit layers. The above image shows the layer edit screen.

For more information, view the layer slides guide on the Meta Slider official website.

Vimeo/YouTube

Both Vimeo and YouTube are sites that host videos. For both of these slide types, the user must add a video URL from Vimeo or YouTube, respectively, and that video will be embedded into the slide.
 

Post Feed

This slide type embeds posts into the slider. Like the External URL slide type, the user must click Add to slider before they can choose which posts are displayed.

Under the slide's Display Settings tab users can choose how many posts will be displayed (Post Limit), and each post displayed will have its own slide. Through Display Settings users can also choose how the posts are ordered. If the user only wants posts of a certain category, the user may choose this under the slide's Taxonomy tab. Only posts with a Featured Image can be displayed.

Common Settings

There are many settings through which a user can customize their slideshow. Here is a breakdown of some of the more commonly utilized options available:

  • Navigation — Users can opt to have different types of navigation displayed below their slider to make it easier for viewers to get to a specific slide. However, there is also the option to hide the navigation altogether, which may be a better option for a slideshow consisting only of images. Users can also opt to display left and right arrows on their slider as navigation.
  • Slide delay — Located in the Advanced Settings, the slide delay determines how long each slide is shown before moving onto the next. If any slides have captions, users should be aware how long it takes to read these captions and alter the delay speed accordingly.
  • Stretch — The Flex, R., and Nivo sliders all have the option under Advanced Settings of 100% wide output. If this box is checked, it means that the slider will grow to fit the space it is in if necessary, even if the space is wider than its set width.

Types of Sliders

There are four types of sliders that you can choose from: Flex, R., Nivo, and Coin. Each slider has a slightly different feel to it and some of the settings vary from slider to slider. The best way to determine which slider is right for a specific slideshow is to try them all out! Users can easily preview a slideshow without adding it to a Page or Post by clicking the Save & Preview button at the top right of the slideshow's edit screen. Below are examples of each slideshow type.

Flex Slider

  • Aurora at UITS
    Aurora at UITS

Nivo Slider

Aurora 1 Aurora 3 Aurora 2

R. Slider

  • Antennae Galaxies
    Antennae Galaxies
  • Sunset Over the Gulf of Mexico
    Sunset Over the Gulf of Mexico
  • Aurora Borealis
    Aurora Borealis
  • Aurora at UITS
    Aurora at UITS
  • Great Lakes and Central U.S. Viewed From the International Space Station
    Great Lakes and Central U.S. Viewed From the International Space Station
  • Space
    Space
  • Sunrise From the International Space Station
    Sunrise From the International Space Station

Coin Slider