When a visitor uploads an image attachment, you may sometimes wish to show that image at a smaller size than it actually is. While CSS allows constricting the size in the img tag, this is a bad idea because the browser still has to download the full image, thus annoying modem users and wasting your bandwidth. The solution to this is thumbnails -- automatically generated miniature versions of the images.
Note that usage of thumbnails requires PHP's GD library, which is bundled with PHP 4.3.0+, or ImageMagick. Under settings->files in your admin panel you need to select your graphics method, either GD or ImageMagick.
The default templates already have code for displaying attachments in them, but for educational purposes we'll discuss how to show them anyhow. To use thumbnails in WSN for a listing, the simplest thing you can do is write {LINKTHUMBIMAGE}. That'll display a standard sized thumnail of the first attached image on the listing (standard size is set at Admin -> Settings -> Files). To customize the size, you can pass pixel width and height parameters like this: {LINKTHUMBIMAGE[60 <,> 50]} (this limits to a maximum width of 60px and height of 50px). To get a later image instead of the first image, pass the image number third parameter: {LINKTHUMBIMAGE[60 <,> 50 <,> 2]} to get the second image. To get only a specific image type, you can pass the file extension as the first parameter: {LINKTHUMBIMAGE[png]} to show the first PNG image the listing has. If the listing doesn't have the requested image, of course, nothing will be shown.
Anywhere you'd like to just get the URL of the thumbnail -- instead of the full img tag for display -- you can use {LINKTHUMBURL in place of {LINKTHUMBIMAGE.
There are also special spots in your template which display a series of attachments in order and use {ATTACH template variables. For example, on the listing details template there's the <!-- BEGIN LINK ATTACHMENTS --> area:
By default, thumbnails retain the aspect ratio of the original image. Thus they will not come out to exactly the dimensions you specify, those are only the maximum dimensions. If you'd like to force them to the requested size even if that distorts the aspect ratio or enlarges them, go to Admin -> Settings -> Files and set "Always use fixed thumbnail size rather than proportional?" to "yes". If you want to do that just for a particular spot, the easist approach is to simply style the img tag, like this: <img src="{LINKTHUMBURL[60 <,> 50]}" style="width: 60px; height: 50px;">
Thumbnails for Non-Visual Files
Sometimes you'd like to show a thumbnail of something that's not an image. To accomplish this, you can create a default thumbnail for each filetype. Simply save the default thumbnail as fileextension.png in your templates/images_default directory (or templates/images_yourstylename depending on the name of your current style). For example, for mp3 files you'd make mp3.png. For MS Word DOCX files you'd do docx.png.
Default Thumbnail
When no thumbnail can be generated for some reason, templates/images_yourstylename/nothumbnail.png is used.
Thumbnails for Custom File Fields
Custom file fields work a bit differently than regular file attachments, please see Custom File Attachment Fields to learn how to do a thumbnail on those.