Image Dimension and Display Information

Adding Images

Content authors can add images to content in several ways. In some places, the images added will display in a fixed location with pre-defined sizing and/or pre-defined dimension. In other places, you can choose from some display options.

When you add an image, you will be asked to enter information like alternative text. In addition, our system collects other information about the image; e.g. the author, the time and date of upload, file size, and usage details. This collection is called a Media item. You will see your own list of Media items under "Select Existing" when adding an image or under "My Media" when looking at the "My Content" page. 

File Size for accessibility

In addition to an image's height and width, its file size can also be reduced without losing quality. Reducing the file size can make it easier for people with slower internet connections load a page. An easy way to do this is using the online tool TinyPNG. Simply drag your image to the panda and it will downsize your file without changing is height or width.

Resizing and Cropping Images

When you upload an image, we store the original image and we automatically create additional versions of the image, depending on where the image is placed. This means that sometimes your image will be cropped in an awkward place. You may want to resize or crop your image yourself if you know that your original image has dimensions that differ from its display.

Windows

1. On your windows machine, locate an image that is either JPG, GIF, or PNG
2. Right-click the image → Open with → Photos
3. Click the Edit image icon (looks like a pencil or sliders) at the top
4. On Windows 10, crop is across the top and the rotate options are at the bottom.
5. Select Crop & rotate
6. Adjust the crop box as needed
7. Click Save a copy or Save

Macintosh

1. On your Mac, locate an image that is either JPG, GIF, or PNG
2. By default, the image should open in Preview. If it does not:
   Right-click the image → Open with → Preview.app
3. Click the Edit image icon (looks like a circle with a pencil tip facing up) at the top
4. Either click Tools → Adjust Size 
   -- or --
   Choose the Select tool (looks like a dotted square) at the top left, select an area, and click the crop button (looks like a diagonal piece of candy) at the end of the toolbar
5. Save a copy or Save

Remember to always follow the Style Guide; e.g. Do not put text in photos without proper Alt text. (Should we have a link? Should we integrate content?)

1. Don’t forget photo permissions. You can find release forms in Polaris: https://polaris.salemstate.edu/post/32/marketing-and-creative-services-howtos
2. Save a copy! If you have a great image that you’d like to use for the web, save a copy before you resize it. You may want the original size image for something else.
3. If you need to crop a photo, save the larger of the two dimensions (width or height) first. For example, if you have a 1200 x 800 image and you need it to be 1100 x 400 pixels, resize the image to 1100 pixels wide first. Then crop the photo to the appropriate height.
4. Keep ratios locked. This means that if you change the width of an image, the height of the image will change accordingly. Otherwise, you can get skewed/stretched images. In “Preview” on a Mac, this feature is the “Scale Proportionally” checkbox. In MS Paint, this feature is the “Maintain aspect ratio” checkbox.
5. It’s always better to size down than size up. By trying to make a small image larger, you lose resolution, which can result in a blurry or pixelated image. Most of the current website photos are too small to be transferred to the new site. Marketing may have some images on file that meet your needs.
6. Test your windows. You can resize your browser window to see how your page looks on a mobile device.
7. Naming conventions. Use a naming convention that allows you manage you media easily.
8. ALT Text. ADA compliance is required for published images. Add alternative text to an image that provides a clear description of what displays in the image. This text is read by assistive technology devices.
9. Caption image. Different from ALT text, caption is used to identify who or what is displayed in an image.

News, Events, and other content types on the WWW website have a variety of types of images with differing options.

News and Events

Featured Image | Listing Page Image | Content Images | Drumroll Images

Featured Image

The Featured Image displays on the News Item Detail pages and is the primary image when Featured. It will also display on the News Listing page if the Listing Page Image field is not used.

• Vertical / Portrait / Square will crop vertical images to a vertical aspect ratio. It will crop horizontal images to a square. 
  Width: 607px, height variable.

• Horizontal / Landscape will crop any image to a wide aspect ratio. 
  Width: 1080px, height variable.

Listing Page Image

This image displays on the News Listing Page only. If none is selected, the Featured Image will appear instead. 
Width: 334px, height 335px.

Content Images

Images added into the content have 3 different display settings. Additionally, the alignment can be set to Left, Center, Right, and None. 

• Inline - Square (400×400). Width: 400px, height 400px.
• Inline - Wide (600×400)
• Original size will offer no cropping or resizing but will not exceed the maximums of the page.

Drumroll Images (Supplemental images)

Images from Drumroll published items will appear below the content, squared to allow two per line.
Width: 334px, height 335px.

All other content

Carousel | Slideshow | Testimonial | The Latest | Feature - Full width | Feature - 2 columns | Feature - Two thirds | Feature - 3 columns | Video Feature | Impact | Numbers | Story Feature | Video Hero | Ambient Hero

Images uploaded should always be at least as large as the height and width specified.

Carousel

The image display set programmatically by theme. 

• Carousel (708×596)
  carousel > slide__carousel using carousel view mode

Slideshow

The image display set programmatically by theme.

• Gallery (854×640)

Testimonial

The image display set programmatically by theme.

• Testimonal (828×465)

The Latest

The "Content Block" paragraph allows for an image inclusion. The image display set programmatically by theme.

• The Latest - Content Block (372×372)

Feature - Full width

The image display set programmatically by theme.

• Original image, 759 width, variable height

Feature - 2 columns

The image display set programmatically by theme.

• Inline - Wide (600×400)

Feature - Two thirds

The image display set programmatically by theme.

• Feature - Two thirds (785×373)
• Feature - 3 column (372×372)

Feature - 3 columns

The image display set programmatically by theme.

• Feature - 3 column (372×372)

Video Feature

The image display set programmatically by theme.

• Video Feature (1120×662)

Impact

The image display set programmatically by theme.

• Featured Image: Impact Featured (830 × 520)
• Story Images: Impact Story (455×372)

Numbers

This complex content paragraph will display the background image scaled to fit it's display. Generally, width is 1.4 times the height.

Story Feature

The image display set programmatically by theme.

• Story (375×372)

Video Hero

The image will only appear if the video cannot be loaded. It will scale to fill the given space. 

Ambient Hero

The image display set programmatically by theme. Example: Home page.

• Ambient Hero (1200×450)
• Ambient Hero SM (500×310)

Grid (under development)

The image display set programmatically by theme.

• Grid Item Modal LG (560×527)
  • Grid Item LG (373×372)
  • Grid Item MD (320×319)
  • Grid Item SM (299×200)
  • Grid Item Modal LG (560×527)
  • Grid Item Modal MD (440×440)
  • Grid Item Modal SM (259×259)