University at Buffalo - The State University of New York
Skip to Content
UB Web Management

Transforming UB’s digital communications through process and tools

Photo Component

Display an image on your page.

New Brand Features

In the new brand, authors can adjust text in a Caption so it is now longer italicized.  
read more about the digital brand transition
> read more about changes to this component 

Accessibility Concerns

State and federal rules require most images to be ADA compliant, with meaningful 'alt text.'  > read more on accessible images

Using This Component

Add the component to the page. There are four tabs of options for the Photo component: Image, Caption and Alt Tags, Image Properties, and Zoom.

The Photo component in its default state. In author, this includes a warning about 'alt text.'

The Photo component in its default state. In author, this includes a warning about 'alt text.'

Image Tab

  • Add an image by dragging one from the Content Finder 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.

Only JPG, GIF and PNG formats are allowed. JPGs are recommended for best results and faster load times.

The Photo component opened for editing.

The Photo component opened for editing.

The Photo component with the Image tab opened for editing. An image has been loaded and is partially cropped.

Caption and Alt Tags Tab

  • Alt text: Add a description of the image for users who may have difficulty seeing it.
    • Alt text is required by New York State policy for most images.
    • Blanks or a carriage return are not in compliance and will be blocked.
    • See webaim.org for tips on writing alt text.
  • This image does not require alt text: If your image is purely decorative and does not aid in navigation, you may check this box instead of entering alt text.
  • Caption: Type a brief, descriptive sentence for your photo. 
    • Rich Text Editor allows customization, however the text will be in italics and this cannot be changed.

Alt Text is generally required under state and federal accessibility laws.  Read more about Alternative Text.

Tip: If you need a long caption or more formatting such as line breaks or font styles, consider using a separate Caption Component.

The Photo component with the Caption and Alt Tags tab exposed for editing.

The Photo component with the Caption and Alt Tags tab exposed for editing.

Image Properties Tab

  • Link to: Type a URL and your image will link to it. Using your image as a link will override the Zoom function.
  • Image size: Use this drop-down menu to force the CMS to use your preferred display size.
Image Size Options
Full Size (default)
takes up full column width
Small Landscape 140 pixels wide x 88 pixels tall
Medium Landscape 219 pixels wide x 128 pixels tall
Large Landscape 300 pixels wide x 175 pixels tall
Icon 16 pixels wide x 16 pixels tall
Thumbnail 32 pixels wide x 32 pixels tall
Small Square 60 pixels wide x 60 pixels tall
Medium Square 140 pixels wide x 140 pixels tall
Large Square 219 pixels wide x 219 pixels tall
Small Portrait 60 pixels wide x 88 pixels tall
Medium Portrait 140 pixels wide x 180 pixels tall
Large Portrait 220 pixels wide x 283 pixels tall
Featured for use in special cases
(see Advanced Use below)
  • Flexible Height: Check the box to enable this option, which maintains the image's original proportions as it is fitted to the image width selected.
  • Float: A floating image causes text and titles to flow around it to the left or right. Use this drop-down menu to select No Float (default), Left, Right.
  • Border: Specify whether you would like to show or hide a border around your image. If you select Show border a thin gray line will frame your image. The border is hidden by default.
The Photo component with the Image Properties tab exposed for editing.

Zoom Tab

  • Allow zoom: Image zoom allows visitors to view an enlarged version of an image when they click on the image. Check the box to activate the Image Zoom. (Note: the images on this page use the zoom feature.)
  • Caption for zoomed photo:  Type a caption that will show as 'mouseover text' and also displays beneath the image once it is enlarged. (There is no default text, so if left blank, no caption will be displayed.)

Tip: Zooming is incompatible with making the image a link. Using a link (on the Advanced tab) will override zooming.

The Photo component with the Zoom tab exposed for editing.

Advanced: Featured Sizes

This option only applies to some page layouts, such as the Narrow with Photo and Left Navigation with Photo home page templates.

In those layouts, this option allows the photo to expand beyond the column boundaries into the margins (left, right and top) to go 'full bleed'. (Compare to this page.)

In layouts where Featured Size does not apply (most pages), it is treated the same as Full Size.

New Brand Features

At a Glance
Captions can now be de-italicized.

Overview

In the new brand, captions are still italicized by default. However, authors can now remove that style.

Select the text and click the "I" tool. This will now REMOVE the italics from that part of your caption.

Restrictions

  1. Image formats are limited to JPG, GIF, and PNG. (JPGs are recommended for best results and faster load times.)
  2. Alt Text is required by state and federal accessibility laws, unless your image is purely decorative and does not aid in navigation. Whitespace (blanks or a carriage return) are not acceptable under ADA guidelines.
  3. Captions by default are in italics. This cannot be changed.

Further Reference

Was this page helpful?

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

On this page:

See an Example:

Be Careful When Repositioning a Photo

Always grab the green border to drag a Photo to a new place on the page.  Dragging by the image itself will either just not work, or in some browsers, will create a duplicate image!
 
> read more about this Known Issue

Image Sizes

We recommend at least 800px x 536px for landscape or 536px x 800px for portraits (aspect ratio 1.5:1). Larger images are encouraged up a maximum of 2500px.

Master Class Resources:

Related Videos:

How to Crop

Video courtesy of School of Public Health and Health Professions

Skillful use of visual elements such as photography and video will lift your content to an entirely new and engaging level, one that words can’t achieve alone.

Related Components:

Last Reviewed:

October 13, 2017