Graphics add visual/aesthetic appeal to the information on a web page, helping to maintain viewer interest and attention. Graphics may also help to create visual structure for information and links on the page.
There are several steps to inserting an image into your web page: First you upload it to the server and then you insert it into the web page. This is done in the page edit mode.
1
Upload an Image
To upload and insert photos to the content area:
- Scroll down to the Photo box. Choose your image file.
- Enter your Alternative Text. (required)
- Click ‘Upload’
Note: Provide proper alternative text when you first upload an image. You may change it later but you will need to reinsert the image in order for the new alternative text to be updated in the page code. See our Accessibility Tutorials to learn more about Alternative Text.
2
Insert the Image
Choose the image size from the Style dropdown box
Scroll up to the body area and place your cursor in the text where you want the image to appear.
Scroll back down to the photo area and click on 'Insert'.
To align the image, select the image and use the WYSIWYG editor to align the image right or left by clicking the text alignment icon.
Note: You may add lightbox functionality to an image with the colorbox image styles. Lightbox is a JavaScript library that displays images by filling the screen, and dimming out the rest of the web page.
Photo Sizes:
Colorbox small: 300 px
Colorbox small square: 70 px
Colorbox small thumbnail: 100 px
Colorbox square: 180 px
Original: the uploaded size
Hero: 1500 px
Large: 960 px
Large-square-thumbnail: 320 x 320 px
Large-wide-thumbnail: 320 x 160 px
Medium: largest side resized to 480 px
Slider: 960 x 360 px
Small: largest side resized to 240 px
Small square thumbnail: 70 px
Square thumbnail: 180 x 180 px
Thumbnail: 100 x 66 px