Please note that Chrome, while good for most areas of the system, is not currently working well with the Content Editor. You will want to use Firefox exclusively whenever you work with website content modules. In Chrome, you will experience difficulty in selecting existing images in the editor and adding new content to the module. For the best experience, use Firefox for all parts of the system.
Rules for Working with Images
- Start Large - As a general rule, you will want images that are large for your website, at least to start. You can always size them down to whatever you need, so starting with a larger image is good, think 800px - 1000px (see size guidelines below).
- Use JPEGs, PNGs, or SVGs - Other formats may not work at all (e.g. GIFs). If you are not familiar with PNGs, they are an Adobe image format for the web that allows for image transparency. SVGs are a vector image format (line art instead of pixel art) that scale beautifully larger or smaller as needed. For pixel-based images (JPEGs and PNGs), our system has an auto scaling feature that always rescales the image file for optimal image quality.
- Resize with Care - Sizing down is always fine; just realize you will lose detail the smaller the image gets, and that's normal. Never enlarge an image past its starting size, or it will begin to pixellate and look grainy.
- Know Your Limits - For web images, the largest you would ever need them to be is about 2,000px wide, so the system may block you from uploading images larger than this. Similarly, you don't what huge image file sizes for web images or it will slow your page load time way down, so the limit on the file size is 4mb. Anything larger will be blocked from upload. If for some reason you need to upload an image that exceeds these limits, click on the Documents folder in the Files area and you can upload files up to 100mb in size. For display on the web page, though, you will want to follow the limits above.
- Crop for Best Fit - To maintain an orderly appearance, or to make sure that your images line up nicely, you will want to crop them to exact dimensions. If you're replacing an image, find its original dimensions and crop the new image to fit. In your slideshow, you will want all images to have exactly the same dimensions, whatever you feel looks best.
Add or Change an Image
If you need to add an image into a module to display on one of your pages or if you need to change out an old image for a new one, please follow the steps below:
- To add a new image or change one that is already there, first click on the Edit button for the module where you want the image (the Edit button is the small pencil on the far left of the gray Module Toolbar).
- In the content editor, either right-click on an image you want to replace or left-click your mouse where you want the new image to go. If you are changing an existing image, your right-click will pop up a small menu: click on Insert Image to open the Insert / Edit Image window. If you are putting in a new image, either right-click and use the menu or you can click on the Insert/Edit Image button in the controls above the area in which you're working (it looks like a photo of a mountain, look in the top row of buttons below).
- In the Insert / Edit Image window, if you are changing an image to a new one, you should write down the Width and Height so you can change the new image to the same size. If you are bringing in a new image, you may need to try several sizes, saving the image (see below) to see how it fits.
- To load the new image, click on the Browse Server button (the button to the right side of the Source field).
- You will see the Browse Server window open, with some of your site images visible. If your image is already on the server, click on it. If you are uploading a new one, click on the button for Upload File.
- In the Upload File window, click on the green Add Files button and browse your computer for the image(s) you want. You can also just drag and drop images into the gray area below the buttons, if you like.
- When you find your image(s), if there is only one you need, you can double-click on it (or click on it once and click the Open button at the bottom). If you want to load multiple images, you can click on each separately while holding down Ctrl (Command if you use a Mac) and then click Open. If you are selecting all of the files in a folder, you can do Ctrl + a (Windows) or Command + a (Mac) and then click Open.
- You will see thumbnails of the images you are uploading in the Upload Files window. Click the blue Start Upload button and the image(s) will upload. When they are finished, the Upload Files window will disappear and you will again be looking at your Browse Server window.
- You will see the image(s) you just uploaded at the top of the list. Click on the image you want.
- You will see the Width and Height for the image, as well as its URL. You can adjust the Width or Height as desired and click the other dimension and it will adjust to fit. ADD ALTERNATIVE TEXT TO EVERY IMAGE: The Alternative Text area is where you can enter a descriptive phrase or sentence about the image so the search engines will know how to index it for web image searches. Doing this will increase your search relevancy for the whole website, so we strongly encourage you to do this for each image.
- In the Advanced tab, you have other options for formatting your image. You can set Alignment (the way the image lines up to text) and the standoff of how far the image is separated from the text in pixels (using the Horizontal Space and Vertical Space fields, for horizontal and vertical standoff).
- When you are finished, click OK, and then you can use the resizing 'handles' around the image to adjust further as necessary. When your work is done, remember to click the Save button at the bottom to bring the changes live to the web page.