Adding and Editing Images
Inserting an image
To add an image to a page, click Choose File under IMAGES to browse for the image file. Click Upload.
You must include Alternate text. This is for people who use screen readers because they have difficulty reading.
Under Style, select the size you want the image. Avoid full_width_960px unless you know you are working on a truly full-width page, with no sidebars.
- Full Width: 720px wide (for pages with 1 sidebar, which is usually the left menu)
- Full Width: 960px wide (for pages with no sidebars)
- Large: 500px wide
- Medium: 348px wide
- Thumbnail: 180px wide
Click Insert. This will insert the image in the Body field wherever your cursor is.
You can access the Image Properties window for more option by selecting the image and clicking the image icon in the WYSIWYG editor. You can also double-click the image.
- You can edit the alternative text if you need to change it.
- Width and Height: this is measured in pixels or percent. If you click on the lock symbol you can lock/unlock the aspect ratio (locking the aspect ratio prevents the image from becoming distorted). This is not the ideal way to change the final size of your image on the page. The page will still load the original image at its original resolution then force it to "look" smaller. It will take longer to load (think phones and data plans!) and it will not look as good (the browser will do 'quick and dirty' resizing in the interest of speed over quality).
- Link: allows you to make the image a link to a different URL
- Alignment: use the CSS class 'image-float-left' and 'image-float-right' instead of this (instructions below). Although Alignment does work (moves the image to the left or right and wraps text around it) it does not provide any spacing between the image and the text, which is why you should use the CSS class instead.
Styles and CSS
In the Advanced tab of the Image Properties window you can enter an existing class or even add in-line styling. You'll notice that the width and height from the main tab are defined here (automatically).
Currently there are preset classes you can use. Enter them into the Stylesheet Classes field. If you are using more than one separate them with a space:
- image-float-left (text wraps to the right of the image). Use this instead of the Alignment dropdown.
- image-float-right (text wraps to the left of the image). Use this instead of the Alignment dropdown.
- image-spacing (adds white space around an image)
- image-border (adds a border around an image)
- image-drop-shadow (creates a drop shadow, which does not appear in some older browsers)