Images

Image uploads work very much like file uploads. Once you've uploaded the image using the Upload File/Image button it is assigned a unique id number. You can use this number within an image tag to insert the image into the page. Before putting your image in the page you'll want to think about how much of the page the image should take up and use the appropriate image tag:

• [fullimage 12]- This tag will display the image at the full width of the main text in the page. This tag is best for images that are wider than they are tall and which are important to show at a large size.
• [largeimage 12]- This tag will display the image at approximately 2/3 the width of the main text. This size is appropriate for images that are key elements in the page (e.g. a figure or photo that is key to understanding the page) and where a smaller image would hide important details.
• [narrowimage 12]- This tag will display the image at approximately 1/3 the width of the main text. This size is appropriate for the majority of the images that are used to 'decorate' a page, or where a larger size isn't needed to make relevant details visible.
• [quarterimage 12]- This size is exactly in between the [thumbimage] and [narrowimage] tag sizes. Its name is deceiving because you cannot fit 4 images across. The final width of the image is slightly more than a 1/4 of the usable page width.
• [thumbimage 12]- This tag will display a small version of the image.

Captions

When you use the image tags above a caption line will automatically be generated based on the description you provided when you uploaded the file. You can edit this description (and hence the caption) in the update file/image area found through the green sidebar. Captions will automatically contain a summary of the provenance and reuse information you provided when uploading the image. Again, this is editable by following the update link in the green sidebar. If you don't want the description to be automatically displayed below the image you can use the hidecaption option like this: [narrowimage 12 hidecaption]. If you want to provide a caption other than the one in the description (e.g. if a generic description of the image isn't appropriate in a particular context) you can use the caption tag to indicate that the caption text will follow the image tag and its end will be indicated with an [end caption] tag. You'll want your custom caption to include the details about the provenance and reuse of the image which you can have automatically inserted using the [imagecitation 12] tag. Altogether these tags you'll have something like this:

[narrowimage 12 caption] This caption will be displayed instead of the default. [imagecitation 12][end caption]

Alternative Text

It's important to provide a written alternative to each image so that visually impaired users can make effective use of the site. By default the system uses the title/alternative text field information associated with the image for this purpose. However, that may not be appropriate in all circumstances. The alternative text needs to briefly (a few words or a sentence) play the same role in the context of the page as the original image does. You can over-ride the the default alternative text to make more sense in the local context by providing substitute text near the end of the image tag (just before the url if any) surrounded in single quotes: [narrowimage 12 'Graph showing global CO2 rising over the last 200 years'].

WebAIM provides a practical guide to creating appropriate alternative text for your images with many useful examples.

If an image is purely decorative you'll want the system to display an empty alternative text tag, which you can do by putting 'none' as the alternative text: [narrowimage 12 ' none']. If you use the hidecaption option the system will assume the image is decorative and automatically put in an appropriately 'empty' alt tag. The one exception is if an image is a link (see below) it must have an alt tag that serves to describe where the link points to.  In this case the alt tag should usually be the name of the targeted page and should not include words like 'a link to'.

Thumbnails and Pop-Ups

When you click on the images generated by any of these tags the image itself will pop-up at full-size. In cases where you want a small image to appear in the page but also have the image viewable at a larger size upload a larger image and then use the thumbimage tag. Users clicking on the small image in the page will see the full size image as a pop-up.

Images as Links

If you do want the image to link to another page, you can include the absolute or relative URL as the last option before the image's closing tag [narrowimage 12 left http://www.google.com].

Automatic page thumbnails for local pages

You can use the the [thumbimage] tag to automatically display the Page Image (see below) associated with a given page. To show the Page Image don't add an image id to the tag and only give the url to the page you want the screenshot: 
[thumbimage /serc/site_guides/projects.html].

Do not use development urls (they start with /dev), only use the live url of the page even if it isn't live yet. The thumbnail for the live page is generated automatically and retrieved when that page is made live.

