University of Vermont

UVM Self-help Web Guide

Image effects

The process of adding images to your Web page will be different from editor to editor. For example, if you use Contribute, we have documented how to successfully upload an image in Contribute, but that would be a different process if you were using another editor such as Dreamweaver. Though we can't cover every editor's image upload process, we would like to address a few special code calls that people may like to use in the UVM Publishing System:

Left-justified image with wrapped text

placeholder imageThis is the caption for this text wrapped image

There are many occasions when a descriptive photograph or illustration can contribute to the value of text content. You can effectively link the two elements together by wrapping the text around the image with the image either on the left or the right of the text. Wrapped images can also be accompanied by a caption.

Implementing this feature is easy. Our stylesheet contains the information to make the wrapping and captions look and function correctly. All you need to do is follow the directions below to create proper html tags.




Right-justified image with no caption

placeholder image
  • Resize the image you would like to include.
  • Upload the image to your public_html folder or to an images folder within public_html
  • In your html page go to beginning of the text where you'd like the image to appear and insert an image "tag" that looks like this (for an image on the left side):

    <img src="image.jpg" class="imageleft" alt="Placeholder image " height="120" width="140" />

    or like this for an image on the right side of the text:

    <img src="image.jpg" class="imageright" alt="Placeholder image " height="120" width="140" />

  • Note: be sure that you have included the "class" attributes in your image tag!

placeholder image This is the placeholder caption

Right-justified image with caption

  • Resize the image you would like to include. For the caption to fit nicely under the photo please choose one of the predetermined sizes for the image:
    • small: 160 pixels wide
    • medium: 280 pixels wide
    • large: 400 pixels wide
    You will need to input the size name as part of the "class" attribute.
  • Upload the image to your public_html folder or to an images folder within public_html
  • In your html page go to beginning of the text where you'd like the image to appear and insert a paragraph and image "tag" that look like this (for an image on the right side):

    <p class="with_captionright sm_caption"> <img src="image.jpg" class="imageright" alt="Placeholder image" height="120" width="160" /> This is the placeholder caption</p>

  • There are two critical aspects of this call. The first is that the image tag must be inside the paragraph tag. The second is that the "class" attribute in the img tag has two pieces - the first part (with_captionleft or with_captionright) positions the text under the image and move the whole thing to the right or left of the rest of the copy - the second (sm_caption, med_caption, lg_caption) dictates how wide the text area is. Choose the size that corresponds with the image size you selected.
    Note: These two pieces must have a space between them!

Last modified January 25 2013 02:20 PM