Images
As of March 2012 there are new more powerful image tag options as documented below. The old tags will continue to work and their details are included at the bottom of this page.
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 import to show at a large size. Ideally the uploaded file should be between 600 and 950 pixels wide to ensure it displays at a high enough quality across a range of screen sizes. Keep in mind that image files this wide (especially if they are tall) can be very slow to load. Be sure you've done the right things to minimize their file size and use these larger images only when required to achieve your goals for the page.
- [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. You should try to create images between 400 and 600 pixels wide if you want to display them with this tag.
- [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. You should try to upload images between 300 and 350 pixels wide if you want to display them with this tag.
- [thumbimage 12]- This tag will display a small version of the image. You should try to create images between 150 and 170 pixels wide if you want to display them with this tag.
In all cases the images displayed with these tags will dynamically rescale for different screen sizes. The pixels sizes recommend above will ensure that your images are of sufficient quality across all screen sizes without causing unnecessarily slow loading pages.
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]. With this option the caption will only be visible when a user hovers their mouse over the image itself. 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]
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 (950 pixels wide is a good target) 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. If you do want the image to link to another site instead of show a popup, 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]
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 noborder options. If both options are used, noshadow must come before noborder.
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.
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 the CMS: [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
Show old image and thumb tag documentation
HideAs 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).
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 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 alot 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:
This image makes full use of alot 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.
