Using the Media Library

Use the Saga Media Library to upload your images. Before you upload images, use your own image editing software (eg, Photoshop, Imageready, Fireworks) to optimize them for the web (ie, lower resolution/dimensions to something that fits on your page and is not so big that it will take a long time to download over a dialup internet connection).

Make sure you use a legal name for your image files. The Saga Media Library tab explains how to make a legal name and it won't let you use a name that won't work. If you use a consistent naming strategy for your files, they will all be stored together in the same folder, which can be handy because then you can browse through them all in one place (choose Media Library > Browse Media Library). One good strategy is to start the names of all your image files (and other documents like Acrobat PDFs) with your sitename. For example, the following files would all be stored in the /media/p/s/ folder:

psu_logo.gif
psu_gradapplication2004.pdf
...
etc

Putting an Image in a Content Item

When you successfully upload an image to the Saga media library, Saga returns you a snippet of HTML code showing you the exact location of your image file in the Media Library. You can use this information to embed the image into your content item in two ways:

1. Copy and paste the entire code snippet directly into the HTML Source view of your content item. (Note: If you paste the snippet directly into the WYSIWYG view, your content item will show the code, not the image.)
2. Copy only the image file location from the code snippet (<a href="copy everything between these quote marks including slashes" title="helpful hint">) and using the Insert/Modify Image WYSIWYG tool in your content item, paste the image file location into the Image URL field.

Whatever method you use, don't forget to supply descriptive alternative text for the image, which helps visually impaired users understand what is shown in the image.

Using two tabs in your browser—one to use the Media Library and one to edit your content item—makes it easier to move from one to the other to copy and paste the code snippet.

You can always add an existing image to a content item by browsing the Saga Media Library to locate an image, then copy its exact web address from your browser navigation toolbar and use one of the two methods described above to put it into your content item. Remember, you only need the part of the web address starting with /media/.

The <img> Tag

Generally, <img> tags should include all parameters, at the least:

<img src="[path/file.extension]" alt="[descriptive text]" border="0">

but if appropriate, use other parameters as well:

<img src="[path/file.extension]" alt="[descriptive text]" width="[#]" height="[#]" hspace="[#]" vspace="[#]" border="0" align="[left/right]">

Images in Saga fall into two types:

1. Images included in site templates for overall site design and navigation elements generally live in a centralized location and are not included in content items. These images are managed with site templates and are not part of everyday content management.
2. Images included in content items live in the centralized Saga media library, like supporting files (eg, pdf, doc, etc) and use <img> tags like:

   <img src="/media/[lowercase first letter of file name]/[lowercase second letter of file name]/[filename.extension]" alt="[image description]" border="0">

   For example:

   <img src="/media/l/i/LibraryTreeSide_300x213.jpg" alt="Portland State Library" border="0">

   This schema is designed to ensure document access performance by distributing supporting files within a broad directory hierarchy.