thumbnail (Smarty extension function)
The {thumbnail} function is at the center of Siteframe's ability to provide dynamically-sized images on demand. It creates resampled versions of uploaded image files with special features and caching.
Syntax
{thumbnail file="string" type="string" size=integer center=boolean rotate=integer}
When invoked, the function returns the name of a file that meets the desired constraints, and this is thus used as the value of an <img src=""> tag:
<img src="{thumbnail file="somefile.jpg" type="$type" size=300}" alt="" />
The parameters for {thumbnail} are:
- file (required): the name of the source image file.
- type (required): the MIME type of the source image file (e.g., "image/jpeg").
- size (required): the desired size (in pixels) of the longest edge of the resized image.
- center: if true, then a sizeXsize section is cropped from the central part of the image. This results in a square thumbnail that can be useful for certain web layouts.
- rotate: an integer from 0..360 that directs the resulting thumbnail to be rotated the specified number of degrees.
Configuration
The configuration variable image_quality (set in siteframe.ini) determines the quality of resized JPEG images. A lower number means smaller files and lower quality, while a larger number means larger files and higher quality. Image quality is set on a site-wide basis and cannot be adjusted individually for each file.
Side Effects
There are some side-effects of the thumbnail call. After the image is resized, the following Smarty template variables are set:
- im_w: the width of the resized image (in pixels)
- im_h: the height of the resized image (in pixels)
These can be used in the <img height= width= /> attributes.
Examples
The {thumbnail} function is usually seen in the context of a template block function or loop. Here is an example that displays the most recent images for a user:
{recent_images user=$user.user_id}
<div class="thumbnail">
<a href="{$file.url}"><img src="{thumbnail
file=$file.file_path type=$file.file_type size=100 center=true}"
alt="{$file.file_name}" /></a>
</div>
{/recent_images}
In this example, a "thumbnail" div is created for each recent image for the user.
