Build a directory of personnel or department information.
Last reviewed: November 11, 2022
This component has two tabs: Information and Image.
It will display the contact and departmental information for one individual. To create a list of personnel, use a series of these components. The component can also be placed in the right sidebar.
Click the wrench icon to 'configure' these settings.
Name: Provide the person's full name, in normal order; e.g. 'Jane Doe.' To include their degrees, use standard abbreviations (e.g. PhD) and separate with commas. (This information will be displayed in bold text, and linked if a URL is provided.)
Link - Add the corresponding URL or use the magnifying glass to browse for a target page within the UBCMS.
Name: Provide the person's full name, in normal order; e.g. 'Jane Doe.' To include their degrees, use standard abbreviations (e.g. PhD) and separate with commas. (This information will be displayed in bold text, and linked if a URL is provided.)
Link - Add the corresponding URL or use the magnifying glass to browse for a target page within the UBCMS.
Most 'link to' and hyperlink settings in UBCMS components have an optional companion setting that specifies where the linked page will load. Sometimes this is a 'Target' dropdown and for other components it is a simple 'Open in new window' checkbox.
'Target' supports several settings:
'Open in new window' means to open in a new tab of the current browser.
When 'open in new tab' or 'window' is selected, an additional icon will follow the linked text on your published page, to alert visitors they are about to be taken to a new browser tab, and possibly leave the current website.
Note: For accessibility reasons, be careful about sending your visitor to a new tab. This behavior may be unexpected and disortienting. (> Learn more about link accessibility.)
Hide photo: Select to over-ride displaying the associated image.
Title: Provide their formal title(s); e.g.'Resource Manager' or 'Director of Archaeological Survey; Adjunct Professor.' (This information will be displayed in italics.)
Department: Provide their department's formal name, if desired. (Your main unit name is implied by the branding on your website and is probably not needed.)
Address: Provide their personal office location, if desired. A complete mailing address, including zip code, is preferred.
Phone: Please use a consistent standard format, including the area code; e.g. '716-645-1234.' Multiple numbers are possible; use a semi-colon to separate them. (This information will be prefixed with Phone: .)
Fax: Please use a consistent standard format, including the area code; e.g. '716-645-1234.' (This information will be prefixed with Fax: , and start on the same line as the phone number.)
Email: Provide ONE email address. It will become a 'mailto:' link when published. (This information will be prefixed with Email: .)
Alt text: Add a description of the image for users who may have difficulty seeing it. Do not include 'Picture of'. (Alt text is required by New York State policy for most images. See webaim.org for tips on writing alt text.)
Optionally provide a personal portrait.
It's recommended that you include photos for every entry or have none, not a mix of both. If a small number do not include photos, you may wish to include a dummy image or silhouette.
For a consistent, professional appearance, we also recommend all of the portraits have a similar style; e.g. full color, similar lighting, facing forward, neutral background, showing head and shoulders only.
The image allows for use of the Adaptive Crop tool.
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.
Alternative text ('alt text') is a short, written description that describes the appearance, content and/or function of an image on a webpage. Adding alt text is a best practice for all your UBCMS images and is required for accessibility so users will understand what they are not seeing.
Alt text is required in these contexts:
* When the image is a link, starts an animation or video, or is a navigational element, alt text should indicate its function, not the image's content (i.e., "watch video ABC" and not "screenshot from video ABC"). Screen readers will treat this image as a standard link.
Purely decorative images (those that do not convey content or have a function on the page as listed above) can instead be set as "This image does not require Alt text" in some components. If the component does not have that setting, you will still need to supply Alt text.
Alt text should be added to images in Assets. This is required for images that are then used in the Photo Gallery component, while it can also be used as an alternate source for Alt text in some components (e.g. the Photo setting 'Get Alt text from Assets').
Best practice:
Text Over Photo provides an accessible alternative to using images that have embedded text.
> Learn more about the Text Over Photo component.
Link text should describe where the link will take the user in a manner that is appropriate to the context on your page and also the target page. This is also true for images that act as links.
Best practice: Avoid meaningless standalone phrases like "click here", "see all" and "learn more".
Links in many components can be set to open in a new browser window (or tab). The user can thus explore the new page, while preserving the source page (and your website) in the original tab. However, this can be confusing if the user does not realize a new tab has opened. They may become lost, confused how they arrived on that new page and unable to return to your site.
Best practice: let the user control their experience and stay in the same tab, with two notable exceptions: