The Thumbnails plugin works well with the AssociatedFiles plugin. The example below (this time in coffeekup) will display 100x100 thumbnails of all images associated with the document using the AssociatedFiles plugin, with a link to the full-size image:

Presets are basically aliases for a set of image parameters that you can define in your docpad configuration. Using presets can be more convenient than specifying parameters for each image individually, and helps your site stay consistent. For example, in your docpad.coffee file you might define the following:

plugins:

thumbnails:

presets:

'default':

w: 200

h: 200

q: 90

'small':

w: 100

h: 100

'medium':

w: 300

h: 300

'large':

w: 500

h: 500

If no parameters (or preset names) are passed to the @getThumbnail() function, then the default parameters will be used. Given the above configuration, the example below will resize the image to 200x200 at 90% quality.

<img src="<%= @getThumbnail("images/image1.jpg") %>" alt="my image">

You can pass multiple parameters to the @getThumbnails() call, and they will be applied from left to right. For example, you could use the default height and quality parameters and just override the width as follows:

A thumbnail target defines the set of operations to be performed by the plugin. If no target is specified then the default target is executed, which specifies a basic resize operation. Given that, the following example:

The plugin includes another target, zoomcrop, which center-crops the image to the exact width and height supplied, rather than just fitting the image into those boundaries. To specify the zoomcrop target, just change the example to:

Note that targets and presets can be passed to @getThumbnail in any order, and intermixed as you like. The only caveat is that a target and preset cannot have the same name, otherwise the plugin won't know which one you're talking about.

Note however that in contrast to the presets, the default target is only run if no other targets are specified. So for the above example, the image is not resized at all.

By default the plugin supports jpeg and png files. If you wish to use other formats that are supported by ImageMagick/GraphicsMagick you can override the extensions option. This limits the file extensions that are allowed to be passed through the plugin.