If you are using a Page Image from a page that exists on a domain other than serc.carleton.edu, you will need to use the whole url (e.g. http://nagt.org/nagt/sections/aboutcen.html).

You can also use the float,noshadow , and noborder options just like on any other [thumbimage tag] but the must be used in that order before the url at the end. The url is always last.

Positioning

It's possible to control the horizontal positioning of the image on the page by specifying left, right or center immediately after the image id number like this: 
[narrowimage 12 right]

Drop Shadow and Border

It's possible to suppress the drop shadow and/or the border that is applied to each image by default using the noshadow and noborderoptions. If both options are used, noshadow must come before noborder.

Slideshow mode

If your page has many related or ordered images, you may wish to turn on slideshow mode so users can easily navigate through all the images on the page without clicking each one individually. To enable slideshare mode, place the slideshow option last on your image tag:

[narrowimage 12 left slideshow]

The slideshow option only needs to be added to one image on the page (it doesn't matter which one). The order of the images is determined from the natural order in the page which is effectively top to bottom. Images that are floated right or center and not cleared with a [br clear] may appear to be out of order due to where web browsers render a floated image relative to other images.

Only the new image tags will be added to the slideshow image rotation. Old image tags and new image tags with URL links at the end will not be included in the slideshow rotation. You can navigate through the images with the buttons at the top of the image or the arrow keys on the keyboard. Images are preloaded to reduce waiting time when moving to a new image.

If you are making photo gallery page with many images, floating all images left will result in a grid-like layout. You can use the thumbimage tag like [thumbimage 12 left slideshow] back to back for all the images. Only one image needs the slideshow tag and then you can easily flip through all images.

Updating Images

The display of images in the sidebar includes a link to an editing page for each image. The editing page has a form for editing image information (like the description) and one for uploading new revisions of the image. This works exactly like file revisions: uploaded revisions replace the existing image across the site, and earlier revision can be saved or discarded as you deem appropriate using the options in the form.

Page Images

Each page in Serckit has an associated image which is used to represent the page in search results and other locations with visual displays. By default this image is just a screen capture of the page itself as it looks in a browser. However, if the system detect the presence of a suitably sized image (at least 150 pixels wide) in the page it will use this image instead of the screen capture. If there are multiple images in a page it will try to use one in the Description block (if there is one) and otherwise default to the largest image in the page. It's also possible to over-ride this automatically selected Page Image using an option in the page metadata.

Image Cropping

When system needs to display an image at an aspect ratio other than the original one (e.g. a page image used in a search return) it will default to cropping and scaling the image evenly from all sides. For some images this may not be ideal if the focal point of the image (e.g. a person) is not in the center of the image. The image updating page provides an interface where you can explicitly select a focal point (e.g. a person's face) and zoom level for the cropped version of the original image. The interface shows 3 example crop ratios to give you a sense of how your focus and zoom selection may play out in different display scenarios.

Creating Images for the Web

While there are entire books written on creating effective web images there are a few key points to keep in mind.

• The goal is to create the smallest image possible (in terms of file size) while retaining sufficient image quality and height/width to suit your purpose. Smaller images = faster loading web pages.
• Using the 'Save For Web' option in Photoshop (or similar a similar tool) offers many options for adjusting images toward the goal of small file size with sufficient quality.
• The most effective way to reduce the file size of your images is to reduce the dimensions (the height and width in pixels). Consider how you're going to use the image (in terms of the various tags above) and use the guidelines above for appropriate widths.
• Photos should be saved in JPG format.
• Photos directly off of digital cameras are almost always much too large for use directly in a web page--scaling them down to no more than 950 pixels on a side is appropriate in most cases.
• JPG images can be saved at a variety of 'quality' levels. The trade off between file size and image quality (fuzziness/blockiness) varies from image to image. So you'll need to experiment to find the optimal setting for a given type of image.
• Saving an image in JPG format causes a loss in quality that is cumulative over generations of saves: a "jpg of a jpg of a jpg" is going to look bad regardless of quality settings. Try to work from the earliest (highest quality) version available.
• Charts, figures and screen captures are generally best (smallest) when saved in PNG-8 format.
• PNG-8 images can be made dramatically smaller by reducing the number of colors (from 256 down to 8 or 16 is often sufficient for many charts and figures).
• Using the screen capture feature is often an easy way to get an image of something displayed on your computer in a program that doesn't have easy functionality for exporting to JPG or PNG format. You can capture the entire screen (using the PrintScreen Button in Windows, Shift+Command(Apple)+3 on a Mac) and paste it into an image editor for cropping and saving. Or use a stand-alone screen capturing tool (Snipping Tool in Windows, Grab in Mac) to get just the element you want.
• Remember to consider copyright; if you didn't create the image from scratch yourself and don't have explicit permission from the creator then posting it on the web is most likely illegal. See our copyright pointers for more details.

The Old Image and Thumbnail Tags

Historically we've used other image tags within Serckit: [image] and [thumbnail]. While we'd encourage you to use the new image tags described above the old ones still work and are documented here for your reference. They can be handy when you want an image that doesn't scale with the width of the current browser window.

Show old image and thumb tag documentation

Hide

 
As with files there is an option provided to delete the image (and any prior revisions) as long as there are no web pages currently using the image.

The basic tag is: [image 12] and there are a number of additional modifiers you can apply within the tag to change the appearance of the image.

• Adding the word 'left' to the end of the tag: [image 12 left] forces the image along the left margin allowing text to wrap around its right side (assuming the image is narrow enough given the width of the browser window).[image 12 right] does the same thing forcing the image to the right, and [image 12 center] will center the image.
• [image 12 border] puts a thin border and a drop shadow around the image
• [image 12 defaultcaption] constructs a caption for the image automatically based on its description and any provenance information provided. This require no 'end' tag. Long captions will automatically be 'hidden' behind a 'show caption' link.
• You can also manually create captions to fit a particular use of an image. [image 12 caption] indicates the image tag is followed by some text that should be used as a caption for the image. The end of the caption text should be marked with an [end caption] tag. 
  
  A special variant of this is obtained by using textonly in place of caption like this: [image 12 textonly]. In this case the image itself will not be displayed. Instead the title/alterative text associated with the image will be displayed as a link that points to the details page for that image. This is useful if you want to provide a link to an image but not the image itself.
• End the image tag with a url: [image 12 http://google.com] will make the image act as a link to that address. Make sure that the image is constructed in a way that makes it obvious that it is a link (remembering that what's obvious to you as an author may not be as apparent to others). Also note that you enter 'nolink' as the url it will force the image not to link to anywhere -- including the default behavior of linking to the details page.

All of these image attributes can be added to a single image. However, order is important. The correct order is shown in this example:

[image 12 left border defaultcaption 'better alternative text 'http://google.com]

Captions in the real world

Often you'll want to add a caption to an image but don't want to devote a lot of screen space to it. This is especially common since it's good practice to include image credits. Normally the defaultcaption option will do the trick. However you can use the manual caption option along with additional tags to achieve a more unique effect. For instance you can simulate the behavior of defaultcaption by combining the small and hidden tags with the image caption:

Show credits

Hide

Mammoth Terraces, Yellowstone National Park,photo courtesy of Brett Leigh Dicks.

 

This image makes full use of a lot of options. The code for it looks like this:

[image 3575 left border caption] 
[small][hidden 'credits']Mammoth Terraces, Yellowstone National Park, 
<em>photo courtesy of Brett Leigh Dicks.</em> 
[end hidden][end small][end caption] 

It's worth taking a minute or to get your head around what's actually going on here: the caption is shrunk with the [small] tag and then hidden.

Also, remember that [br clear] forces stuff below it to move out of the way of stuff above it. Useful when you've got text and images overlapping in odd ways.

Thumbnails

• [thumbnail 12] inserts a shrunken version of the image (150 pixels wide) which when clicked takes folks to a full-sized version of the image. You can specify a different width for the thumbnail by adding a number to the end of the tag (with a maximum of 2000 pixels). For instance [thumbnail 12 50] would create a 50 pixel wide thumbnail.
• As with images one can apply left and right justification, borders and captions. (urls won't work since thumbnails already point to their full-sized counterparts).
• Normally thumbnails act as links to the full-size image. However, adding detailpage to the end of the tag (as seen below) changes that behavior so that the thumbnail image acts as a link to the detail page for the image (which includes both the full-sized image as well as the description and other information).
• The full correct format for thumbnails is:

[thumbnail 12 50 left border caption detailpage]

Use thumbnails when it's important to have both a small and large version of an image around. If all you need is a small version just shrink the image to an appropriate size before you upload it.