Featured Profiles 3

The ‘Featured Profiles 3’ Best Practice Asset displays a visually-engaging slideshow of interactive profiles for showcasing people in your school’s community (such as teachers, staff, students, parents and alumni). It consists of the following key features:

• Active Profile: The active slide in the Profile Slideshow displays in a larger format directly above it. This includes the headshot image of the community member and a content panel displaying their name, their role at the school, an optional text summary and a ‘Read More’ button. When the visitor clicks on this ‘Read More’ button, a popup displays showing the full biography or testimonial.

• Profile Slideshow: The profiles are presented as a set of image buttons in a horizontal slideshow with arrow controls for the visitor to cycle through each slide if they cannot all fit on the visitor’s screen at once. Each image button displays the community member’s name and role in the foreground with their headshot image in the background. A dark gradient overlays the bottom of this image to make this text easier to read.

The ‘Featured Profiles 3’ slideshow is powered by a single Post element with an individual post for each profile.

Important: This Best Practice Asset can be added to multiple pages on the website, but must always be added to a full-width page layout without left or right banners.

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

Image Area	Width (pixels)	Height (pixels)
Headshot	800	800

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.
• If you only need to crop the image, upload it to 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 crop the file.

Each profile in the ‘Featured Profiles 3’ Slideshow requires a headshot image. This displays as a square shape in the Active Profile and as a rectangle in the Profile Slideshow.

The following best practices are recommended when preparing these images so that they display effectively on the page: 

• Upload a square image for each headshot with the focal point horizontally centered. Avoid placing key details on the left and right edges of the image because these will be automatically cropped for the rectangular buttons in the Profile Slideshow.
• Save images at 72ppi (pixels per inch) in .jpeg format with an RGB color profile.
• Add descriptive alt text when uploading images to make them accessibility-compliant.

The following instructions explain how to add a ‘Featured Profiles 3’ slideshow to a page in your website. Please follow each set of steps in the order presented:

Copy the ‘Featured Profiles 3’ Example Layout

As part of the setup process for this Best Practice Asset, Finalsite has added an example of the ‘Featured Profiles 3’ slideshow to your website. Begin by copying and pasting this example layout 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 ‘Featured Profiles 3’ page.
4. Hover over the Post element displaying the example Featured Profiles slideshow and click on the ‘Copy’ icon in the top-right corner.

1. Create or navigate to the page in the ‘Pages’ panel that you would like to add the new Featured Profiles slideshow to. This should have a full-width layout without left or right banners.

1. Scroll down to the main content area:
• If the page doesn’t have any 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 Featured Profiles slideshow and click on the ‘Add Element’ button.
2. Click on the blue ‘Paste this Element’ button in the ‘New Element’ window.

Update the Title and Set of Posts Displaying in the Post Element 

With the new Featured Profiles slideshow in place, update the settings of the Post element to display the content required for this page:

1. Hover over the Post element displaying the Featured Profiles slideshow and click on the ‘gear’ icon in the top-right corner.
2. Click into the ‘Title’ field in the ‘Post Element Settings’ window and type in a new title. If a title is not required, click on the blue toggle to the right of the field to hide it.
3. Click on ‘+ Content Filters’.
4. Click on the ‘Select Board’ button and choose one or more boards that contain the posts you want to display. If you want to show profiles from multiple boards, you can alternatively create a collection of posts and select this in the ‘Display posts from Collection’ dropdown.
5. Click on ‘+ Formatting’.
6. Optionally update the field specifying the number of posts to display in the grid.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Post Element Settings’ window.

Important: All posts set to display in the Featured Profiles slideshow must include the required content for this Best Practice Asset. Please refer to the ‘Add a New Featured Profile’ section of these instructions for further guidance on this.

Note: The arrow controls at the bottom of a Featured Profiles slideshow will only display if there are more profiles than can fit within the visible row of slides. These are shown or hidden automatically and will also update if the browser is resized.

