Using the slideshow gadget, you can add an animated slideshow to your Wild Apricot site, displaying one image after another from a collection of images.
Wild Apricot's slideshow gadget can display images from a folder in your Wild Apricot account or a photo album gadget on a page in your site. Depending on your settings, visitors can view the images in order at the speed you have set, or they can scroll through the images at their own speed, and use the controls at the bottom of the slideshow to jump to a particular image.
You can insert a slideshow gadget into a page onto your site, or into a page template so that all pages that use that template will automatically display the gadget. You could, for example, add a slideshow to your page header to act as an animated header background.
You can separately link each image to a page on your site, an event on your site, or an external page or email address. You can also specify descriptions to appear along the bottom of each image.
Adding a slideshow gadget
To add a slideshow gadget to a page or page template, follow these steps:
- Click the Website menu, then click the Sites pages option within the Website module.
- Create or begin editing the site page or page template where you want the slideshow to appear.
- Click the Gadgets icon to display the list of available gadgets.
- Drag the slideshow gadget from the list, and drop it where you want it to appear. You can insert it into a section within a layout, or above or below a layout.
When a layout cell or placeholder is empty, a Drop gadget or layout here prompt will be displayed. When you drag a gadget over an empty layout cell or placeholder, it turns green, indicating that you can drop the gadget there. When you drag a gadget above or below a layout, a prompt will appear indicating that you can drop the gadget before or after the layout. - After you have dropped the gadget in the desired location, hover your pointer over it and click the Settings icon.
- Within the gadget settings panel on the left, choose which images you want to display. You can display images from the current theme, from a particular folder in your Wild Apricot account, or from a photo album gadget on your site.
- Adjust other slideshow gadget settings as required. For more information, see Slideshow gadget settings (below).
- Click Save to save the changes to the page.
For instructions on restricting access to the page, see Page access and visibility.
Slideshow gadget settings
Now that you have added a slideshow gadget to your page or page template, you can adjust the slideshow gadget settings to control how slideshow images are displayed.
Gadget settings appear in a panel on the left side (which can be hidden to maximize the page design area). To display the settings panel, you position your pointer over the gadget – while editing a site page or a page template – then click the gadget's Settings icon.
The following settings are available for slideshow gadgets:
Images to display
Choose the location of the images you want to display. You can display images from the current theme, from a particular folder in your Wild Apricot account, or from a photo album gadget on your site. You cannot choose photo albums that appear on admin only pages. If you display images from a folder, the images will appear in order by file name. If you display images from a photo album gadget, they will appear in the order in which they were added to the photo album – from newest to oldest – unless you enable the Randomize order option (below). Any captions added to images in the photo album will be automatically displayed along the bottom of the images.
Gallery layout
Controls the size and orientation of the slideshow. You can choose from Landscape, Portrait, Square, and Fixed height options. If you select Fixed height, you can specify the height of the slideshow in pixels.
Fit image to slideshow area
Controls whether images are expanded to fill the slideshow area. If this option is enabled, part of the image may be cropped. If this option is disabled, white bars may appear above or beside the image.
Display image
The number of seconds each image should be displayed.
Transition time
The number of milliseconds for the transition between images.
Transition effect
The effect used during the transition time to move from one image to another.
Randomize order
Check this option to display the slideshow images in random order.
Allow user to navigate through images
Determines whether controls appear along the side of the slideshow, allowing visitors to scroll through images at their own speed, and at the bottom, allowing visitors to jump to different images instead of viewing the images in order.
Show countdown bar
Check this option to display a countdown bar showing how much longer the current image will be displayed.
Add link to images
Click this button to link your slideshow images. On the dialog that appears, you can choose where each image should link to. You can link to an external website or email address, to a page on your site, or to an event on your site.
For each image, you can also specify a tooltip and choose whether you want the linked page to open in a new window or the same window.
You can also specify a description that will appear along the bottom of the image. If you are displaying images from a photo album, any captions already assigned to the image will be automatically loaded as default descriptions.
Margins
The amount of space – in pixels – that appears outside the gadget. You can set top, bottom, left, and right margins separately.
Advanced
Within the Advanced section, you can enter CSS code or classes to further control the appearance and behavior of the gadget. For more information, see Gadget settings.
Linking images in your slideshow
You can link each image in your slideshow to a separate destination. To link your images, display the slideshow gadget settings and click the Add link to images button.
On the dialog that appears, you select each image that you want to link, then choose where you want the link to go to. The following options are available:
Website/Email
Link to an email address or another website. After clicking this tab, you enter the email address or website URL.
Site page
Select a page on your Wild Apricot site you want to link to.
Event
Link to the detail page or registration form for one or your events. After clicking the Event tab, you select the event from the list of past and upcoming events. Choose whether to link to the event's detail page or registration page.
For each image, you can also specify a tooltip and choose whether you want the linked page to open in a new window or the same window.
You can also specify a description that will appear along the bottom of the image. If you are displaying images from a photo album, any captions already assigned to the images will be automatically loaded as default descriptions.
Displaying captions
You can display a caption along the bottom of each image within your slideshow.
There are two ways you can add captions to images:
- If you are displaying images from a photo album, any captions you add to the images within the photo album will be automatically displayed along the bottom of the images in the slideshow.
- You can enter a Description for your slideshow images while assigning links to them.
If you are displaying images from a photo album, captions will be automatically loaded as default descriptions.
You cannot assign or modify a caption from the slideshow gadget settings without linking the image.
Troubleshooting
Image appears rotated
If a picture appears at the wrong angle – rotated 90 degrees, for example – try saving the picture using a different file format (e.g. .PNG) then loading the new file.
If that doesn't work, you can use a graphic editor such as PhotoShop to remove the EXIF data embedded in the graphic file that's controlling the orientation. For more information on this approach, click here.
