« Back to the Table of Contents
There are two ways to add special presentational images to your pages: Slideshow Images or the Main Image.
Slideshow Images dispay at the top of the text, below the page title. If there is more than one image, then they automatically rotate. In wide-format, the caption is to the right of the image so that you can use an image that is the standard aspect ratio that comes from a camera. See the Teens or Kids pages for examples.
The Main Image will float the to top right of the text, and the text will wrap around it. The caption will display below the image. See the About page for an example.
To add or edit either on a particular page (or node), you will first edit the node. When you are in edit mode, at the top of the form, you will see a collapsed field labeled Slideshow Images. Click on this title to expand additional form elements to add slideshow images. Just following this collapsed field, you will also see another field labeled Main Image. Use this field to add a main image to the content.
Options for attaching an image file
Images are separate files that must exist on an publically accessible web server in order to be rendered in a web page. In order for your page to contain an image, you will need to upload the image file to your site directory.
There are three options for making an image file available to your page:
- Upload - this option allows you to find a file that is on your personal computer and upload it to your web server.
- File browser - this option allows you to look through images that have already been uploaded to your web server, and select one. You can also upload new files to your server through the user interface that pops up when you click "browse". See more about the IMCE Browser at the end of Add images in the body of the content.
- Remote URL - this option allows you to enter the absolute URL to an image. Clicking "transfer" will copy the image from its original location and into your web server's images directory.
Note: the Remote URL option must be used with caution. Please ensure that you have the right to use the intellectual property (image) that you are copying from elsewhere on the internet to your server.
Problems with images
There are a few considerations that must be made regarding image files.
- Image size - If your file size is too large, it will load very slowly. If the size is too small, then it will appear pixelated (ugly, fuzzy, full of "digital artifacts"). Typically, 1000 pixels is about the largest you want an image to be on its longest side.
- Image color profile - Some browsers and operating systems cannot display images that use the CYMK color profile. Make sure your image is RGB if it is to be used for web presentation.
- File format - Image files must be .png, .jpg or .gif for web presentation.
- File name - Spaces and special characters have meaning in HTML markup, and so can be problematic if they are in file names. Some browsers will not be able to render your image to the screen if the filenames aren't clean. All file names should only contain alphanumeric characters, underscores and hyphens.
Good: myAmazingPhoto-2.jpg
Bad: my Amazing & Beautiful Photo 2.jpg
Alt text
When you attach an image, a new field will display next to the image thumbnail labeled "Alt text."
Alt text is short for alternate text and is extremely important. This field should never be left blank.
The alternate text serves the following purposes:
- This is what is displayed for the user if the image does not display.
- This is what screenreaders will read to users who cannot see.
- This is what search engines will use to determine semantic information on your site, and is therefore key information for search engine optimization.
If your image contains critical information, it is imperative that the alt text impart that information to the user as well. Example: an image showing the location of an event.
Image Focal Point
Some of the displays on the site will reshape the image to fit exact dimensions. This is to ensure a professional look when content is displayed in lists. The reshaping includes cropping parts of the image in order to ensure the correct shape.
When you upload your image, you will see a thumbnail with a crosshair symbol (+, see screenshot).
This crosshair represents the point on the image that the site will consider the center when cropping the image to fit dimensions for a specific display. For example, if the image includes a person's face, it would be helpful to move the crosshairs to the center of the face so that the person's eyes are not automatically cropped out of the image for various displays.
The Quick Preview link under the image can be used to open a new browser window with the various crop incarnations of the image, giving you the opportunity to see what it might look like in the possible displays before settling on a specific focal point.