Middlebury

Drupal Slideshow

With the Slideshow content type you can add a set of images to a page that will automatically rotate or fade in and out. It is important to understand that all images you add to a Slideshow are fully public, no matter what other page or content permissions you set in Drupal. Only use this feature for images that you want to be world-viewable.

Preparing your Images

If you set a Width when creating your Slideshow, your images will be scaled to have that as their maximum width. Also, when the page is first loaded, only the first slide will load, with the other images loaded in the background to improve page load times. Even so, it is recommended that you prepare your images before creating your slideshow.

  1. Determine where on your page(s) you want your Slideshow to appear.
  2. Consult the Region Dimensions documentation to see what the width of that region is.
  3. Use a program like Photoshop to crop your images so that they are the appropriate width and use the Save for Web feature to get a web-optimized copy of your image.

Slideshows work best when your images are all the same proportions.

Creating the Slideshow

  1. Navigate to the page where you want the Slideshow to appear and log in.
  2. Click Add in the blue Content section of the Edit Console.
  3. Click Slideshow in the list of available content types in the middle of the page.
  4. Enter a Title for your Slideshow.
  5. In the Images and Captions section:
    1. Click Browse
      1. Click Browse again in the pop-up that appears.
      2. Find your image on your computer, select it, and click Open.
      3. Click Next.
      4. (optional) Add some Alt text. Alternative text is used by screen readers, search engines, and when the image cannot be loaded. By adding alt text you improve accessibility and search engine optimization.
      5. (optional) Add some Title text. Title text is used in the tool tip when a user hovers their mouse over the image. Adding title text makes it easier to understand the context of an image and improves usability.
      6. Click Save.
    2. Enter a Caption for your image. Your caption may contain bold, italics, and hyperlinks. If you add hyperlinks to your caption, whichever one is the first one added will be used to wrap the image in the slideshow in the same link.
    3. If you want to add another slide, click the Add another item button and repeat these steps.
  6. If you check the Show Pager checkbox, a series of • characters will be displayed below the slides, allowing people to click through to each slide. This feature is incompatible with progressive loading of slide images and enabling it will increase the initial page load time as all slides will need to be loaded.
  7. In the Width textfield, enter the maximum width of the slideshow, in pixels. If you leave this blank, we will use the width of the largest image attached to this slideshow. Consult the Region Dimensions documentation to see what the width of each page region is.
  8. Choose the Effect to use when transitioning slides. The available effects are:
    1. Horizontal Scroll
    2. Fade In
    3. Fade Out
    4. None
  9. Choose the Timeout, which is the time, in milliseconds (1000 ms = 1 second) between slide transitions. For example, if you enter 8000 here, each slide will appear for eight seconds.
  10. Choose the Speed, which is the time, in milliseconds (1000 ms = 1 second) that will be consumed by the transition effect. For example, if you enter 500 here, the fade or scroll effect will last half a second when moving to the next slide.
  11. Click the Save button.
Powered by MediaWiki