Image styles

The following styles are available to apply to images within the middle and right columns (not displayed on this page — see this site's home page for an example of the right column in use). When applying image styles, please remember to follow the template guidelines for content images.

If you need additional styles, please contact ITS-WS or YSM-IPC to assist you with development.

Style	Sample code
Middle column images
Aligned right	<img src="insert image url here" class="right-photo" alt="insert alternate text here" height="160" width="140"> Insert this code in the text paragraph directly after the <p> tag of the text that should wrap the image.
Aligned right with a caption	<p class="right-photo-caption" style="width: 142px;"><img src="insert image url here" alt="insert alternate text here" height="160" width="140"> <br />Caption text goes here.</p> Insert this code as its own paragraph before the text paragraph that should wrap around the image. **See note below in "Image style notes"**
Aligned left	<img src="insert image url here" class="left-photo" alt="insert alternate text here" height="160" width="140">
Aligned left with a caption	<p class="left-photo-caption" style="width: 142px;"><img src="insert image url here" alt="insert alternate text here" height="160" width="140"> <br />Caption text goes here. </p>
Right column images
Aaligned right	<img class="sidebar-sm-photo" src="insert image url here" alt="insert alternate text here" border="0" height="66" width="66">

 

Image style notes

• These photo styles "float" the image in the text, allowing the text to flow around the image.
• Per the template guidelines, images in the middle column should generally be no larger than 352 pixels by 200 pixels, and images in the right column should be no larger than 162 pixels wide.
• **Notice above, in the sample code for images with a caption, the phrase "width: 142px;". The "142" should be replaced with a value 2 pixels wider than the image. For example, if the image is 180 pixels wide, the 142 would be replaced with 182.
• Also, if copying the sample code above, remember to change the following values with the appropriate new values:
  1. Image location (src="insert image url here")
  2. Image height (height="160")
  3. Image width (width="140")
  4. If the image has a caption, replace the "Caption text goes here." placeholder text with the new caption text.
  5. "width: 142px;" value, as described above, for images with a caption.
  6. Alternate text for the image (alt="insert alternate text here")

Image styles in use

The samples below follow the template guidelines with respect to size, but not in quantity. According to the guidelines, as a general rule, only two images should ever be visible on the screen; however, in this example, three to four images can be seen on the screen at one time. While this may seem like a silly guideline, good web practice indicates that overuse of images can cause visual difficulties for the web user when reading the site.

Image used with right alignment

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut loreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Image used with right alignment and a caption

The class applied to this image is "right-photo- caption".

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut loreet dolore magna aliquam erat volutpat. Vel illum dolore eu feugiat nulla facilisis at vero eros et.

Image used with left alignment

Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Image used with left alignment and a caption

The class applied to this image is "left-photo- caption".

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.