Text Over Photo Component

Enhance your home page with a visually bold header that can even become the primary (H1) heading. This component was developed to be used in a full-width 'hero' size but flexes to accommodate other settings. It combines rich text and imagery that is accessible and readily adjusts to small screen sizes. A variety of image and text styling features are supported, as well as borders, different alignments and other treatments. It can also host several Buttons to provide additional navigation.

Because this is intended for top-level placement, high quality imagery and language are needed that align with your strategic messaging and our UB brand, supported by regular evaluation and assessment.

1. Allowable image formats include JPG, GIF, PNG and PSD (PhotoShop) and others. Most images are recompressed in JPEG format for optimal page performance. GIF and PNG images are kept in those formats to retain their unique features (lossless compression, selective color palettes, transparency).
2. Images uploaded directly into components should be less than 6000 pixels in both height and width or they will not load and be flagged with a red 'X' in author. (This restriction does not apply to images uploaded into Assets.)
3. Alt text is required by state and federal accessibility laws, unless your image is purely decorative and does not aid in navigation, but is mandatory if the image is a link or has Zoom enabled.
   

The wrench 'Configure' icon provides access to add/clear the image and change settings in the four tabs: Layout, Text, Colors and Image (includes Alt text).

• Size - Choose from:
  • Full, auto (default)
    
  • Landscape
    
  • Portrait
  • Square
  • Hero *
    
  • Super Hero *

  * If you select Hero or Super Hero, and additional button option appears.

• Headline + Subheading Alignment - Choose from:
  • Top Left
  • Top Center
  • Top Right
  • Center Left
    
  • Center Center (default)
  • Center Right
  • Bottom Left
  • Bottom Center
  • Bottom Right
    
• Alignment Horizontal Padding - Adjust slider (20-80 px) to buffer both sides between the text and the image border.
  
• Alignment Vertical Padding - Adjust slider (10-80 px, default is 20) to buffer top and bottom between the text and the image border.
  
• Background Style - Choose from the following. (Not influenced by Horizontal or Vertical Padding.)
  
  • Full (default) - Background color covers the entire image, partially obscuring the image depending on the Opacity.
    
  • Text Banner - A full-width color bar just underlies the text headings, revealing the image normally everywhere else.
  • Text Block - A color bar just underlies the text headings (not full-width), revealing the image normally everywhere else.
  • No Background Color - The text floats over the image, without additional masking.
    
• Text Block Border - Choose from the following. This setting is only applied if you choose the Text Block Background Style.
  • No Border (default)
    
  • Dotted
  • Dashed
  • Solid Thin
    
  • Solid Medium
  • Solid Thick
• Number of buttons - Only available for the Hero or Superhero sizes.
  • Choose from 1-4 -- default is blank (0).
  • This feature will add up to four buttons in the text area below any Headline and Subheading.
  • Edit the buttons separately as regular components. For accessible contrast, they are limited to green text on a white background, or white text on a green background.
    

• Headline - Enter your main heading. Limited styling is provided (bold, italics) and part or all of the text can be hyperlinked. Be concise in case it needs to wrap.
  
  • Heading level - Choose from levels 1-4. For accessibility, your selection should be integrated into the page's heading hierarchy.
    
    • If you choose H1, remember to adjust the page so you do not have two H1's.
      
  • Font - Choose from Serif (More) or Sans-serif (Sofia).
  • Headline size - Adjust the slider to enlarge-reduce the font size relative to the overall image size. 
  • Shadow - Choose between No Shadow (default) and Shadow for a drop shadow effect.
• Subheading - Enter an optional secondary heading. Limited styling is provided (bold, italics) and part or all of the text can be hyperlinked. 
  • Font - Choose from Serif (More) or Sans-serif (Sofia).
  • Subheading size - Adjust the slider to enlarge-reduce the text relative to the overall image size. 
  • Shadow - Choose between No Shadow (default) and Shadow for a drop shadow effect.

• Background Color - Choose from the listed UB-branded colors (e.g. light blue, white, dark gray).
• Background Opacity - Increase-reduce the opacity of the background color relative to the text color. The range adjusts to maintain an accessible contrast of the text relative to the image.
• Headline Color - Choose from the listed UB-branded colors which will vary depending on the Background Color to maintain an accessible contrast.
• Subheading Color - Choose from the listed UB-branded colors which will vary depending on the Background Color to maintain an accessible contrast.

• Choose an image:
  • From Assets - Drag one from the Asset Browser onto the component. In this case, the source image remains in Assets and is just referenced from your page.
    
  • From your desktop - Click within the empty Image tab and then follow the process to upload an image from your computer. Your image will be stored directly with the page.
    
  • 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.
  • If you change the image, you will be reminded to check the Alt text.

• Alt text
  • Add a description of the image for users who may have difficulty seeing it.
    
• Get Alt text from Assets
  • This option becomes available when an image is referenced from Assets and is on by default.
    
  • When checked, the image's Alt text is populated with information from the original image in Assets (in its Properties), as follows:
    
    • The Alt Text value will be used first.
      
    • If there is no Alt text, the Description will be used.
      
    • If there is no Alt text or Description, the Title will be used.
      
    • If all three are blank, the Alt text field in the component's settings will be blank, and this tool is disabled. Since text is required, you will need to either provide suitable Alt text in Assets, or deselect 'Get text from Assets' and provide the Alt text locally in the component.
      
  • Be careful that suitable Alt text is available. To easily set or adjust that value, once the image is added, click 'Go to Original' to go right to that image in Assets.
  • Please note, this is a live reference so any change in Assets will influence your page as well.
    
• This image does not require Alt text
  • Use this option for purely decorative images that do not aid in navigation (is a link, or has zoom enabled).