How to add pictures to your ICMS webpage
A) Prepare the photo:
- To begin with, you should be at least somewhat familiar with the concepts of image resolution, file size, and format. Webmonkey is a great resource. Average sizes: thumbnails should be 100x150 pixels, body copy and slideshow pictures 300x350.
- Size your photo in Photoshop to the exact final dimensions that you want to use. Some page types have suggested image sizes For example, Faces at Bates should be 50 pixels tall by 480 pixels wide; News Release Photo widths should be around 135 px for verticals and 240 px for horizontals (height works out to whatever).
- Save the photo to your hard drive in GIF or JPEG format. Photoshop CS2offers powerful capabilities under its "SAVE FOR WEB" menu option.
- Name the photo with a specific, unique name. Avoid using characters such as ampersands, spaces, asterisks, and slashes. A good idea is to begin the name with your department name department-purpose
(Good name: "alumni-bobcat-reunion-02.jpg"; Bad name: "bob cat.jpg")
B) Upload:
First, you must upload the photo onto the ICMS server. Do this by choosing FILE --> UPLOAD from the ICMS menu. A navigational box will appear, and you should navigate to your image file and click on it. The default destination is Images. Use that for GIF's and JPEGS. Choose Prebuilt if you are importing a PDF other type of file. Generally, you will not want to ever upload content into Schemas or Stylesheets.
C) Display in BodyCopy or BodyCopy_Supplement field:
Generally, you will display images from within the BodyCopy field. This is an HTML-sensitive field which displays images by using the img tag; for example, <img src="Images/name-of-my-file.gif" width="50" height="40"> You can use ICMS's editing controls to insert a picture by:
- Click where you want the picture to appear
- Choose INSERT --> PICTURE from the menu -or- right-clicking in the BodyCopy box and choosing PICTURE.
- a dialog box comes up; choose your picture from the list (there is only one images directory for the entire website)
- Set your <img> options such as hspace, vspace, ALT tag, etc. and choose OK
You may edit the resulting HTML source as usual by right-clicking in the BodyCopy area and choosing EDIT SOURCE.
Display in photo field ("File")
Certain pages (such as News Releases and Faces at Bates) have a built-in capability for displaying photos. This can be determined by the presence of a field named File. All fields named File have a small icon of three dots to the right. Click on the three dots and you will see your dialog box. Choose your picture from the list (there is only one images directory for the entire website). Set your <img> options such as hspace, vspace, ALT tag, etc. and choose OK.
