• Accessibility and Design of images
• Insert one image that is referred to by specific text content
• Insert many images
• Insert an image using the RTE

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

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

This method is commonly used when creating staff directory lists that include a small photo of each staff member floated to the left of their contact information and 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 necessary
4. Enter the text as normal
5. Scroll down to the Images section
6. Click the button
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
10. To shrink an image for display inline, but create 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. 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

1. Insert new content
2. Select the Images only content type
3. Position the content if necessary
4. In the Images section, click the button select images
5. In the TYPO3 Element Browser window, browse to the images you wish to include
6. Click the button to add the image but keep the window open to select additional images
7. Click the image to add it and close the element browser
8. Close the window when finished selecting images if it is still open
9. Select the Position for the images
10. Specify how many Columns of images should be displayed
    
11. Specify a Width (pixels) for the images
12. Check the Click-enlarge box if you want an image to be a link to the full-size image
13. To include a caption in the finished web page, enter the caption text in the Caption section
14. IMPORTANT: Describe the image carefully in text in the Alternative text section. 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
15. Save and close the content element

1. Click the button in the RTE toolbar
2. Browse to and select the image you wish to insert

Alternately, you can select the Drag'n'Drop tab to browse to an image and then drag it into the RTE area

Format an image using the RTE

1. Select an inserted image (single-click)
2. Click the button in the RTE toolbar
3. Specify properties as you prefer
   • Width and Height = the dimensions of the inserted image when it is in the finished page
   • Border = toggles a border on and off
   • Margin = 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
   • 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