Photo Component

Display an image on your page.

Accessibility Concerns

Images must have meaningful 'alt text.'  A caption can serve as alt text, unless the image is a link or has zoom enabled. > 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.

If you choose the Zoom feature, all zoomable images on the page can then be accessed in a 'zoom gallery.'

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

  • There are two ways to add an image:
    • From Digital Assets - Drag one from the Content Finder onto the component. In this case, the image will remain in Digital Assets, and is referenced from your page.
    • From your desktop - Click within the Component's empty Image tab and then upload from your computer. Your image will be stored directly with the Web page in this case.
  • 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.
  • If you change the image, you will be reminded to check the alt text.

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 and is always required if the image has a link or if the zoom feature is enabled, otherwise a caption can serve instead.
    • Blanks or a carriage return are not in compliance and will be blocked.
    • A period and space are now added at the end of any alt text that does not already end with punctuation. (This is not visible in the dialog box.) This increases the clarity with which a screen reader reads the page.
    • See webaim.org for tips on writing alt text.
    • If you change the image, you will be reminded to check the alt text for accuracy.
  • This image does not require alt text: If your image is purely decorative and does not aid in navigation (is a link, or has zoom enabled), you can optionally check this box instead of entering alt text. The image will be ignored by screen readers.
    • Checking this box nullifies any alt text that was already entered. The alt text is grayed out in the component within Author, and can be retrieved by unchecking the box, but is not included on the published page.
  • Caption: Type a brief, descriptive sentence for your photo. 
    • A caption can serve instead of alt text, unless the image is a link, or has zoom enabled.
    • Rich Text Editor allows customization. By default, the text will be in italics. Use the italics tool to change this.

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.
    • Adding a link makes alt text mandatory.
  • 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 a full-sized view when they click on it.
    • Check the box to activate the Image Zoom.
    • Note: the images on this page use the zoom feature.
    • Enabling zoom makes alt text mandatory.
  • 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.
    • It includes a Rich Text Editor that supports basic formatting (bold, italics and bullets) as well as hyperlinks.
     
    Photos marked 'Allow zoom' now create a gallery of all the zoomable photos on the page. When a visitor zooms in on any one photo, navigation is provided to view all zoomable images on the page . There is no setting to control this; it happens automatically when there is more then one zoomable photo on a page.

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.

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.

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

But beware using many large images (over 1 MB each) in a Photo Gallery. > Known Issue: Photo Galleries Do Not Load or Load Very Slowly

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 9, 2019