One of Drupal's strengths is the ability to add Custom Content Types to handle special requirements and provide automatic handling of specific elements. One of the most requested features is a collection of related images, usually photos, with related information, e.g., captions. This is a demonstration of one way to display related images in what we'll call a Slideshow.
The main feature of this display is the large, rotating images with their (optional) captions. The animation starts automatically when the page is loaded and the images repeat continuously. The thumbnail size images will be readily recognized by virtually all site visitors as a pager; click on an image and see it as the next image displayed. What may not be obvious is that the rotation pauses when on mouse rollover.
This is only one of several ways that we can display image collections on a website. The slideshow method that is used here has these particular advantages:
- This display is completely responsive, all of the images automatically size to work on displays of all sizes. In fact, in our opinion the page looks a little better on smaller displays because image size is retained and the horizontal margins are narrowed, relatively, as the screen size gets smaller.
- Image rotation is automatic.
This format is not ideal for all situations. Some limitations of this type of display are:
- It works best for a relatively small number of images, perhaps somewhere around a dozen. While there's no mechanical limit to the number of images, as the number of images increases the distance from the lower thumbnails to the main image increases which reduces the effectiveness of user navigation.
- We do not particularly like the way the thumbnails are presented. This is a limitation of the software we're using here and we would change it if it were practical.
- The amount of text that can accompany each image is practically limited by the width of the image.
A different implementation of this type of display, using bullets for navigation instead of thumbnail images, can be found at the top of our Portfolio page.
We will demonstrate another way to display collections of images in what we'll call a scrapbook. This may be more appealing for larger image collections, or where automatic scrolling is not necessary. That technique is also fully responsive.
About the Photographer
A good friend of ours, Rick Perry, of Southlake, Texas (no, he's not the governor), has graciously allowed use of some of his photographs on this website to demonstrate ways images may be handled. Rick took these photos on a trip to McKinney, Texas on June 22, 2012. Thank you very much, Rick. Rick's photo on the right was inserted into the body of this page using a technique that is available via the WYSIWYG editor in almost any content type; it is not part of the slideshow. You may visit Rick's photography website to see more of his beautiful work.
Some Notes About This Slideshow
Drupal excels in letting us automate the handling of repetitive content, e.g., images that are part of a slideshow. Here's what we've automated for this content type:
- The original images we received from Rick were essentially the same size as they were when they came from his DSLR camera. Those files are much larger than we could ever profitably use on the website, yet we didn't want to have to resize them before uploading, so we configured Drupal to automatically scale the images to no more than 1200 pixels on the longest size as part of the upload process; scaling this way retains the original image aspect ratio. These are still too big to effectively use, but they're a convenient size to resize to smaller images as needed for specific purposes.
For the large image at the top, we created an Image Style with the following effects:
- The image was scaled to fit within an 720x405 pixel rectangle (16:9 aspect ratio; the same ratio used for HD video many images). That's the maximum size that we'll display on this page directly. The longest dimension of the resultant image is now either 720 or 405 pixels, depending upon its original aspect ratio.
- We programmatically added a narrow, yellow border to the image. We chose to make the border the same color on each side, and consistent with what we do with other images on this site; we could have made them different.
- We added a canvas below the image that is exactly 724x409 pixels and centered the image, with the border, on that canvas. We set the canvas color to match the background color of the website. (We couldn't use a transparent background because the images are in jpg format which doesn't support transparency.)
- We did something similar for the smaller images that make up the pager below the large image.
We needed to do a little calculation to determine how large the displayed image should be when we created this content type. Our typical target display is about 1366x768 or 1024x768 pixels; the vertical dimension will constrain our choice of image size. We want to be able to at least display one whole image with its caption; it's OK if the pager fits, too, but that's not extremely important here (if it were important, we'd just make the large image a little smaller). The large image size will be automatically reduced to an appropriate size when the page is displayed on smaller screens like tablets and smart phones.
Website content managers/contributors, the people responsible for creating content do not need to concern themselves with any of these mechanics. They simply need to select and upload the images they want displayed.
There are two transition effects for this type of display, fade and scroll. While we actually like the fade a little better, we chose the scroll here because we use the fade on our Portfolio page.