Content | Navigation |

Accessibility and Design of images

Keep in mind the important aspects of Web accessibility when using images in Web pages.

Image sizes

To work within the NDSU template, you should make images no larger than the following maximum image sizes when inserting an image into a page.

Although you might not see the overlap in your browser (perhaps you have a large monitor) other visitors may have an unpleasant/unexpected experience if you do not adhere to these guidelines.

Page regionMaximum widthExample

Main body content area (NORMAL column)

700 pixels or
690 pixels if imgborder style or border checked

Main body content area (NORMAL column) with BORDER column content
OR
Main body content area adjacent to  Callout frame

460 pixels or
450 pixels if imgborder style or border checked

BORDER column

220 pixels if using "image" content element type and no padding (fills the column without any white space) or
210 pixels if border checked

How to make the image fill the exact width of the column

Column frame (main body area in Frame 2)

336 pixels or
326 pixels if imgborder style

Callout frame (main body area in Frame 1)

230 pixels or
220 pixels if imgborder style

Insert an image in the rich text editor

Using the rich text editor that you may be familiar with in CMS, you can insert images and even size or position them within the text.

  1. Click the Insert/modify image button in the RTE toolbar
  2. By default, the Magic Image type is selected. See below for image type details and choose a different tab from the Insert/Modify Image window if appropriate
  3. Browse to and select the image you wish to insert
  4. Click the image
  5. Click the Insert/modify image button in the RTE toolbar again
  6. Enter appropriate alternative text in the Alternate text: field
  7. Click the Update button

three image types in the rich text editor

  1. New Magic Image

    "In 'Magic' mode you can select any kind of image with any dimensions. The image is automatically converted to a web image format and any adjustments you make to the size of the image is post processed in order to optimize size and quality."

    This makes it easy for you to insert images that might not have been prepared for use on the Web. CMS automatically optimizes the image for you.

  2. New Plain Image

    "In 'Plain' mode you can insert only web image formats (jpg,jpeg,gif,png) up to 640x680 pixels. This method is designed for images which are optimized for web already."

    This choice is ideal if you have already optimized the image before uploading it to CMS.

  3. Drag'n'Drop

    "Find and click on your image then drag it into the editor in the main window!"

    This selection is like New Plain Image, except instead of the image inserting at the cursor location, you can drag the image into the editor to your chosen location.

Format an image using the RTE

  1. Select an inserted image (single-click)
  2. Click the Modify image button in the RTE toolbar
  3. Specify properties as you prefer (the original image for upcoming examples is - . Hover your mouse cursor over each image to see a detail about it)
    • Style - canned styles for the inserted image (varies by template)

    • Width and Heightthe dimensions of the inserted image when it is in the finished page.If the height field is left blank, the height will be automatically set when the content element is saved so the image maintains its original aspect ratio.

    The Width and Height can only be manipulated if you have inserted a Magic Image. Other types are restricted to being the original image size.

    • Border - toggles a border on and off
    • Padding - the spacing that should be used between the image and text, in pixels
    • Float - positions the image on the page
      • Non-floating - text does not wrap around the image, the image is positioned like a character
      • Float right/left - text wraps around the image positioned on the right/left
    • Title - text that "pops up" if a mouse cursor hovers over the image
    • Alternate text - This chick needs alternate text text that is used for accessability and in the event the image becomes unavailable to tell the reader what the image represents
  4. Click the Update button

Insert many images in a "table" or gallery appearance

An example of images only content follows.

  1. Insert new content
  2. Select the Images only content type
  3. Position the content if prompted
  4. Select the Images tab
  5. In the Images section, click the Browse for files   button to select images
  6. In the TYPO3 Element Browser window, browse to the images you want to include
  7. Click the Add to list... button to add an image but keep the window open to select additional images, repeating until the last image you plan to include
  8. Click an image to add it and close the element browser
  9. Close the window when finished selecting images if it is still open
  10. Select the Position for the images
  11. Specify how many Columns of images should be displayed
  12. Specify a Width (pixels) for the images
  13. Check the Click-enlarge box if you want an image to be a link to the full-size image
  14. To include a caption in the finished web page, enter the caption text in the Caption section, putting each image's caption on a new line
  15. IMPORTANT: Describe the image carefully in text in the Alternative text section if the image communicates any information.  This content will be used by site visitors using assistive technologies or text-only browsers
    • The description should say, in words, the function of the image, which might be the text the image displays to sighted visitors or be blank if the image is for decorative purposes only
  16. Save and close the content element

An example of an images only content element:

Vet sciences
Art
Arch.
Mech. engr. lab
Spanish
History
Arch. studio
Arch.
CE survey
Accounting

Insert one image positioned relative to a block of text

This method is commonly used when creating staff directory lists (see the staff directory list example) that include a small photo of each staff member floated to the left of their contact information or bio.  It facilitates entering a small to medium sized photo that is taller than the number of lines of information text while keeping a clean layout.

  1. Insert new content
  2. Select the Text with image content type
  3. Position the content if prompted
  4. Enter the text as normal
  5. Select the Images tab
  6. In the Images section, click the Browse for files  button to select an image
  7. In the TYPO3 Element Browser window, select the image
  8. Select a Position for the image using the pull-down menu or by clicking one of the position buttons
  9. If you wish to change the size of the image, specify a width in the Width (pixels) section. If you omit the Height, it will automatically size the image to the width, keeping the aspect ratio the same as the original image
  10. To display a thumbnail with a "click to enlarge" link, check the Click-enlarge box
  11. To include a caption in the finished web page, enter the caption text in the Caption section
  12. IMPORTANT: Describe the image carefully in text in the Alternative text section if the image communicates any information.  This content will be used by site visitors using assistive technologies or text-only browsers
    • The description should say, in words, the purpose of the image, which might be the text the image displays to sighted visitors or be blank if the image is for decorative purposes only
  13. Save and close the content element

Student Focused. Land Grant. Research University.

Follow NDSU
  • Facebook
  • Twitter
  • RSS
  • Google Maps

North Dakota State University
IT Help Desk: +1 (701) 231-8685
Physical address: IACC 206, 1320 Albrecht Blvd., Fargo, ND 58102
Mailing address: NDSU Dept. 4530 / PO Box 6050 / Fargo, ND 58108-6050
Page manager: Content Management System

Last Updated: Thursday, November 20, 2014 12:53:55 PM