Image Components

This page lists many of the Image components available in the CMS with examples. You can use your own (carefully pre-sized) images or images from the DAM in all these components. The only exceptions are the Photo Galleries and Slideshow components, which have to use images from the DAM.

For general information about uploading images, image sizes, saving images in the DAM, and DAM locations for specific components' images, please see the introduction to the CCSF Digital Asset Manager Images document.

In the CMS, you must put in an Image Title: this is important because it is Alternate text for the image, read by screen readers that are used by sight-impaired people. So the text you insert should be helpful: descriptive of the image content, clear, and understandable.

Components covered on this page: CCSF Image, CCSF Text Image, CCSF 3-image banner, CCSF Header Flash and Small Flash, Generic Template built-in top banner, and CCSF Photo Gallery and Small Photo Gallery.

CCSF Image

The CCSF Image component is quite versatile. It is the easiest place to upload one of your own images, because is doesn't stretch or squeeze the image to a standard size. You just have to be careful to choose an image that isn't too wide for your column and doesn't take up too much space vertically. If the image doesn't take up the entire column, you'll just get some extra white space.

In the DAM, under Marketing_Images, the Image folder holds pictures of various widths to fit different sizes of columns. For the center of a 3-column template, the 467x images fill the column.

Here's an example:

The Windows key


CCSF Text Image

Container garden (detail)

This component allows you to wrap text around a small (110x110, 160x160 or 150x200 pixel) image. The image goes at the top left or right as in this illustration (this is 110x110).

In the Advanced Image Properties tab you can choose image size and placement. Again, the Image Title field is necessary to provide information about the image to sight-impaired viewers.

It's useful to:

  • Illustrate a point
  • Provide a picture with a brief bio in a list of faculty or staff
  • Give a splash of color to a page without taking up much space
  • Show and tell - maybe illustrate a textbook listing with a thumbnail of the cover

Tex-image component tabs: Advanced image properties


CCSF Three Image Banner

The Three Image Banner component exists in different sizes for 1, 2, and 3-column templates. The banner is meant to be put in the main column, close to the top. All have the same format, with three tabs in Edit mode: 

3 image banner tabs

The Images tab is where you drag images from the DAM or upload your own images by clicking on the image icon. The Advanced Image Properties tab holds the Image Title - you can't click OK and exit the component without entering descriptive text in the Title field for every image.

The Images Layout tab allows you to choose how you want the images arranged. Some 3-picture components also allow you to have only one large image.

^Top

Studying
Class in session
A Trustee at Graduation
3 image banner area in the DAM

In the DAM,images for the 3-image Banner are arranged by the number of columns in the template. Look for images that fit the column layout of your page.

CCSF Header Flash and CCSF Small Flash

The CCSF Header Flash and CCSF Small Flash components have tabs for both a Flash file and an Image file (which displays if you haven't put in a Flash file, or if the browser of your site visitor can't handle Flash). The required Image Title is part of the Image tab. Its Advanced tab holds information about the Flash file. The CCSF Header Flash component is designed for main columns; the Small Flash for a right-hand column.

At present the DAM has no Flash files ready for your use. And there are no images scaled precisely right for the component. The closest match: under the ccsf folder, the Homepage folder has some images listed as 277x509 (see below).

The CCSF Small Flash component images are available in the Flash folder under Marketing_Images.

Fashion students


Generic Templates: Built-in Top Banners

These are large image components built into all the Generic templates. If you don't supply images for them, you'll get a looming blank space above your page's content.

Editing is similar to editing the CCSF Three Image Banner described above. However, these banners have the option of using just one very large image (982 by 196 pixels) as well as three (you still have to put in Image Titles for all three images - I just put in Null for the ones I'm not using).

Find DAM images in the Marketing_Images area, under Title_Image_Banner. Single large images are in the Large_982x196 folder. If you opt for 3 images, large images are in the Small_550x196 folder, small in the Thumb_213x196 folder.

^Top

CCSF Photo Gallery and Small Photo Gallery

To use the CCSF Photo Gallery Component, images can be any reasonable size. However, the automatically generated thumbnails are 96 pixels wide x 64 pixels high or 48 x 32 in the Small Photo Gallery (a 3 to 2 ratio), so, to get a perfect thumbnail, the actual image should be sized to the same ratio. So a picture with the dimensions 600 pixels by 400 pixels would generate an undistorted thumbnail.The thumb of the Chancellor and the pictures in his column in the gallery below are distorted horizontally because the pictures don't have the right proportions. But if you click on the thumb, the actual picture comes up, undistorted.

The photo gallery holds 12 pictures; if you don't use all 12 spaces, the result is a blank space, as in the last position, bottom right, below.

The Photo Gallery is designed to go in a main column; the Small Photo Gallery for a right-hand column.

Images must be uploaded and then activated in the "ccsf -> Images" folder in the DAM. No other DAM location works. And you can't upload your images directly from the desktop to this component.