BPA - Featured Profiles

The ‘Featured Profiles 1’ Best Practice Asset displays a visually-engaging grid of interactive profiles for showcasing people in your school’s community (such as teachers, staff, students, parents and alumni). This is powered by a single Post element with an individual post for each profile.

Each profile in the grid displays as an image button with the person’s name and role in the foreground and a headshot image in the background. A dark gradient overlays the bottom of this image to make this text easier to read. When the visitor clicks on a profile, a popup displays showing a text-based biography or testimonial.

During the deployment phase for this Best Practice Asset, you will be asked to choose one of two possible design treatments to be configured on your website. Further information on these treatments can be found in the ‘Featured Profiles 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 the website, but must always be added to a full-width page layout without left or right banners.

During the deployment of this Best Practice Asset you will be asked to choose one of the following design treatments to be configured on your website:

• Uniform Grid: The featured profiles display in a grid based on rows. Each profile has a fixed height so that the grid takes on a uniform appearance.

• Masonry Grid: The featured profiles display in a grid based on columns. The height of each profile is based on the height of the headshot image uploaded to it with the profiles positioned to optimize the available vertical space, much like a mason fitting stones into a wall. 

The process for adding and maintaining the Featured Profiles grid is exactly the same for both design treatments, with the exception that different sizes are recommended for the headshot images.

The ‘Uniform Grid’ treatment is recommended for when all of your headshot images have the same height, whilst the ‘Masonry Grid’ treatment works well for headshot images that have been prepared in a variety of different sizes.

Important: Please note that once the buildout process for the Featured Profiles grid 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 the headshot images Featured Profiles grid based on your chosen design treatment. These will help you to achieve an ideal balance of visual quality and loading speed:

Image Area	Width (pixels)	Height (pixels)
Uniform grid headshot	800	1116
Masonry grid headshot	800	No min or max

There are two ways of preparing an image to match these sizes:

• 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 grid requires a headshot image. This displays in both the background of the profile image button and the popup that displays on click. 

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

• Keep the focal point within the top two thirds of the image. This safeguards against details being obscured by the foreground text in each profile.
• For the ‘Uniform Grid’ design treatment, prepare each image to the same height.
• 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 Grid to a page in your website. Please follow each set of steps in the order presented:

Copy a ‘Featured Profiles 1’ Example Layout

As part of the setup process for this Best Practice Asset, Finalsite has added an example of the ‘Featured Profiles 1’ grid 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 1’ page.
4. Hover over the Post element displaying the example Featured Profiles grid and click on the ‘Copy’ icon in the top-right corner.
5. Create or navigate to the page in the ‘Pages’ panel that you would like to add the new Featured Profiles grid to. 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 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 grid 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 Set of Posts Displaying in the Post Element 

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

1. Hover over the Post element displaying the Featured Profiles grid 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 grid 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.

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

Create a New Post with the Profile Name and Biography

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 1’ grid 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. 

Assign a Category to Display a Role Label

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 1116px (high) for the Uniform Grid design treatment and 800px (wide) with no minimum or maximum height for the Masonry Grid design treatment.

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 grid 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.