Tense Code

Tense Log: Templates: image

Inserts a thumbnail for the specified image that can be clicked to view it full size. The image will be wrapped in a <div> with the specified class name.

Attributes

src: the path to the image, relative to the log’s home directory. Required.
class: any CSS class name. The default is “image”.
width: the maximum width of the thumbnail image in pixels. The default is “200”.
height: the height of the thumbnail image in pixels. The default is “300”, or the width if one was set.
title: text to display below the enlarged image when the thumbnail is clicked on.
popup: true or false. Whether or not the image should show in a popup display. The default is true.
href: an alternate URL to link to. If one is given then the full size image will not be displayed, and the popup attribute will be ignored.
crop: true, false, or a set of four coordinates separated by commas. The four coordinates are width, height, left offset, and top offset. When set to true the thumbnail image will be cropped to match the width and height exactly, showing as much of the image as possible in that area. If four coordinates are given, the image will be cropped to that area, showing as much as possible within the given thumbnail size. The default is false, which shows the entire image no larger than the specified size. Specifying coordinates requires ImageMagick.
overlay: an image to overlay on top of the thumbnail image. This is useful for adding borders or watermarks. It is recommended that you specify a PNG image that uses alpha transparency. The path should be relative to your log’s main address. This feature requires ImageMagick.

Example

<tenselog:image src="pictures/vacation.jpg" width="80" height="80" />

Changes

The title, popup, and href attributes were added in Tense Log 2.0 beta 2. The crop and overlay attributes were added in Tense Log 2.1.

Last updated May 04th, 2007