Using the Gallery & Slideshow Elements
If you want to add multiple images to your site, there are two easy ways to do that: the gallery and slideshow elements. Which one should you use? It depends on how you want to display your images.
Note: Be sure that your images have unique file names. If you upload an image with the same file name as a previously uploaded image, the original image will be overwritten with the newly uploaded image. In some cases, you may want to do this (e.g. to replace an image with an updated or edited version), but in general it's best to use a different file name for each image.
Note: Be sure that your images have unique file names. If you upload an image with the same file name as a previously uploaded image, the original image will be overwritten with the newly uploaded image. In some cases, you may want to do this (e.g. to replace an image with an updated or edited version), but in general it's best to use a different file name for each image.
Slideshow: Displays a series of photos one at a time. You can set the slideshow to cycle through the images automatically, or allow visitors to click through the photos at their own pace. Each slide can have its own caption, link, and alt text.
|
Gallery: Displays a group of photos as thumbnails in a grid ranging from 2 to 6 columns wide. Clicking on a thumbnail opens the full image in “lightbox” display. You can add captions, alt text, and links to each thumbnail, though adding a link will remove the lightbox functionality from that image.
|
Slideshow
1. To add a slideshow, drag the element to a page on your site. This will open a dialog box where there are several different navigation styles to choose from. Click on one of the styles to open the image upload window, but don’t worry, you can change the navigation style later! On the upload screen, click the button to locate and upload your images.
2. When your images finish uploading, you’ll be able to rearrange them and add text or links. To move an image, simply click and hold on the thumbnail, drag it to a new spot, and drop it into place. From left to right, the icons above each image allow you to:
- Add a link to the slide. Add a caption to the slide. Add alt text to the image for accessibility. Delete the photo from the slideshow.
- If you need to add more images, use the button at the upper right. When you’re done, click save to view your slideshow on the page and adjust the settings.
3. Click on the slideshow element to open the settings panel. The button at the top will take you back to the slideshow thumbnail screen where you can add and remove images and captions, alt text, or links. The other options provide the following functions:
- Transition Style: Change the animation used when one image cycles to the next Navigation: Pick a different style of navigation for the slideshow. Note: “None” is the “simple” layout depicted in the images above. Speed: Decide how long each slide will display when using auto-play. Spacing: Set the top and bottom margins for the slideshow element. Caption Location: Switch the slide captions from top or bottom for all images. Advanced: Change the aspect ratio and autoplay settings.
- Try out different options to see what works best for your purposes, and don’t forget to publish when you’re done!
Gallery
1. Drag the Gallery element to a page and click to upload your images. You can select multiple images from your computer to add them all at once. When the images finish uploading, they’ll appear in the gallery on the page.
2. Click inside of the element to open the settings:
- Add Images: Upload more images to the gallery. Columns: Change the number of columns the gallery displays. Spacing: Adjust the top and bottom margins for the element. Caption: Choose a display style for captions (show only on the lightbox, show at the bottom of the thumbnail images, or show on top of the thumbnails in a translucent overlay) and turn on the option to display thumbnail captions only on hover. Advanced: Set the spacing between each image in the gallery and choose a border style.
3. Click on any image to add a link, caption, or alt text for accessibility. To rearrange images, click on a thumbnail and drag it to a new position. If you're displaying a lot of images, you may want to try using a larger number of columns - this will make the thumbnails smaller so more can fit into a row.
- Note: Adding a link to a gallery thumbnail will prevent the lightbox from opening.