Photo Component (and Alt Text)

This component is the primary way to display photos and other images on your webpages so this is one of the more common UBCMS components.

Images displayed on your UBCMS pages can be added from two different places. The image may be on your desktop, because you took the picture, or someone sent it to you. Or the image may be in your sites digital Assets area. In that case you would drag the image from the Asset Browser.  

Alt Text: Before we begin, we must discuss a critical legal consideration. For your webpages to be accessible, as required by state and federal policy, images must accommodate users who have visual disabilities and are using screen reader software. Adding Alt Text, or 'alternative text' provides a short description that will let them know what they cannot see, so they receive an equivalent experience to your sighted visitors, and so they know they have not missed any critical but hidden information.

Alt text should be accurate, and succinct but equivalent to what is displayed in the image. The screen reader will already verbalize "image of…" so your text can simply provide a short additional comment.

2. Open the Sites Console and navigate to your site; e.g. Sites + Self-Paced Training + {your site}.

3. Choose any page on your site or create a new page.

4. Select that page and click Open in the Commands Menu that now appears.

5. To add a component...

• Click the Toggle Side Panel button in the upper left of the window.
• Switch to the Component Browser.
• Components are listed alphabetically. Or type part of its title and click Enter.
• Find your desired component and drag it onto the page.

6. Select the component but before you click anything, notice there is a pencil icon, and a wrench icon. You'll use the pencil icon to adjust an image once one has been added -- this is called ‘edit in place’ -- but to add a new image, or to swap out an existing one, you will use the wrench icon, to configure the component.

7. Click the wrench icon and in the main Image tab, look for the words ‘Drop an asset here or browse for a file to upload.’  If the image was stored centrally in your site’s digital Assets area, you would drag it onto the component from the Content Browser. (Assets is covered in more detail in another tutorial.) But in this exercise, use an image from your local computer.

8. Click 'browse'.

1. A dialog box will open, displaying your local computer.
   
2. Navigate to the desired image, select it, and click ‘Open’. 
   
3. You will get an “Info” pop-up warning about Alt Text – just click the X to make it go away. 
   
4. Depending on its size, it may take a few seconds then a thumbnail of your image will appear in the middle of the component. It is now be uploaded from your computer and embedded into the page.

9. You must now provide Alt Text -- you cannot save your work without satisfying this requirement.

• Enter something appropriate.
  

10. You can also add a caption.

• Click the Caption tab and enter something appropriate.
• The Caption supports additional formatting using the toolbar across the top, called a Rich Text Editor. Some basic word processing features are supported, such as bold, italics, underlining, bullets, and hyperlinks. There is also a very simple spell checker, but generally you will just provide a short description and possibly credit the photographer.

11. Click the checkmark icon when you are done. (The 'X' cancels your changes.)

Now try some of the other common settings: size, float, and flexible height.

1. Select the component and click the wrench icon.
   
2. The available sizes are in the Image Properties tab.
   
3. Notice the default is ‘Full Size’. Change that to ‘Medium Landscape’. The numbers listed are the final width and height in pixels, so this image will be displayed 219 pixels wide and 128 pixels high regardless of its original proportions.
   
4. Click the checkmark icon.
5. The image is much smaller.

Float -- Succeeding text can be wrapped beside the image.  

1. Select the component and click the wrench icon.
   
2. Return to the Image Properties tab, then enter Advanced. 
   
3. Under Float, choose Left and click.
4. Click the checkmark icon.
5. The image is now on the left of the page and any component(s) that follow wrap around it to the right.

Flexible Height -- By default the UBCMS displays images using a fixed ratio (those pixels). Images are scaled into the prescribed space, and the UBCMS crops anything that does not fit. So a panorama will have its wings cropped, while a portrait will often lose the top of the subject's head. Images can be cropped beforehand, but there is a built-in way to regain control.

1. Select the component and click the wrench icon.
   
2. Return to the Image Properties tab, then enter Advanced. 
   
3. Select Flexible Height, which instructs the UBCMS to use the width that you selected while letting the height ‘flex’ to keep its original proportions.
   
4. Click the checkmark icon.
5. Depending on the proportions of your image, the width will still be Medium Landscape (219 pixels), but the height will be shorter or taller depending on whether you chose a wide image or a portrait.

• Photo Component
• Advanced Topics: Accessibility (Image Alt Text)
• Selecting Strong Visuals for Your Site