Templates: Junecode: 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 site’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.
fullwidth: the maximum width, in pixels, of the pop-up image that’s displayed when the smaller thumbnail image is clicked. The default is to display the full size image.
fullheight: the maximum height, in pixels, of the pop-up image that’s displayed when the smaller thumbnail image is clicked. The default is to display the full size image.
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. Set href=”“ if you don’t want the thumbnail image to be clickable at all.
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 site’s main address. This feature requires ImageMagick.
Example
<junecode:image src="pictures/vacation.jpg" width="80" height="80" />
Changes
The title, popup, and href attributes were added in version 2.0 beta 2. The crop and overlay attributes were added in version 2.1. The fullwidth and fullheight attributes, and the option to set href=”“, were added in Junecode 3.0.