Directory Entry Component

Build a directory of personnel or department information.

On this page:

Last reviewed: November 11, 2022

Accessibility
  • Images require Alt text.
  • Link text should be meaningful.
  • Use 'Open in New Window' sparingly.

> Read more about making this component accessible.

Using This Component

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.

Technical Restrictions

  1. Directory Entry components must be individually created. They can link to a URL (for personal websites) residing within or outside of the UBCMS.
  2. Images should have a maximum file size of 1MB. 
  3. Image formats are limited to JPG, GIF, and PNG. (JPGs are recommended for best results and faster load times.)
  4. If a portrait is included, Alt Text is required by New York State policy.

Configure - Main Settings

Click the wrench icon to 'configure' these settings.

Information Tab

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.

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

Image Tab

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.  

  • Add an image by dragging one from the Assets Browser onto the component.
  • Another way to add an image is to click within the empty Image tab and then upload an image from your computer. (Your image will not be stored in the Digital Assets Manager if you choose this method.)
  • After adding your photo, crop and/or rotate your image by using the buttons that appear toward the bottom of the dialogue box.
  • If you already have an image in the Image tab but want to replace it with a different one, click the Clear button adjacent to the crop/rotate tools.
  • Verify that the image is large enough for the space on the page you are filling; if an image is too small it will be stretched and thus appear pixelated or blurry on the page.
  • While basic image crop and rotation tools are available within the component, for best results use an external image editor such as Adobe Photoshop prior to upload.

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.

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.

Accessibility Concerns

See an Example

Was This Information Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)
(Required)