Please also note that if a Featured Profiles slideshow only contains one slide, it will still display with an active profile at the top and the same smaller profile image button at the bottom. For this reason we recommend having at least two profiles in each slideshow to optimise the visitor’s experience .

The following instructions explain how to add a new profile to a ‘Featured Profiles 3’ slideshow on your website. Please follow each set of steps in the order presented:

Create a New Post with a Title, Body Content and Optional Summary

1. Click on the ‘Modules’ tab in Composer’s left navigation and select ‘Posts’.
2. Click on the ‘Boards’ tab.
3. Select the board that has been set to display within the ‘Featured Profiles 2’ slideshow you want to update.
4. Click on the ‘Create Post’ button at the top right of the Board interface.
5. Click into the ‘Title’ field and type in the name of the community member.
6. Click into the ‘Body Content’ content editor and add a short biography or testimonial. This will display in a popup when the visitor clicks on the post. 
7. Optionally click on the ‘Summary’ panel and type a short description into the content editor to introduce the profile.

Note: There is no word limit on the optional summary text. If the volume of text exceeds the available space in the Active Profile panel, the visitor will be able to scroll through the text to read it in full.

Assign a Category to Show the Profile Role

With the ‘New Post’ interface still open in Composer, create and/or assign a category to the post that describes the role of the community member (such as ‘Teacher’, ‘Student’ or ‘Alumni’).

To create and assign a new category:

1. Select the ‘Category & Tags’ panel.
2. Click on the ‘Manage Categories’ button.
3. Click into the ‘Create Category’ field in the ‘Manage Categories’ window and type in the category name.
4. Click on the ‘Add Category’ button.
5. Click on the ‘Save’ button at the bottom of the ‘Manage Categories’ window.
6. Select the category under the ‘Categories’ title in the ‘Category & Tags’ panel.

To assign an existing category:

1. Select the ‘Category & Tags’ panel.
2. Choose one or more categories from the existing choices on display in the ‘Categories’ section. 

Note: If multiple categories are added to post, each one will be automatically separated by a comma when displayed on a profile. Please note that categories are specific to the board you add them to and are not made available in other boards.

Add a Headshot Image

To add a new headshot image you will first need to upload it to the Resources module. This requires leaving the Post module, so it is important to save your new post first before proceeding with the following steps. Please refer to the ‘Save and Publish the Post’ section below for instructions on how to do this.

Once your post has been saved, navigate to the Resources module and upload the image:

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 in the ‘Public’ directory.
4. Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
5. Choose from the upload options available to upload the new image.
6. Once the upload is complete, update the following image properties in the ‘Edit Resource Details’ window:
1. Click into the ‘Title’ field and add a short title for your logo. This is for internal use and will not display in the slider.
2. 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 the headshot image is 800px (wide) by 800px (high).

With the file uploaded, return to the Post module and set the headshot image as the thumbnail for your post:

1. Click on the ‘Modules’ tab in Composer’s left navigation and select Posts.
2. Click on the ‘Boards’ tab.
3. Open the board containing the post you want to update and select the post.
4. Open the ‘Thumbnail & Resource’ panel within the Post interface and click on the ‘Browse’ button.
5. Select the image you have previously uploaded in the ‘Pick a Resource’ window.
6. Click on the ‘Update’ button at the bottom right of the Post interface.

Save and Publish the Post

The final step with all of the post content configured is to save and publish the post:

1. Click on the ‘Save’ button at the bottom right of the Post interface.
2. Click on ‘Yes’ in the ‘Publish Now’ window if the post is ready and you want to publish it immediately. Click on ‘No’ if you want to save the post as a draft and manually publish it at a later time.

Note: New profiles in the ‘Featured Profiles 3’ slideshow display in date order by default. You can optionally change this to display them in alphabetical order within the Post element settings. The order settings are located in the ‘Formatting’ section of the ‘Edit Post Element Settings’ window.

When adding a new Featured Profiles slideshow or updating its content, the page will have the ‘Compose’ toggle enabled, which means the Post element displaying the feature will show with a simplified appearance to make it easier to edit.

To preview how your updated Featured Profiles slideshow 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.