Featured Profiles

'Featured Profiles 1 (Gradient Overlay)' Best Practice Asset

'Featured Profiles 1' Overview

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.

Featured Profiles Design Treatments

When adding a new Posts Filtered Grid to your website, you can choose from one of the following three layout options:

Filters above the Posts Grid: All filters display above the Post Grid, with the category filter formatted as an accordion panel that can be opened on click.

Filters to the left of the Posts Grid: The category and tag filters display in a sidebar to the left of the Post Grid with the search filter at the top.

Filters to the right of the Posts Grid: The category and tag filters display in a sidebar to the right of the Post Grid with the search filter at the top.

Please refer to the instructions on how to ‘Add a New Filtered Posts Grid to a Page’ for full guidance on how to add the desired layout to a page.

Important: The Posts Filtered Grid is only compatible with the specific elements on show in these layouts. Please follow the instructions in this section closely when updating this Best Practice Asset to ensure the content displays correctly.

Image Sizes

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.

Image Best Practices

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.

Add a 'Featured Profiles 1' Grid to a Page

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:

Go to the ’Pages’ panel.
Select the branch containing the example page for this Best Practice Asset. This is normally the ‘Production’ or ‘BPA’ branch.
Select the ‘Featured Profiles 1’ page.
Hover over the Post element displaying the example Featured Profiles grid and click on the ‘Copy’ icon in the top-right corner.
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.
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.
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:

Hover over the Post element displaying the Featured Profiles grid and click on the ‘gear’ icon in the top-right corner.
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.
Click on ‘+ Content Filters’.
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.
Click on ‘+ Formatting’.
Optionally update the field specifying the number of posts to display in the grid.
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.

Add a New Featured Profile

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

Click on the ‘Modules’ tab in Composer’s left navigation and select ‘Posts’.
Click on the ‘Boards’ tab.
Select the board that has been set to display within the ‘Featured Profiles 1’ grid you want to update.
Click on the ‘Create Post’ button at the top right of the Board interface.
Click into the ‘Title’ field and type in the name of the community member.
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:

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

To assign an existing category:

Select the ‘Category & Tags’ panel.
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:

Click on Resources in Composer’s left navigation.
Click on the ‘Resources’ tab.
Create or select an existing folder for your image in the ‘Public’ directory.
Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
Choose from the upload options available to upload the new image.
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.
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:

Click on the ‘Modules’ tab in Composer’s left navigation and select Posts.
Click on the ‘Boards’ tab.
Open the board containing the post you want to update and select the post.
Open the ‘Thumbnail & Resource’ panel within the Post interface and click on the ‘Browse’ button.
Select the image you have previously uploaded in the ‘Pick a Resource’ window.
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:

Click on the ‘Save’ button at the bottom right of the Post interface.
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.

News and Events

Latest Events

In This Section