Images

Uploading your images to the Digital Assets Manager (DAM) is very important, and following the steps below and paying close attention to the notes will ensure that your image is optimized for best web viewing and accessibility by all users.

NOTE: Your page width is 625 pixels, so images should never be wider than 625px UNLESS they are to be used for your homepage feature (carousel, tabs, hero image).

To access the DAM, click the Adobe Experience Manager logo at the top of the Site Admin.

Select Assets -> Files -> Your DAM folder

• JPEG
• PNG
• GIF
• TIFF
• Want to know if you can add other types? Contact the CMS Team

• Homepage feature:
  • Dept A Carousel: 930 x 450
  • Dept A Hero and Tabs: 930 x 300 px
  • Dept B: 940 x 450 px
  • Dept C: 2000 x 425 px
    • NOTE: The edges are lost depending on the browser window size. So I really recommend that the focus be in the center 940 px, knowing that 530 px on each side may be lost
• Text-wrapping: We recommend 200x200 px, so the image makes an impact, but does not overwhelm content
• All other images: 625 is the max width of the content area on each page (excluding the full-width area at the bottom of home pages – that is 940px). So we recommend images be no wider than about700px
• When not text wrapping, we recommend images always be centered (so in mobile, they always look nice)
• We also recommend using the image in the size it is meant for. So if you load a 700px wide image, don’t use it in the 200x200 dimension (resizing in the component to achieve this leaves a pixelated version)
• Hero images at the top of pages makes an impact and has a nice, consistent look. See ou.edu/union’s child pages. Those are 625x225px.

Name is part of the URL, so just like pages, file names should always be lower case with hyphens between words. Spaces in web will read as %20, so for example:

GOOD: cms-training-sample-document.pdf
BAD: CMS Training Sample Document.pdf (would read in the URL bar as CMS%20Training%20Sample%20Document.pdf)

How to Upload an Image

1. Upload image
2. Publish image
3. Add OU Image, Text Image, Feature Tabs, Webcomm Carousel on your page
4. REMEMBER: Accessibility is important, so when the component gives you the opportunity to add Alt Text, DO IT.

Alt Text DO's:

1. Title should be proper case
2. It should describe the image
3. If people are present, name the people, or if it is a group, what group is it or what are they doing (ex: President Abby Apple; ex: volunteers at The Big Event; ex used here: Molly Koontz, CMS Mascot)
4. If you can use your department name or the University of Oklahoma, this will optimize your image for Google Image Search results (ex: Students enjoy picnic for the OU College of Engineering; ex: Career Fair at the University of Oklahoma)
5. If there is text in the image (not recommended), ALL text in the image MUST be in the Alt Text

Title DON'Ts:

1. DO NOT use a list of tags/keywords (ex: President Apple, Abby Apple, OU, University of Oklahoma)
2. DO NOT upload an event flyer and simply use a Title of Event Flyer (ex: an image with CMS training opportunities, location, contact information with a Title of 'CMS Flyer') – this is a HUGE accessibility issue
3. DO NOT FORGET TO ADD ALT TEXT

Use Your Image