Instructions - College Slider 1

The ‘College Slider 1’ Best Practice Asset displays a slideshow of College and University logos on automatic rotation. It is powered by a single Resource element that can be customized to display in a light or dark color scheme. Each logo in the slider can optionally be linked to a related webpage. 

This Best Practice Asset is designed to promote your school’s College and University destinations, but it can also be used to showcase other types of logos. Some common alternative applications include:

• Showcasing awards or accreditations your school has received.
• Highlighting other schools and organisations you are associated with.
• Displaying Athletics logos for schools you are in regular competition with.

During the deployment of the College Slider, you will be asked to choose one of four possible design treatments to be configured on your website. Further information on these treatments can be found in the ‘Slider Design Treatments’ section below. Please note that once the buildout process has started, the chosen treatment cannot be changed.

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. Each logo added to the slider must also be saved with a transparent background.

During the deployment of the College Slider, you will be asked to choose one of the following design treatments to be configured on your website. Each of these can be customized to display with a light or dark color scheme:

• Standard: Each logo displays in the color it has been uploaded and the slider has hard left and right edges. If the dark color scheme is applied, the background of the slider shows in the light gray to ensure clear visibility of color logos.

• Greyscale: Each logo displays in black and white and the slider has hard left and right edges. This black and white styling is applied automatically to all logos, including those uploaded in color, so that you are not required to find black and white images. If the dark color scheme is applied, the background of the slider shows in your main color to ensure visibility of the greyscale logos.

• Faded Edges: Each logo displays in the color it has been uploaded and the slider has faded left and right edges. If the dark color scheme is applied, the background of the slider shows in the light gray to ensure visibility of the color logos.

• Greyscale & Faded Edges: Each logo displays in black and white and the slider has faded left and right edges. This black and white styling is applied automatically to all logos, including those uploaded in color, so that you are not required to find black and white images. If the dark color scheme is applied, the background of the slider shows in your main color to ensure visibility of the greyscale logos.

Important: Please note that once the buildout process for the College Slider has started, the chosen design treatment cannot be changed. 

If you later require an additional design treatment, please contact your Finalsite Client Success Manager for further information. Please note that commissioning an additional treatment may have a cost implication.

The following pixel dimensions are recommended for images in the College Slider. These will help you to achieve an ideal balance of visual quality and loading speed:

*Each logo in the slider is styled to display with a maximum height of 90px, but a minimum height of 256px is recommended to ensure a crisp presentation on high definition screens. 

Where possible, prepare all logos in the College Slider to the same height. The slider will display correctly with images of different heights, but consistent sizing will create a more uniform presentation.

Note: We recommend using photo editing software such as Adobe Photoshop to resize your images before uploading them to Composer.

Each logo in the College Slider should be uploaded as an individual image. The following best practices are recommended when preparing these images to ensure they display effectively: 

• Prepare all logos with a transparent background.
• Save images at 72ppi (pixels per inch) in .png file format with an RGB color profile.
• Add descriptive alt text when uploading images to make them accessibility-compliant. 

Note: Finalsite does not provide a library of logos for the College Slider, but many Colleges and Universities publish their logos online or make them available upon request. 

Where possible, we also recommend consulting the brand guidelines published by these organizations to ensure the logos you upload comply with their latest brand requirements.

The following instructions explain how to add a new College Slider to a page on your website with a new gallery of logos on display. 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 logos 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 located 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.
5. Click on the ‘Save’ button at the bottom of the ‘New Public Gallery’ window.

Make a Copy of the Example ‘College Slider’

As part of the setup process for this Best Practice Asset, Finalsite has set up an example page on your website displaying the College Slider in both color schemes. Begin by copying and pasting one of these example sliders onto the desired page: 

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 ‘College Slider 1’ page.
4. Hover over the Resource element displaying the College Slider 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 slider. 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 College Slider and click on the ‘Add Element’ button.
7. Click on the blue ‘Paste this Element’ button in the ‘New Element’ window.

Update the Gallery of Logos on Display

With the new College Slider in place, update the settings of the Resource element to display the Resources Gallery you created earlier:

1. Hover over the Resource element displaying the College Slider and click on the ‘gear’ icon in the top-right corner.
2. Click on the ‘Browse’ button below the ‘Title’ field in the ‘Resource Element Settings’ window.
3. Choose the gallery you created earlier from the ‘Select a Gallery’ window.
4. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Element Settings’ window.

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

1. Go to the ’Pages’ panel.
2. Navigate to the page displaying the College Slider 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 slider 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.

When adding a new College Slider or updating its settings, the page will have the ‘Compose’ toggle enabled, which means the Resource element displaying the feature will show with a simplified appearance to make it easier to edit.

To preview how your updated College Slider will look with its fully styled appearance:

1. Make sure you have saved any updates to the elements you have been working on.
2. Turn off the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.

To publish the updates on the live website, click on the ‘Publish’ button in the bar at the bottom of the page interface and select from the options in the ‘Publish Page’ window to publish the page now or schedule the page to publish later.

Note: If you do not have the administration rights to publish the page, you can request the page to be published instead. This will notify the specified administrator to approve or deny the publish request.

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

Upload a New Logo Image

Begin by uploading the logo 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 logo 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 the new logo.
6. Once the upload is complete, click into the ‘Title’ field in the ‘Edit Resource Details’ window and add a short title for your logo. This is for internal use and will not display in the slider.
7. Optionally click into the ‘Description’ field to add a link to the logo image:
   • Type in the name of the page or website the logo will link to (this text is not be seen by the visitor in the slider).
   • Highlight this text with your cursor.
   • Click on the ‘Link’ icon button in the content editor toolbar.
   • Choose ‘Add Link’ from the dropdown list.
   • Select a link type from the top of the ‘Link’ properties window.
   • Configure the link settings and make sure that the ‘Open link in a new tab’ checkbox is only ticked if the link opens an external webpage.

1. 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.
2. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

Image Size: The minimum height recommended for logos in the College Slider is 256px. There is no minimum or maximum width requirement.

Add the Image to the Resources Gallery

With the file uploaded, add the logo to the Resources Gallery that is set to display in the College Slider you want to update:

1. Click on Resources in Composer’s left navigation.
2. Click on the ‘Galleries’ tab.
3. Select the gallery displaying within the College Slider you want to update.
4. Click on the ‘+ Public Resource' button at the top-right of the gallery interface.
5. Select the image you have uploaded previously and add it to the gallery.
6. Drag and drop the image into the desired position within this 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 College Slider.

Each logo in the College Slider can optionally be linked to a related webpage. To add a link to an existing logo that doesn’t have a link applied currently:

1. Click on Resources in Composer’s left navigation. 
2. Find and select the logo image you would like to add a link to. This will open the Resource detail panel on the right of the Composer interface.
3. Click into the ‘Description’ field in the Resource details panel.
4. Type in the name of the page or website the logo will link to (this text is not be seen by the visitor in the slider).
5. Highlight this text with your cursor.
6. Click on the ‘Link’ icon button in the content editor toolbar.
7. Choose ‘Add Link’ from the dropdown list.
8. Select a link type from the top of the ‘Link’ properties window.
9. Configure the link settings and make sure that the ‘Open link in a new tab’ checkbox is only ticked if the link opens an external webpage.
10. Click on the ‘Save’ button at the bottom of the Resource detail panel.