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 2011 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 width

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

 

Image sizes in the NDSU 2018 template are harder to define concretely because the page width automatically reduces on smaller screens/windows and can be sectioned using fluid grids and containers. In any case, the maximum width of content on the largest size screen is 1156px wide.

Insert one image/media positioned relative to a block of text

This is commonly used when creating staff directory lists (see the staff directory list example) that include a small photo of each staff member set 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 & Images or Text & Media content type for wrapping regular text with images or media, respectively
  3. Position the content in the page, if prompted
  4. Enter the Text as normal (optional)
  5. Select the Images tab
  6. In the Images section, click the Add image or Add media button to select an image or media, respectively
  7. In the File selector window, browse to and select the image
  8. The image is now referenced by the content element and can be customized by setting values in the Image Metadata section
    1. Optionally set a Title for the media by checking Set element specific value and enter the title
    2. Optionally set a Link that will be activated when the image is clicked
    3. If a Link is set, it is important that you set Alternative Text by checking Set element specific value and provide a meaningful alternative representation of the image. The alternative text is used by site visitors using assistive technologies or text-only browsers. It should include all meaning that is conveyed by the image. It should not duplicate the caption or other adjacent text in the page
    4. Optionally set a Description (Caption) for the media by checking Set element specific value and entering the caption text that should display in the page adjacent to the media
  9. Optionally specify the maximum Width of each element (px) for the media.
    If this is set to a dimension larger than the width of the media, or if the value of Width of each element (px) * Number of Columns exceeds the maximum image width allowed in the page, the effective Width will be automatically downsized in the displayed page
  10. Optionally specify the Height of each element (px) for the media.
    If this is set to a dimension larger than the height of the media, or if the Width of each element (px) specified conflicts with this value so that the image would be stretched/squished out of aspect, this value is automatically downsized or ignored in the displayed page. For best results, specify only the Width OR the Height
  11. Select a Position and Alignment for the image using the selection menu or by clicking one of the position buttons.
    Note that this value is ignored for many of the alignment options in the NDSU 2018 template
  12. If more than one Image or Media is inserted, set the Number of Columns to configure how many images or media are displayed on each "row" before overflowing to a new row
  13. To display a thumbnail with a "click to enlarge" link displaying the full size image, enable the Click-enlarge toggle. Not all templates implement click-enlarge, so it might not do anything even when enabled
  14. Save and publish as usual

    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:

    Image link

    1. Insert a new Images Only or Text & Images content element
    2. Select the Images tab
    3. Click Add Image to add the image
    4. If the Alternative Text field is empty, it is important to set a meaningful value so that this link is available to visitors using assistive technology. If the image contains text, the most common alternative text is enter the exact same text the image visually displays
    5. In the Link field paste the address the image should link to
    6. Set a position for the image link, if desired
    7. Save and publish as usual

    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
    Top of page