loading slideshow...

  • bu-beach-timeline

    Artistic Inspiration

    This sculpture on the lawn at the "BU Beach" is one of many eye-catching pieces of art you'll see around campus.

  • bu-bus-timeline

    Marsh Chapel

    Marsh Chapel is physically located near the center of the Charles River Campus, and also serves as the University's spiritual center as well.

  • bu-class-timeline

    Classrooms

    BU classrooms bring together a diverse group of students from all over the world who are getting a world-class education.

  • bu-flag-timeline

    Flag

    The BU flag - denoting the motto of Learning, Virtue, Piety - flies over Marsh Plaza.

  • Commencement-timeline

    Commencement

    A packed house at Nickerson Field celebrates the commencement of another class of BU graduates.

  • night-sky-timeline

    The Charles River

    The Law School tower features prominently in this beautiful photo of the Charles River near dusk.

  • rock-wall-timeline

    Climbing the Wall

    BU's Fitness and Recreation Center features an indoor climbing wall, for both teaching and recreation.

Overview

BU Slideshow is a plugin for creating and managing slideshows. It is designed to be simple enough for any site admin to use, and powerful enough to meet the needs of designers. The plugin has many optional functions that make it flexible enough for a variety of uses: slideshows, photo rotations, feature card decks in the sidebar, etc.

The plugin is available for all BU websites that use a theme based on the Flexi theme framework. Please submit a ticket to IS&T to request the BU Slideshow plugin to be enabled on your site. The BU Slideshow plugin is not available on blogs.bu.edu.

Getting Started

The plugin adds new items in the WordPress dashboard sidebar menu: Slideshows and Add Slideshows.

To create a new slideshow:

  1. Click Add Slideshow in the WordPress dashboard sidebar.
  2. On the Add Slideshow page, enter a name for your slideshow.
  3. You begin with one “Untitled Slide” — select your image and create that slide.
  4. Click the Add New Slide button to add more slides.
  5. When you are finished, click Create Slideshow.
  6. You can always go back in to edit slides and change options — you don’t need to finish it all at once!

v2slideshow-gettingstarted

Editing Slideshow

You can edit a slideshow at any time by going to the Slideshows admin page and then clicking the Edit button next to the specified slideshow name.

v2slidshow-editshow

Managing Slides

  1. Whether creating a new slideshow or editing an existing one, you can always add a new slide by clicking the Add New Slide button.
  2. When working with multiple slides, you can expand/collapse the editing panel for individual slides by clicking on the arrowhead in the top right corner of the panel.

v2slideshow-managingslides

Deleting Slides

  1. When editing your slideshow, expand the panel for the slide you want to delete.
  2. Click the red delete slide link in the bottom right corner in slide settings panel.
  3. A dialogue box will pop up asking you to confirm deletion — click OK.
  4. Remember: your changes are not immediate — they will not take effect until you click the Save Changes button as well.

v2slideshow-deleteslide

Reordering Slides in a Slideshow

  1. After selecting a slideshow to edit, simply click and drag the titlebar for any slide panel to reorder it in the slideshow.
  2. Remember: your changes are not immediate — they will not take effect until you click the Save Changes button as well.

v2slideshow-reordering

Adding Images to a Slide

IMPORTANT NOTE: For best results, use consistent image sizes (size all images to the same dimensions). Most standard Flexi themes have an available content width of 550 pixels. Custom themes may differ — to determine the width of the content area where you want to place a slideshow, see these tips for finding the dimensions of a web page element.

You can add an image that is already in your Media Library, or you can upload a new image.

Adding an Image Already in your Media Library

  1. While adding/editing an individual slide, click the Select Image button.
  2. From the Select Image box, click the Media Library indicator at the top of the screen.
  3. Click on the thumbnail for the image you wish to add.
  4. Specify the image size you want from the Attachment Display Settings at the bottom of the right sidebar menu.
  5. Click the Select Image button.

v2slideshow-addexistimage

