Image Slider Pane

The Image Slider pane is used to easily add an interactive image gallery to your Drupal page. There are two styles or "display types" for an Image Slider pane, Slide Show and Image Gallery. 

Slide Show Display Type	Image Gallery Display Type

Slide Show Display Type	Image Gallery Display Type
Open	Open

Instructions for selecting these two different styles is described below under Creating an Image Slider Pane.

Preparing your Images

Although the image slider is capable of handling various image sizes, we have a few recommendations that will help ensure a pleasant user experience for your visitors. Prior to creating your slideshow it would be helpful to use Photoshop or an equivalent tool to resize slide images with the following in mind:

• Keep your image sizes consistent. If the images aren't exactly the same dimensions the screen will resize as the slider progresses.

• Image slider looks best when landscape oriented images are used (width is larger than height)

  • Optimal - 1600px wide X 1000px tall

  • Larger heights are acceptable, but should be consistent across all slides

• IMPORTANT: Before proceeding to Drupal, prepare your images first using a photo editor like Photoshop. Once your images are properly cropped, color corrected and sized, then proceed to the steps below:

Creating an Image Slider Pane

1. Log in to Drupal.

2. Hover over My Sites in the upper left. 

3. Click on the site to which you'd like to add an Image Slider.

4. Once at the site, hover over the yellow title (Site Administration) in the upper left to reveal an options list.

5. Select Add new pane > Image Slider.

6.  Provide a Title for the new Image Slider.
   Note: At this time, the Title is only shown when the Display Type is set to Image Gallery 

7. Under Choose the Display Type, select either Slide Show or Image Gallery (see images at top of page for examples).

8. Begin adding your slides

   • Under the Upload tab, click Choose File 

   • Find the image on your computer. Use the Browse button to upload a file from your computer.

   • Select an image and click OK.

   • Click Upload.

   • IMPORTANT: Provide Alternative Text, a succinct description of the information contained in the image. This is primarily to ensure that the site is accessible to all visitors. For a thorough description of Alternative Text and its usage, visit this WebAim article.

9. Optionally, add a Caption. The Caption should be no more than 250 characters and ideally, closer to 125 character.

10. Optionally, add Image Attribution with the Photographer's name & any other attribution required.

11. Drupal automatically creates a Thumbnail  Image. The thumbnail is used primarily in RSS feeds. It is possible to replace this thumbnail with your own.

12. Click the blue Add another item button and repeat the process to add more slides

13. Once you are don, click the  green Save button at the very bottom. 

Placing the Image Slider Media Item in a Page

1. While logged in to Drupal, navigate to the page that should receive the Image Slider Pane.

2. Locate the editing tabs above the page content, and click Arrange Panes.

3. Scroll down and select either the Advanced Page Content or Additional Content zone.

4. Click the gear icon in the upper left corner of the Advanced Page Content or Additional Content zone.

5. Click add content. Under Existing Site Panes category, find and click Image Slider Panes.

6. Find the title of the slideshow that you created above. Select it.

7. Scroll to the bottom of the console and click the Finish (blue button)

8. The Image Slider pane will now appear in the zone that you selected.

9. Scroll to the bottom of the page.

10. Select the desired Moderation State of the page (Published or Draft).

11. Click Save.