Slideshow/Gallery Component

The Slideshow/Gallery component is used to easily add an interactive image gallery to your Drupal page. There are two styles or "display types" for a Slideshow/Gallery component, Slideshow and Gallery. 

Elements

1. Title (required but not displayed)

2. Label

3. Display Type (required)

   1. Options: Slideshow (default), Gallery

4. Number of Images to Display

   1. Default set to ‘All Slides’

5. Slideshow/Gallery Items (Images)

Open

Examples

Step-by-step Instructions

Preparing your Images

Although the slideshow layout 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 a Slideshow/Gallery

1.  Provide a Title for the new Slideshow/Gallery.

   1. Note: At this time, the Title is only shown when the Display Type is set to Image Gallery 

2. Optionally, add a Label.

3. Under Display Type, select either Slideshow or Image Gallery (see examples above).

4. Under Number of Images to Display, select the amount of images to be displayed in the component. The default value is All Slides.

5. Begin adding your Slide Items:

   1. If using an existing image already in the system:

      1. Click Insert an Image button to launch the browser pop-up window.

      2. Navigate to the image under Select Image, clicking on the radio button to the left of the thumbnail to select it.

      3. Press the Select Image button in the bottom left.

   2. If using a new image:

      1. If you’re adding a new image to the system, click the Insert an Image button to launch the browser pop-up window button.

      2. Click Upload Image and then the Browse… button to browse your local system for the file, select it, and click the Select Image button.

   3. Optionally, add a Video URL. The system expects the video to come from YouTube.

      1. Note: If both a Video URL and Image File are present, the image will be used as the video’s “poster image”. This is the way the system is intended to be used but is not required.

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

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

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

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

6. Once you are done, click the  green Save button at the very bottom.