Thumbnails without Stretching or Compression in Movable Type

| 5 Comments | No TrackBacks |
Using the AssetThumbnailURL tag it is perfectly possible to create a thumbnail of any image asset in Movable Type, with any required height or width.  If you set only the height, the width will be rescaled proportionally, and vice versa.  But what if you need to set both the height and the width (for example because you want to display a nice, rectangular image in your sidebar and the rectangle has to be completely filled) yet you don't want the resulting image to look too stretched or compressed?
I recently had to deal with such a situation, and here is what I came up with.  I created a template module named "Smart Thumbnail" which contained following code:

<mt:setvarblock name="output">
<mt:assetproperty property="image_width" setvar="width">
<mt:assetproperty property="image_height" setvar="height">

<mt:var name="width" op="/" value="$height" setvar="ratio">
<mt:var name="maxwidth" op="/" value="$maxheight" setvar="maxratio">

<div style="width:<mt:var name="maxwidth">px;height:<mt:var name="maxheight">px;overflow:hidden">
<mt:if name="ratio" lt="$maxratio">
<mt:var name="width" op="/" value="$maxwidth" setvar="ratio">
<mt:var name="height" op="/" value="$ratio" setvar="newheight">
<mt:var name="newheight" op="-" value="$maxheight" setvar="displacement">
<mt:var name="displacement" op="/" value="2" setvar="displacement">
<img src="<mt:assetthumbnailurl width="$maxwidth">" style="position:relative;bottom:<mt:var name="displacement" regex_replace="/\.\d+/","">px" alt="<mt:var name="alt">">
<mt:var name="height" op="/" value="$maxheight" setvar="ratio">
<mt:var name="width" op="/" value="$ratio" setvar="newwidth">
<mt:var name="newwidth" op="-" value="$maxwidth" setvar="displacement">
<mt:var name="displacement" op="/" value="2" setvar="displacement">
<img src="<mt:assetthumbnailurl height="$maxheight">" style="position:relative;right:<mt:var name="displacement" regex_replace="/\.\d+/","">px" alt="<mt:var name="alt">">

</mt:setvarblock><mt:var name="output" regex_replace="/\n*/gsi","">​

This module can be called anywere in an image Asset context, like this:

<mt:include module="Smart Thumbnail" maxheight="100" maxwidth="50" alt="bla bla bla">

The resulting output would be a div of 100 by 50 pixels, with a thumbnail of the asset as background, resized in such a way that it covers the entire area of the div with (potentially) a side that is a little higher or wider than the div.  But because the div has the style property 'overflow:hidden', this part of the image is not visible. Also, to make sure the 'interesting' part of the image is shown, the background image is centered within the div.

Compare the results:


The first image is thumbnailed to completely fill a 200x100 rectangle, using the classic thumbnailing method.  The second uses the 'Smart Thumbnail' module.  As you can see, the first method compresses the image, the second one doesn't (losing a part of the image in the process, unfortunately).  In both cases the rectangle is fully covered, but personally I think the second one looks better...

No TrackBacks

TrackBack URL:


Great idea about the 'smart thumbnail'!

Another useful tool is Better File Uploader, especially if you want to manage multiple uploads.

Hello, just wanted to say, I enjoyed this article. It was inspiring.
Keep on posting!

Hi there! This is kind of off topic but I need some advice from an established blog.
Is it difficult to set up your own blog? I'm not very techincal but I can figure things out pretty fast. I'm thinking about setting up
my own but I'm not sure where to start. Do you have any tips or suggestions? Appreciate it

Minimize Physiqe Fat

Leave a comment