Images

As the classic wisdom says, "a picture is worth a thousand words." This adage also holds for website design. If you take note of some of your favorite sites, you'll notice that they most likely balance text content with a smattering of related images. The term "Image" includes a broad category of visual elements including photographs, logos, buttons, etc. It is even possible to use a specialty font for small amounts of text on your site by inserting it as an image.

Step by Step

1. To insert or edit an image on a page of your site, first open the appropriate page. (Step-by-step instructions here.)

3. Click the "Insert/Edit Image" button (located on the second row of editor tools) to open the "Image Properties" dialog box.

4. The "Image Properties" dialog box (shown below) is your one-stop source for managing images. There are four tabs at the top of the "Image Properties" dialog box, so we'll go through each of those step-by-step below.
   
   

The Image Properties "Image Info" Tab

This is where you can manipulate how the image displays on your site. On the Image Info tab, you will find the following:

1. URL - This should not be confused with the URL for a hyperlink that you can specify under the "Link" tab (see below). This URL tells your website where to find the image on the web server so that your site can display the image any time someone visits this page of your site.
   

   
   Click Browse Server to automatically open the image browser window. This window will bring up File Manager, showing you all the images on the web server already available for use on your site.
    

   	The image I want to use is not in File Manager.    If the image you want to place on your page is not already in File Manager, that means you need to first upload the image to the web server so that it is available to your site. 1. Click the "Upload" button, then click the "Add Files" button to upload a copy of the image file from your computer onto the server. Depending on the files size and your connection speed this could take a moment, so be patient. 2. When the new image file is uploaded it will appear in File Manager and you may continue with the next step. View Step-by-Step instructions about uploading in File Manager
   	The image I want to use is available in File Manager.    If the image you want to place on your page is in File Manager (see note below), simply double-click the image to load its URL into the "Image Properties" dialog box. The image browser window will automatically close, and you'll see the image you selected in the preview pane. Note: If you have created folders to organize your site pages, you may need to navigate to the correct folder in the left-hand column of the image browser window. Also, if your site utilizes multiple departments, you may need to navigate to the correct department in the left-hand column of the image browser window.

   You have now uploaded your image to the web server and told your website where to find the image on the web server. However, this work will not be saved until you click OK in the Image Properties dialog box.

2. Alternative Text - In spite of your best efforts, the images on your site will never display in certain instances. This fact is outside of your control, but you can anticipate it and provide alternative text to display when the image itself is blocked. This is a good idea for three reasons:

   1. Some people configure their web browsers to hide all images as a matter of preference. Your alternate text will let them know what they are missing.

   2. For blind site visitors using a screen-reader, images are unrecognizable. However, screen-readers are able to detect alternative text and translate that for handicapped site visitors.

   3. Search engines ignore images. By including alternate text, you give your site a better chance of ranking appropriately in search engines based on all of your site content, instead of just the text content.

3. Image Size - While it's best to make your images the correct size before you upload them to your site, it's also not uncommon to need to perform some minor adjustments to the size of an image after it's uploaded. The numbers that are used in these width and height fields are pixels. While monitor sizes vary greatly, it may be helpful to know that the most average monitor size is 1024 pixels wide by 768 pixels high. This suggests that an image that is 500 pixels wide might take up about half the width of the screen on many monitors.

To maintain the proportions of your image (and avoid the stretched look), make sure the lock icon is closed. This will force your image to maintain its original proportions. Of course, you can also click the lock icon to allow adjustment of the image height and width independently.

Clicking on the circular arrow icon resets your image to the original dimensions (as it was uploaded to the web server).

Images can be resized through File Manager. For Step-by-Step instructions, see the File Manager page.

4. Border - Use this field to put a border around the image. Measured in pixels.

5. Spacing - HSpace ("horizontal" space) controls the space between the image and adjacent text to the left and right of the image. VSpace ("vertical" space) controls the space between the image and adjacent text above and below the image. Measured in pixels.

6. Alignment - This determines how the text on your page interacts with the image. So, for example, selecting "Right" will cause your image to align to the right-hand side of the content area and force text to flow around it on the top, left, and bottom.

7. Preview - The preview pane shows a representation of how your image will look on the page based on the current "Image Property" settings.

The Image Properties "Link" Tab

This is where you can make the image function as a hyperlink to another web page. This is not required, but is optional.

1. URL - Enter the destination of your hyperlink associate with the image. For example, if your image is a thumbnail (small image) of your organization's annual report, you might make the image's hyperlink using any of the following methods:

   1. /32
      To link to a specific page on your site, enter a forward-slash ("/") followed by the ID number.

   2. /annual-report
      To link to a custom URL, enter a forward-slash ("/") followed by the custom URL.

   3. http://www.anotherdomain.com
      To link to a page on another website, enter "http://" followed by the full URL.

2. Target - This is an easily-overlooked setting that has a subtle, but important impact on your site visitor's experience at your web site.

   1. New Window - Select this to have the destination of the hyperlink open in a new browser window.

   2. Topmost Window - Select this to have the destination of the hyperlink open in a new browser window and force itself to the front of the screen. This is the standard setting for a hyperlink leading to a page on another site.

   3. Same Window - Select this to have the destination of the hyperlink open in the same window, thereby replacing what the site visitor was looking at. This is the standard setting for a hyperlink leading to a page on your own site.

   4. Parent Window - Select this to have the destination of the hyperlink open in a parent window.

Transparent Images

You've probably seen transparent images on the web before. Maybe they have a nice drop shadow, or maybe they blend in with the background color of the site. Images that do not use transparency can stand out like a sore thumb if they are not done correctly. You've probably noticed white boxes around images that should be transparent on a non-white background.

The Two Types of Transparent Images

1. GIF - These images are the transparent images of old. They only support one layer of transparency, so it's hard to get smooth edges. However, they are fully supported by all browsers.

2. PNG - These images can have fully transparent backgrounds that work well with effects like fades, drop shadows, and more! These fully-transparent images can take awhile to download, though, so be careful. PNGs also are supported by all modern browsers, except Internet Explorer 6.

Dealing with Internet Explorer 6

IE 6 does not support full transparency in PNGs. If you use one on your site, IE 6 viewers will see your transparent image with a gray background. Because of this, the web world has come up with many workarounds. We've built one of these workarounds into Radius to help.

1. Insert Your Image - Insert your transparent image using the steps outlined in the walk-through above.

2. Edit the Advanced Properties - Click the "Advanced" tab of the Image properties box
   

3. Add the Class - Type "transparent" (without the quotes) into the Stylesheet Classes box.

4. Publish your page

Advanced

This is where those with HTML experience can set special features of an image. If you don't understand the fields on this tab, we recommend ignoring them altogether.