Slideshow Module - How to Add and Update a Slideshow

Who Should Use This

You should be reading this:

• If you want to add life, color and motion to a page with a Slideshow.
• If you want to showcase larger images of products, events, classes, or your facilities.
• If you want to enrich the media offered on your website to increase your SEO results.

There are two current versions of our Slideshow module. This tutorial is about the newest version (just called Slideshow in your Add Content module list), which has been formatted to work with the Responsive website architecture, so it will scale perfectly for mobile devices. There are several pros and cons when choosing to use this module:

How to Create Your Slideshow

The first part of this process is identifying the page on which you want your new slideshow to appear. After you have logged into the system and navigated to the proper page, please follow these steps to create your slideshow:

1. In the upper left corner of the page, find the triangle with the Plus in it and hover your mouse over it. In the drop list that appears, click on Add Body Content.
2. Scroll down the list of Modules and find the Slideshow module (not v. 2.0). Click the Add button.
3. You will see a blank version of the image below. Here is the opening screen of your slideshow:
   
4. You have the option of setting the Slideshow Transition to either Slide or Fade. The Slide option will bring the new image in from one side, sliding the old one out. The Fade option will smoothly fade from the current image to the next one.
5. If you have images with text, as in the example above, you will want to set a Slideshow Speed that gives your viewers enough time to read. If you are featuring images with very little or no text, faster speeds are good. It is likely that a site visitor will not spend more than ten to fifteen seconds at most watching your slideshow, so plan accordingly on the total amount of time to go through your images.
6. For the Slideshow Images themselves, the Slideshow module will be able to feature as many as you like, but as a practical matter, most visitors won't sit through more than four to six images, especially if they are text-heavy. PLEASE NOTE: For best results with your images, make sure all images you use are exactly the same dimensions in pixels. This will ensure smooth transitions. If your images are different heights, the content on the page that is beneath the slideshow will be jumping up and down as the height of the slideshow image changes. Here are the different ways you can add images:
1. To add an image from the Server, click Select from Server. You will see all of the images you have uploaded to the server and can choose the one you want. After you choose your image by clicking on it, you will see a thumbnail of the image.
2. To add an image from your computer, click Select from Computer.  You can search your computer and find the image you want. When you select the image, you will see text in the field for the image file. You will NOT see a thumbnail before the image is uploaded. You will see part of the image file name in the URL field. After you have saved the Slideshow, if you click to Edit it again, you will see the thumbnail.
7. You have the option of adding a Caption to each image, if you like. We recommend doing your text in Bold, and setting a larger than normal size. In the Text Size drop-list, 1.8em or larger should do nicely for heading-size text. For longer captions, 1.4 is probably as small as you can go and still be legible. When you click Caption, you will see a content editor open, here is an example:
   
   Here is how the Caption will show up using the settings above:
   
   If your image is darker overall, the default text will look just fine, but if it is a brighter image, like the one above, even with the drop-shadowing on the text (which is automatic) you may want to change the text color to something darker, such as charcoal or black. Here is the same image with charcoal text in the caption:
   
   Text EM Sizes vs. Point Sizes: Wondering what an em text size of 1.2 means? In typography, an 'em' is a unit of measurement based on the width of the capital M character. In responsive web design, we use an 'em' as a baseline for scaling fonts to fit different sized displays at different relative sizes. So an em size of 1.2 would would be 120% of whatever the baseline size would be. So if the main body font on your screen displays at roughly 12 points, and you set some of your text to show up at 1.2 em, it would show up 20% larger than twelve point text, which would be about 14.4 points.
8. You can also click to Link the image to a page or a file. When you click the Link option, you can paste a URL to whatever page or file you like. 
   
   Productivity Tip: If you are in the middle of something you don't want to leave (like setting up your Slideshow module) and you need to go somewhere else (e.g. to find and copy a URL), you can click on any of the top links in the Admin Toolbar, and then right-click on the area you want to go and have it Open in a New Tab. Then you can just switch back and forth between tabs. Click here to see how!
   
   
9. Once you have your Slideshow set up the way you want, scroll to the bottom of the screen and click the Save button. If you are uploading several images, it may take a while for the upload to complete, so do not go anywhere else in the system while it is working. Wait for it to finish uploading, and then you will see your slideshow appear on the page.

Slideshow Settings

You have several options in the Settings of the Slideshow module. To get to that area, click on the Settings button in the Module Toolbar for your Slideshow.

In the Settings window, the first thing you may want to look at will be the Margins for your Slideshow. In the Responsive website architecture, you won't really need side margins at all, unless you are using the Extra Wide format (see below) and you don't want the images to go all the way to the edge of the display.

With the size of the slideshow, you can format it to Normal or to Extra Wide. The Normal setting will have a width of 1174 pixels, so if you size your images that way, they will fit the width perfectly. The Extra Wide format will go full-width on a 1080p screen, so that will be 1920 pixels wide. Again, the height can be anything you like, just make sure all of the images use the same measurements in pixels.

If you're doing your slideshow at the Normal width, you can add a Background Color to the module, if you like. Photo editing or graphics software will allow you to find the hex color code you need (e.g. #1C471D). You can also go to colorpicker.com and find the color you want. The hex color code will be above the larger color window. Make sure you include a pound-sign / hashtag in front of the code with no spaces.

If you need help working with your images, or with cropping them to the desired dimensions, please click here.