Skip to main content

Drupal 7 - Embedded Slideshow on Pages

In SSU Drupal, Landing Pages and Basic Pages include an easy-to-use option for embedding a slideshow in the Body Content.  Follow these steps.

  1. Add or Edit and Landing Page or Basic Page.
  2. Give the page a title and body content as usual.
  3. Below the Body field, look for the Embed Slideshow option, and click Browse to attach media.
  4. Add images to the slideshow.  You can either upload images or click Library and select images that have already been uploaded. 
  5. Click the Edit button next to each image to make the following changes, then Save the image.
    • Make sure the Alt text appropriately describes the image.  This is for accessibility.
    • If you want a caption displayed below the image, enter that text in the Title text field.
    • Images will be cropped to fit the slideshow.  Use the Focal Point cross hairs to indicate the most important part of the image.  This will not be cropped. 
  6. Under the Embed Slideshow heading, find, select and copy the snippet of code:
    <div class="slideshow-embed"> [[field:embed_slideshow]] </div>
  7. In the Body, click the Source button, and paste the snippet where you want the slideshow.
  8. Save and Publish.

See a Sample Page with an Embedded Slideshow.