Adding an Image via Upload

  1. While adding/editing an individual slide, click the Select Image button.
  2. From the Select Image box, click the Upload Files indicator at the top of the screen.
  3. A: Click the Select Files button to locate an image on your computer to upload; OR
    B: Drag-and-drop the image file from your computer’s filesystem (Explorer/Finder) onto the Upload Files panel in your browser.
  4. Once the image file is uploaded, specify the image size you want from the Attachment Display Settings at the bottom of the right sidebar menu (same as step 4 above).
  5. Click the Select Image button (same as step 5 above).

v2slideshow-uploadfile

Removing Images from a Slide

  1. Click the indicator arrow in the top right corner of a slide to expand and view all options/settings.
  2. Click the Remove Image button.
  3. Click the Save Changes button.

NOTE: Removing an image from a slide does not delete the slide itself.

Editing Images in a Slide

  1. Click the indicator arrow in the top right corner of a slide to expand and view all options/settings.
  2. On the left side of the slide panel, under the image thumbnail, you will see the image filename and an Edit link. Click this link to open the image in WordPress’ image editor. Here, you can perform image editing functions such as crop and resize.
  3. Also below the image thumbnail, you will see a drop down menu available to specify the image size. This menu will show the available sizes of the image already in your Media Library.
  4. Click the Save Changes button to save the slideshow with your changes. (NOTE that the image size selector only appears after you have clicked the Save Changes button.)

v2slideshow-imagesizes

Change the Title of a Slide

  1. Click the indicator arrow in the top right corner of a slide to expand and view all options/settings.
  2. If it’s a new slide, delete the default text — “Untitled Slide” — and type the desired slide title into the Title field.
  3. If you do not want a title on the slide, leave the Title field blank.
  4. Click the Save Changes button.

Placing and Styling Captions

New to Version 2 of the BU Slideshow plugin, editors can now easily set the location of the caption, with advanced options for custom styling.

  1. When placing a caption, you can choose from 6 placement options simply by highlighting the appropriate radio button. The options include any combination of top/bottom for vertical placement, and left/center/right for horizontal placement.
  2. For advanced styling options, you can now add custom, unique CSS class name(s) on a per-caption basis. Along with the Custom CSS plugin, you can then write CSS style definitions to control fonts, font colors, font sizes, background color, etc.

v2slideshow-captions

Link a Slide to Another Page

Links, when specified, are applied to the caption and the image.

  1. Click the indicator arrow in the top right corner of a slide to expand and view all options/settings.
  2. Copy/paste the destination URL into the Link field.
  3. Click the Save Changes button.

Change the Displayed Text of a Slide

  1. Click the indicator arrow in the top right corner of a slide to expand and view all options/settings.
  2. Type the desired text into the Text field.
  3. Click the Save Changes button.

Adding a Slideshow to a Page

  1. Navigate to, and enter the WordPress editor for, the page where you’d like to add a slideshow.
  2. Click the Add Slideshow button directly above the content editing window.
    v2slideshow-addslideshow
  3. A popup window will allow you to define several options for embedding the slideshow on a web page:
    • STANDARD OPTIONSv2slideshow-insertslideshow
      • Select Slideshow: Select the title of the slideshow you wish to display on this page.
      • Select transition type: Slide is the default type (images slide out of frame as the next image slides into the frame). You also have the option of fade transition.
      • Display Navigation: Check this box to display slide navigation; turn the check box off to embed a slideshow without slide-by-slide navigation.
      • Navigation style: On-slide navigation can be set to appear as icons or as sequential numbers.
      • Automatically play slideshow: Turn on the check box for the slideshow to begin playing automatically when a visitor loads the page. Un-check the box to require the user to navigate between slides.
      • Shuffle slides: Turn this on to have the slides display in a random order.
    • ADVANCED OPTIONSv2slideshow-insert-advanced
      • Fixed width: Specifies a fixed width, in pixels, for the slideshow.
      • Alignment: If your slideshow is not the full width of the available content area on the page where it is embedded, you can set the horizontal alignment of the overall slideshow here.
      • Custom Transition: Overrides transition selected under “Select Transition Type.” You must provide custom CSS transition code if you enter a value here.
      • Slide transition delay: Slow down or speed up your slideshow by setting the number of seconds between slide transitions.
  4. Once you’ve specified your desired options, click Insert Slideshow.
  5. The single line of code that appears holds information for your specified options. When you next update and view your page, the slideshow will appear.

