University of Michigan-Flint

To include an image on your TeamSite follow the steps below:

1. Make sure that you have followed the instructions in the "Working with Files" instructional guide to import your image into the CMS.
2. Select one of the three methods below for including images:
• Include an "Image" Block:  Click on the "+" ()to the far right of the "Block" section marker and select "Image" from the dropdown menu.  Enter the required information, using the "Browse" button to navigate to your image on the CMS.
  
  
  
  
• Include an "Image Gallery:  Click on the "+" ()to the far right of the "Block" section marker and select "Image Gallery" from the dropdown menu.  Enter the required information, using the "Browse" button to navigate to your image on the CMS.  You may add additional images to the gallery, with a maximum of 3 per gallery, by clicking the "+" to the right of "Images".
  
  
  
• Include an image in a Text Block:  Click on the "+" ()to the far right of the "Block" section marker and select "Text" from the dropdown menu.  In the "Text" block, click on the image button ().  Use the "Browse" feature to navigate to your image on the CMS.

Before placing images on your TeamSite it is important to consider image size.  Larger images will take longer to load, and may result in unbearable load times for dial-up users.  In addition to taking longer to load, large images may occupy the main portion of your content area, bumping more important information out of sight.  To get an idea of what image size is appropriate for your site, check out the "Image Sizes: Working with Pixels" style guide. 

There are many different programs available that can resize pictures.  This tutorial will cover how to use Microsoft Office Picture Manager to resize your images.  This program is NOT included in the CMS.  If you do not have Microsoft Office installed on your computer you will not be able to follow this tutorial. 

1. Click on "Start", select "All Programs", select "Microsoft Office", select "Microsoft Office Tools", and then select "Microsoft Office Picture Manager". 
2. Microsoft Office Picture Manager should now be open.
3. Click on "File" and then "Locate Pictures".
   
   
   
4. A pane will appear on the right side of the program window.  Make sure that the drive where your pictures are stored is selected.  For example, if your images are on your H: drive, you should use the drop-down menu to select "H: Drive".  For the purpose of this tutorial the images will be assumed to be stored on the "Local Disk (C:)".
   
   
   
5. Click "OK".  The program will now search the C: drive for any image files. 
6. Once the program has finished searching, it will add shortcuts to any folders that contained images.  These shortcuts will be displayed on the left hand side of the program window as "Picture Shortcuts" (see below).
   
   
   
7. Use the shortcuts to navigate to the desired image. 
8. Once the image is found, double-click on it so that the image fills the center window. 
9. Click on "Picture" and then "Resize" as shown below.
   
   
   
10. A "Resize" panel will appear on the right hand side of the program window (where the "Locate Pictures" panel appeared before).  Select the option that best fits your resizing needs.  The "Percentage" option is the easiest, and will maintain the proper ratios so that the image does not appear distorted.
    
    
    
11. Once you have selected the resizing information, click on "File" and then "Save As...".  Save the file as: filename_newsize.  For example, if I resized an image called "trees" to be 800 X 600 pixels I would name it: trees_800. 
    
    Please Note: It is possible to shrink an image without decreasing picture quality, however, it is not possible to resize a small picture to a larger size without introducing some amount of distortion.  Therefore, it is very important that you do not save over the original image after making it smaller.

You can give site visitors the option of viewing the full size version of an image.  This feature can be added by creating a "Thumbnail" gallery.  A "Thumbnail" gallery will display very small versions of the image that when clicked on opens a new window with the full size version of the image.

