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

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.

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.

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

To insert images into a page, several strategies may be employed.

• Insert an image using the RTE
• Insert many images in a "table" or gallery appearance
  
• Insert one image positioned relative to a block of text

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    button to select images
6. In the TYPO3 Element Browser window, browse to the images you want to include
7. Click the 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:

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  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  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.

1. Select an inserted image (single-click)
2. Click the  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 Height- the 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 - 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