Adding a Slideshow in a Widget

NOTE: This capability only works in the BU Text widget.

  1. Perform the steps above to add a slideshow to a page.
  2. After you insert the slideshow into the page, copy the shortcode from the visual editor.slideshow12
  3. Paste the code into the widget’s text field.
    slideshow13
  4. Then, remove the short code from the visual editor.
  5. Click Save Draft, Publish, or Update (depending on the status of the page) to save the page and widget.

Advanced Options

The information below is for users who have some experience with manipulating code (particularly HTML and CSS) and want even more customizable options.

Slideshow Shortcode and Support Attributes

Slideshows are displayed with the shortcode . The attributes supported are:

  • show_id: The numeric ID of the slideshow to be displayed.
  • show_nav: Whether to display slideshow navigation. Defaults to “true.”
  • nav_style: Style of the slideshow navigation. Defaults to “icon.” Currently “icon” and “number” are supported.
  • transition: Name of transition type to use. Currently the plugin offers “slide” and “fade,” with “slide” being the default. Any value can be entered here, and it will be output as a class in the slideshow with a prefix of “transition-,” e.g. “transition-mytransition.” This allows for the support of custom transition as defined via CSS.
  • autoplay: Whether the show would automatically animate on a timed interval. Defaults to “true.”
  • show_arrows: Whether arrows should be displayed on either side of the slideshow, allowing user to move backward and forward in show. Defaults to “false.”This is the only attribute that cannot be edited in the UI.
  • width: Either a numerical value (in pixels) or “auto,” which allows the slideshow to fill its container horizontally. Defaults to “auto.” Slides are set to the height of the tallest slide. Images have “max-width: 100%” applied and will scale down to the slideshow width as necessary (which may affect slideshow height). The slideshow resizes with the page, so it plays nice with device orientation changes.

If “autoplay” is set to false, the plugin will set “show_arrows” to true, unless “show_arrows” has been explicitly set to false in the shortcode. This is to help ensure that visitors always have a clear way of moving through the show.

Advanced Height Option

Depending upon how and where you embed a slideshow on a page, you may wish for the page to hold a space for the height of the slideshow while the slides are loading. This prevents the content from “jumping” on the page after the slides load and slideshow begins.

You can set this option individually on each slideshow. Just edit your slideshow, scroll to the bottom of the editing window, and set the Default Height option in pixels.

v2slideshow-height

Slideshow Custom CSS

Slideshows are given a class that corresponds to their name, allowing for additional targeting via CSS.

In order to use custom CSS, you must first enable the Custom CSS plugin.

Example 1) If you want to put a solid, black border of 2 pixels around your slideshow, add the code below to your Custom CSS window, replacing “mySlideshow” with the name of your slideshow:

.mySlideshow {
border: 1px solid black;
}

Each caption is given a class name of “.bu-slide-caption.”

Example 2) If you want to put the captions into the upper left corner of the images, add this CSS code:

.bu-slide-caption {
left: 6%;
top: 20%;
height: 30px;
}

Custom Slideshow Transitions

Sequence.js uses CSS 3 transitions that must be defined by the developer (if CSS 3 transitions are not supported in the browser, it falls back to a js-based slide animation). BU Slideshow defines transition states for slide and fade animations. When the slideshow markup is output, the transition type is added a class (e.g., “transition-slide”) and the relevant CSS is declared as descendants of this class.

Custom transitions can be defined using the Custom CSS plugin or within a theme’s CSS. The relevant styles should descend from a  ”transition-mytransition” class, where “mytransition” is the name you want to give it. Users can then enter “mytransition” as a custom transition in the modal form (or directly as the “transition” option in the shortcode) and your custom transition CSS will be used.

For more on how to write animations for sequence.js, see the Sequence documentation and BU Slideshow’s CSS files. The use of CSS allows for great flexibility in animations.