1. Follow the directions above to resize all of the pictures for the gallery to 10% or less of their original size.  Make sure that you save the smaller versions as filename_small (or a similar naming method) so you still have the large original!
2. Upload the images, both the small and original versions, to the CMS.  See "Working with Files" for details on how to upload files.
3. Insert a "Text" Block where you would like the Thumbnail Gallery to appear (see the first bullet under step #3 of the "Editing a Page" tutorial for more information on adding blocks.
4. Inside of the Text Block, use the  button to insert the small images.  Arrange the images the way you would like them to appear on the screen (all in a row, in groups of 2, etc). 
5. Click on the first picture so that it is selected, and then press the Insert Hyperlink button (see image below).
   
   
   
6. In the "Insert/Edit Link" use the "Browse" feature to select the original size image file.  Make sure that "Target" is set to "New_Window(_blank)".  Click OK.
   
   
   
7. Repeat steps 5-6 for all remaining pictures in the "Thumbnail" gallery.  Regenerate the page, submit your changes to the CMS, and your new Thumbnail Gallery should be available shortly!

To see a sample "Thumbnail" Image Gallery, check out the Anti-Piracy campaign posters at the ITS website.

Steps 6-7 can also be applied to any image placed in a "Text" Block.

Not all image types can be used in the CMS.  The preferred image types are “.jpg” and “.gif”.  If your image is not in one of these types you will need to convert it.  Some of the more common file types that you may encounter while working with Media Bin and the CMS that will not work are: .eps, .psd, and .tif.  Instructions on how to convert these image types to “.jpg” images are given below.

.eps and .psd Files

Any file with the extension “.eps” or “.psd” can only be opened with Adobe Photoshop.  If you do not have Adobe Photoshop installed on your machine you will not be able to properly covert this type of file. 

To convert this type of file you should complete these steps:

1. Open the file with Adobe Photoshop.  (If the file is in your TeamSite already, follow the steps given in “Editing Images Already Uploaded to Your TeamSite” to open the file.)
2. Select “Save As”.
3. Change the Format to “JPEG(*.JPG,*.JPEG,*.JPE).  You may be asked to select some quality settings when you change the file type.  Select whatever quality settings are appropriate for your situation (higher quality will mean a larger file, but lowering quality will reduce file size).
4. Change the file location to one you can easily find (My Documents, My Pictures, Desktop, etc).  Click “Save” to save the picture.
5. Follow the directions for importing a file to upload the image with the new file type to your TeamSite.

.tif Files

Files with a “.tif” file extension can be converted to “.jpg” files with Paint.  Paint is available on all computers running a Windows operating system.

1. Open the file with Paint.  (If the file is in your TeamSite already, follow the steps given in “Editing Images Already Uploaded to Your TeamSite” to open the file.)
2. Select “Save As”. 
3. Change “Save as type” to: “JPEG(*.JPG,*.JPEG,*.JPE,*.JFIF).  You may be asked to select some quality settings when you change the file type.  Select whatever quality settings are appropriate for your situation (higher quality will mean a larger file, but lowering quality will reduce file size).
4. Change the file location to one you can easily find (My Documents, My Pictures, Desktop, etc).  Click “Save” to save the image.
5. Follow the directions for importing a file to upload the image with the new file type to your TeamSite.
   

To edit a file that is already saved in your TeamSite (either from importing from your computer or downloading from Media Bin) follow these steps:
Navigate to the image location in your TeamSite.

1. Check the box to the left of the image you wish to edit.
   
   
   
2. Click on “File” and “Download” once you have the image selected.
   
   
   
3. A new window should appear displaying your “local” files.  Highlight the file you wish to edit by clicking on it once.
   
   
   
4. Click on “Edit With” from the group of buttons at the bottom.
   
   
   
5. A window will open asking you which program to use to edit the file.  Select the program you wish to use and click “OK”.
6. The image will be opened in the program you selected.
7. Edit the image as desired.  Some common edits are listed below (depending on which program you use to edit the image, not all of these options may be available).
   
   a. Crop – You select the portion of the picture you want to keep, and cropping will remove all but the selected area.
   b. Rotate & Flip – Change the picture orientation.
   c. Brightness and Contrast – Will allow you to lighten images that are too dark.
   d. Resizing the image – Allows you to reduce the image size so that it fits in the content area of your TeamSite.  Images can be reduced in size without any problems, but increasing an image’s size may introduce distortion or “fuzziness” into images.
   
   
8. Save the image by pressing Ctrl+S or by selecting “File” and then “Save”.
9. Return to the browser window with the CMS.  It should still have the view of your local files.
10. Click on the file that you edited once so that the name is highlighted.
11. Click the “Upload” button at the bottom of the screen.
12. The edited image will be uploaded to your TeamSite and replace the unedited version.

Image maps, also known as "hot spots", allow you to use one image to create multiple links.  To create an image map in the CMS you must use the "HTML" block element, and have a general knowledge of HTML.  If you wish to create an image map for your site, please refer to this tutorial:  http://www.javascriptkit.com/howto/imagemap.shtml .  Please note that in the sample code shown on that page the "body" tag is used.  When you create a hot spot in the CMS you do NOT need to include the "body" tag.  For example, the final code for an image map would be:

<img src="trees.gif" usemap="#green" border="0">
<map name="green">
<area shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.trees.com/save.html">
<area shape="rect" coords="128,132,241,179" href="http://www.trees.com/furniture.html">
<area shape="circle" coords="68,211,35" href="http://www.trees.com/plantations.html">
</map>

Images can be made into links to other pages.  To make an image a link follow these directions:

Inside of the Text Block, use the  button to insert the image(s). 
1. Click on the picture so that it is selected, and then press the Insert Hyperlink button (see image below).
   
   
   
2. In the "Insert/Edit Link" enter the link you would like the picture to connect to.  It can be another page in your TeamSite or an outside website.  Select how you would like the link to open (in a new window, etc).
   
   
   
3. Click OK.  Regenerate your page.