SSU Website Image Styling Options

Consistent styling of images will give your website a more professional and polished look.

Image Sizes

Images should be properly sized using Photoshop or another graphics editor before inserting them into a web page. While it is possible to insert a large image, and use HTML or CSS to display the image at a smaller width and height, this will cause the page to be slower-loading, and less user-friendly.

Images should also be displayed proportionally, and not stretched or shrunk unproportionally. Most people will notice when an image of a person or familiar object has been adjusted even a little. Avoid this, unless you're intending to create an odd effect.

In most cases, you'll want to use the following maximum images sizes.

Recommended Maximum Images Sizes
Page Type & Use Width (in pixels) Height (in pixels)
Banner or Slideshow Pages - main banner 960 265
Landing Page - large background image 960 640
Content area - full width image (0 border, margin & padding) 726  
Content area - full width image with border, marging and padding 710  
Content area - image floated left or right with wrapped text 350  
Blank page - full width image 932 932

 

Borders

Using CSS to apply the border allows you to have space between the image and border.

To apply a border, insert your image, then add the border class to the image.

<img src="myimage.jpg" class="border" alt="alt text goes here" />

Accessibility Tip: All images must use the alt attribute and appropriate ALT text. Images without alt text will automatically fail accessibility testing. See WebAIM's article, Appropriate Use of Alternative Text for more information about writing good alts.

Floating Images Left and Right

This photo of the clocktower has been floated to the left.Images can be floated to the left or right. Floating an image takes it out of the normal flow of content (top to bottom, left to right) and makes the following content flow around it on the right or left side. SSU's float style adds a little extra padding space on the side and bottom of the image so text won't crowd the image.

To float an image, insert your image at the beginning of the paragraph (or heading). Then add the right or left class to the image.

You can also add a border to a floated image by using the border class in addition to the right or left class. Just make sure there's a space between the two classes.

<p><img src="myimage.jpg" class="border left" alt="alt text goes here" />Here's the text for the paragraph.</p>

This photo of the clocktower has been floated to the right.To float an image without the border, use only the left or right class.

<p><img src="myimage.jpg" class="right" alt="alt text goes here" />Here's the text for the paragraph.</p>

Clearing a Floated Image

Elements that follow a floated image will wrap around the floated image. Sometimes this may result in some elements wraping in a way that you don't like, such as the heading for this paragraph. When you don't want this to occur, or when you want it to stop, you need to apply a "clear." Clearing a floated image will cause the following elements (those after the Clear), to drop down below the image, leaving blank space next to the image.

SSU's style sheet lets you clear a float with one of these:

  • <br class="clear-right" /> - clears an image floated on the right
  • <br class="clear-left" /> - clears an image floated on the left
  • <br class="clear-both" /> - clears images floated on the right and left.

Image Captions

Captions can be placed below images.

The caption is a paragraph that follows the image tag. Both are inside a div that can be floated to the left or right.

alt

This is an example of how you float an image with caption to the left within text. See below for code snippet.

alt

This is an example of how you float an image with caption to the right within text. Use the code below, but replace "left" with "right"


<div class="caption left" style="width:300px;">
<img src="example.jpg" alt="Image of area near Bacon and Eggs, flowers in the foreground, students sitting at outdoor tables in the background." />
<p>Example: caption goes here.</p> </div>

It's important that you define the image size in the div (i.e. style="width:300px;"). Otherwise, this style will not render properly.


Slideshow using the Nivo Slider

banner banner2 banner3

With the Sonoma State content style sheet you can also incorporate a simple slideshow capable of captions into your site. All you need to do is follow the code snippet below and use it as a guide. Remember, the div id #slider should specify the height and width of your slideshow. For best results, use only pictures that are the same size (width and height), such as the example above. This slider doesn't automatically resize your images so it's important that you do so yourself.

Accessibility Requirement: This slideshow uses javascript to rotate several images in sequence. Some assistive technology may not be able to display or rotate the images. Some assistive technology users may not have access to the alt text in the slideshow images. If the images in your slideshow are not purely decorative (meaning that no necessary content is lost if the slideshow is removed entirely), then you must convey that content in some other, accessible, way. Contact the IT Web Office for assistance.

 

<div id="slider" class="nivoSlider" style="width: 720px; height: 260px;">
<img src="example1.jpg" title="This is an example of a caption 1" alt="Alt text for image 1 goes here" />
<img src="example2.jpg" title="This is an example of a caption 2" alt="Alt text for image 2 goes here" />
<img src="example3.jpg" title="This is an example of a caption 3" alt="Alt text for image 3 goes here" />
</div>

