BPA - Image Slideshow

The ‘Image Slideshow 1 (Galleries)’ Best Practice Asset displays a visually-engaging slideshow of images with a supporting text panel for each slide. It is powered by a single Resource element and can be set to display with a light or dark color scheme.

Important: This Best Practice Asset can be added to multiple pages on your website, but must always be added to a full-width page layout without left or right banners. It is compatible with image files only. Video files and other media types are not supported.

The following pixel dimensions are recommended for each image in an Image Slideshow. These will help you to achieve an ideal balance of visual quality and loading speed:

Image Area	Width (pixels)	Height (pixels)
Slideshow image	800	788

There are two ways of preparing an image to match this size:

• Use photo editing software such as Adobe Photoshop to scale and/or crop the file before uploading it to Composer.

• Upload the original image into the Resources module, select it and click on the ‘Crop’ icon button towards the top of the Resource details panel. This will open Composer’s inbuilt image editor where you can scale and/or crop the file.

Tip: We recommend preparing each image in a slideshow to the same width and height based on the pixel dimensions above. This will ensure the slideshow looks uniform and consistent as the visitor navigates through each slide.

The following instructions explain how to add a new Image Slideshow to a page in your website. Please follow each set of steps in the order presented:

Create a Resources Gallery

Begin by creating a Gallery in the Resources module for the images in your slideshow:

1. Click on Resources in Composer’s left navigation.
2. Click on the ‘Galleries’ tab. 
3. Click on the ‘+ Create Public Gallery’ button at the bottom of the ‘Public Galleries’ directory within the Galleries panel.
4. Click into the ‘Name’ field in the ‘New Public Gallery’ window and type in a name for the new gallery.

Copy the Example ‘Image Slideshow’

As part of the setup process for this Best Practice Asset, Finalsite has added two example Image Slideshow to your website. With your new Gallery created, begin by copying and pasting one of the two example layouts onto the desired page in your website: 

1. Go to the ’Pages’ panel.
2. Select the branch containing the example page for this Best Practice Asset. This is normally the ‘Production’ or ‘BPA’ branch.
3. Select the ‘Image Slideshow 1’ page.
4. Hover over the Resource element displaying the Image Slideshow color option you want to use and click on the ‘Copy’ icon in the top-right corner.
5. Go to the ‘Pages’ panel and navigate to the desired page for your new Image Slideshow. This should have a full-width layout without left or right banners.
6. Scroll down to the main content area:
   • If the page doesn’t have any existing content, hover over the bottom of the main content area and click on the ‘Add Element’ button
   • If the page has existing content, hover over the element that should directly precede the Image Slideshow and click on the ‘Add Element’ button.
7. Click on the blue ‘Paste this Element’ button in the ‘New Element’ window.

Update the Title and Slideshow Content on Display

With the new Image Slideshow in place, update the settings of the Resource element to display a new title and show the Resources Gallery you created earlier:

1. Hover over the Resource element displaying the Image Slideshow and click on the ‘gear’ icon in the top-right corner.
2. Click into the ‘Title’ field in the ‘Resource Element Settings’ window and type in a new title for your slideshow. If a title is not required, click on the blue toggle to the right of the field to hide it.
3. Click on the ‘Browse’ button below the ‘Title’ field in the ‘Resource Element Settings’ window.
4. Choose the gallery you created previously in the ‘Select a Gallery’ window.
5. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.

The Image Slideshow can display with a light or dark color scheme. This can be changed at any time through updating the settings of Resource element displaying the slideshow:

1. Go to the ’Pages’ panel.
2. Navigate to the page displaying the Image Slideshow you want to update.
3. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
4. Refresh the page in your web browser.
5. Hover over the Resource element displaying the slideshow and click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ Design’ in the ‘Edit Resource Element Settings’ window.
7. Click into the ‘Custom Class’ field and type the custom class or classes outlined in the table below to apply the desired color scheme, making sure to include a space between the two classes if you apply the dark color style.
8. Click on the ‘Save button’ at the bottom of the ‘Edit Resource Element Settings’ window.

Color Scheme	Custom Classes Required
Light	bpa-image-slideshow-1
Dark	bpa-image-slideshow-1 dark

The following instructions explain how to add a new slide to an existing Image Slideshow on your website. Please follow each set of steps in the order presented:

Upload a New Image

Begin by uploading the image to the Resources module:

1. Click on Resources in Composer’s left navigation. 
2. Click on the ‘Resources’ tab.
3. Create or select an existing folder for your image within the ‘Public’ directory. 
4. Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
5. Choose from the options available to upload a new image.
6. Once the upload is complete, update the properties for the image in the ‘Edit Resource Details’ window:
   • Click into the ‘Title’ field and add a short title for your image. This will display at the top of the content panel supporting the image.
   • Click into the ‘Description’ content editor and add one or more paragraphs of text describing the image. This will display below the title in the content panel supporting the image
   • Click into the ‘Alt Text’ field and add a short description explaining the contents of the image for visitors who are unable to see it.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

Image Size: The recommended size for images in the location gallery is 800px (wide) by 788px (high).

Note: There is no word limit on the description for an image slide. If the volume of text exceeds the available space in the slideshow, the visitor will be able to scroll through the text to read it in full.

Add the Image to the Resources Gallery

With the file uploaded, add the image to the Resources Gallery that is set to display in the Image Slideshow you want to update:

1. Click on Resources in Composer’s left navigation.
2. Click on the ‘Galleries’ tab.
3. Select the gallery displaying the Image Slideshow you want to update.
4. Click on the ‘Add Public Resource' button at the top-right of the gallery interface.
5. Select the image you have previously uploaded and add it to the gallery.
6. Drag and drop the image into the desired position within the gallery.
7. Click the ‘Update’ button at the bottom-right of the Gallery interface.

Once the Resources Gallery has been updated, the new slide will display automatically in the Image slideshow.