University at Buffalo (UB)
Transforming UB’s digital communications.
Faces and Voices Template
Build a shared content module or page that tells a story about your constituents.
On this page:
Last reviewed: April 20, 2022
Preferred Use
Create a sharable page and highlight for your Faces and Voices content.
This template starts you off with a quote, photo sizes, and text styles that will help you leverage your faculty, alumni, and student testimonials.
Smart quotes can be added automatically to your quotation in the 'Quote / Description' settings.
Important Notice for Shared Content Templates
In order for any piece of shared content to function properly, there should not be any blank elements or incomplete links in the page (i.e., a photo component without a photo in it or an incorrect link).
Best Practice
When used for the Faces and Voices Hero Component, your image will be displayed as a circle with a 1:1 ratio. We recommend 600 x 600 pixels as a minimum size.
Settings
Identification - Enter details about the person quoted.
Quote / Description - Enter the actual quotation here.
- Smart quotes will automatically be added if that feature is selected.
- Regular quotation marks will be converted automatically to smart quotes, but if you include regular quotation marks and also select the Smart Quote setting, the quotation marks will be doubled!
Image (standard Photo component)
Text - Add additional information here if desired.
Tags - Add tags here.
Adaptive Crop
The image allows for use of the Adaptive Crop tool.
- Adapative Crop is applied to your original image after any Image Size changes.
- These modifications override any changes previously made with the main Crop tool. You will be asked 'Would you like to override the native crop and use the adaptive crop?' Click Override to get started.
- Flexible Height is applied to your desktop image after Adaptive Crop adjustments and has no impact on mobile or teaser images.
Adaptive Crop settings in a Photo component.
The tool approximates how your original image will be cropped for desktop, mobile and teaser (thumbnail) views, allowing adjustments to better represent your desired focus in these contexts.
The interface responds to the main Image Size setting. Set the Image Size, then drag the Adaptive Crop cross-hairs to the center of your desired focus, and adjust the three sliders as desired to highlight the three zones.
The interface approximates the final displays. After you make your adjustments, we suggest you preview the results (e.g. using the mobile device emulator). And if you realize the List thumbnail is not working out as desired, consider also loading an image into page Properties that is cropped exactly as desired, where it will be used preferentially for teasers.