In order for this to work, you must make sure that you have the following CSS and JS code included in the header of your HTML document.

<link rel="stylesheet" href="/css/global/slider-nivo.css" type="text/css" media="screen, projection" />
<script src="/js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="/js/nivo-slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
//effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
//slices:15, // For slice animations
//boxCols: 8, // For box animations
//boxRows: 4, // For box animations
//animSpeed:500, // Slide transition speed
//pauseTime:3000, // How long each slide will show
//startSlide:0, // Set starting Slide (0 index)
//directionNav:true, // Next & Prev navigation
//directionNavHide:true, // Only show on hover
//controlNav:true, // 1,2,3... navigation
//controlNavThumbs:false, // Use thumbnails for Control Nav
//controlNavThumbsFromRel:false, // Use image rel for thumbs
//controlNavThumbsSearch: '.jpg', // Replace this with...
//controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
//keyboardNav:true, // Use left & right arrows
//pauseOnHover:true, // Stop animation while hovering
//manualAdvance:false, // Force manual transitions
//captionOpacity:0.8, // Universal caption opacity
//prevText: 'Prev', // Prev directionNav text
//nextText: 'Next', // Next directionNav text
//beforeChange: function(){}, // Triggers before a slide transition
//afterChange: function(){}, // Triggers after a slide transition
//slideshowEnd: function(){}, // Triggers after all slides have been shown
//lastSlide: function(){}, // Triggers when last slide is shown
//afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>


Lightbox

Parts of a page - click to zoom.

Lightbox allows you to add a caption at the bottom of the image

Lightbox is a pop-up that permits users to view an enlarged version of an image without navigating away from the current page. When the Lightbox is displayed, the rest of the page is dimmed to highlight the image.

To incorporate your photo as a Lightbox, insert the image you wish to use into the code below. Then, place that code into your HTML document where you want the thumbnail to display. You can specify whether to set the image to the right or left side of the page.

<a id="single_image" title="This is an example of a caption" href="example.jpg">
<img src="example.jpg" class="right" width="306" height="236" title="Parts of a page - click to zoom image." alt="Parts of a page - click to zoom." /> </a>


In order for this to work, you must make sure that you have the following CSS and JS code included in the header of your HTML document.

<link rel="stylesheet" href="/css/global/fancybox.css" type="text/css" media="screen, projection, print" />
<script src="/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/js/jquery-fancybox.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox();
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': true
});
/* Apply fancybox to multiple items */
$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
});
</script>

Photo Resizing Tip: 1) Get a large image, 2) In the HTML for the page's inline image display, set the width and height to something smaller & 3) let lightbox show it at full size or smaller.



Thumbnail Gallery

The thumbnail gallery is a collection of photos in an image gallery that work as lightbox images. The images show up as thumbnails and open up when clicked on to show the lightbox image. The images can be scrolled through like any other photo gallery.This is great to use when there are large amounts of photos to be displayed on your website.This may cause the page to load slower and be less user friendly.

To create a thumbnail gallery, you must use insert the images you wish to use into the code below. Then, place that code into your HTML document where you want the thumbnail to display.

<a class="example1" title="This is an example of a caption 1" href="example.jpg" rel="lightbox"><img src="example.jpg" class="thumb" width="640px" height="480px" alt="Slideshow Picture" /></a>
<a class="example2" title="This is an example of a caption 2" href="example2.jpg" rel="lightbox"><img src="example2.jpg" class="thumb" width="640px" height="480px" alt="Slideshow Picture 2" /></a>
<a class="example3" title="This is an example of a caption 3" href="example3.jpg" rel="lightbox"><img src="example3.jpg" class="thumb" width="640px" height="480px" alt="Slideshow Picture 3" /></a>
Slideshow Picture 2 Slideshow Picture 4 Slideshow Picture 5 Slideshow Picture 6

 

In order for this to work, you must make sure that you have the following CSS and JS code included in the header of your HTML document.

<link rel="stylesheet" href="/css/global/thumbs.css" type="text/css" media="screen, projection, print" />
<script src="/js/jquery-thumbs.js" type="text/javascript"></script>
<script src="/js/jquery-fancybox.js" type="text/javascript"></script>
<script src="/js/jquery-mousewheel.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".thumb").thumbs();
});
</script>
<script type="text/javascript">
$(document).ready(function() {
/* Image Examples */
$("a.example1").fancybox({
'titlePosition' : 'inside'
});
$("a.example2").fancybox({
'titlePosition' : 'over'
});
});
</script>

Gallery with text: In order to place your thumbnail gallery alongside text, you must use <div class="col1"> & <div class="col2"> inside the content div. Place desired content or thumnail gallery into either div.