The easiest would be if there were just some template tags you could use to get this information directly. Unfortunately, there aren't any tags like that, but with a little bit of trickery we can still get at this information, and we don't even need fancy javascript tricks or PHP code to do it.
Original height: 129
Original width: 133
Thumbnail height: 50
Thumbnail width: 51
Original height: 380
Original width: 790
Thumbnail height: 50
Thumbnail width: 103
Original height: 241
Original width: 861
Thumbnail height: 50
Thumbnail width: 178
Original height: 297
Original width: 267
Thumbnail height: 50
Thumbnail width: 44
Original height: 256
Original width: 256
Thumbnail height: 50
Thumbnail width: 50
Original height: 477
Original width: 482
Thumbnail height: 50
Thumbnail width: 50
Original height: 350
Original width: 350
Thumbnail height: 50
Thumbnail width: 50
Here is a little code snippet that illustrates how you can do it using just Movable Type template tags:
<mt:entries lastn="5">
<mt:entryassets type="image">
<img src="<mt:assetthumbnailurl height="50">"><br>
<mt:setvarblock name="height"><mt:assetproperty property="image_height"></mt:setvarblock>
<mt:setvarblock name="width"><mt:assetproperty property="image_width"></mt:setvarblock>
Original height: <mt:var name="height"><br>
Original width: <mt:var name="width"><br>
<mt:setvarblock name="ratio"><mt:var name="height" op="/" value="50"></mt:setvarblock>
Thumbnail height: 50<br>
Thumbnail width: <mt:var name="width" op="/" value="$ratio" regex_replace="/\.\d+/",""><br>
<br>
</mt:entryassets>
</mt:entries>
<mt:entryassets type="image">
<img src="<mt:assetthumbnailurl height="50">"><br>
<mt:setvarblock name="height"><mt:assetproperty property="image_height"></mt:setvarblock>
<mt:setvarblock name="width"><mt:assetproperty property="image_width"></mt:setvarblock>
Original height: <mt:var name="height"><br>
Original width: <mt:var name="width"><br>
<mt:setvarblock name="ratio"><mt:var name="height" op="/" value="50"></mt:setvarblock>
Thumbnail height: 50<br>
Thumbnail width: <mt:var name="width" op="/" value="$ratio" regex_replace="/\.\d+/",""><br>
<br>
</mt:entryassets>
</mt:entries>
Let's go over this line by line, shall we? The first three lines are pretty standard basic stuff: loop over the 5 most recent entries, and display a thumbnail of each image found in them scaled to a height of 50 pixels.
Next, we use the <mt:setvarblock> and <mt:assetproperty> tags to capture the height and width of the original image. For illustrative purposes we also display these values.
The line that follows is the most important one: we use the "op" attribute of the <mt:var> tag to calculate the ratio between the height of the original image and the height of the thumbnail (50). We store this in the $ratio variable.
Then we display the (known) height of the thumbnail, followed by the (calculated) width. Dividing the original width by the ratio gives us the new width. We use a "regex_replace" attribute to get rid of the numbers after the decimal point (and the decimal point). And voila, height and width of the thumbnail are known...
Here is the example output generated by this piece of code:
Original height: 129
Original width: 133
Thumbnail height: 50
Thumbnail width: 51
Original height: 380
Original width: 790
Thumbnail height: 50
Thumbnail width: 103
Original height: 241
Original width: 861
Thumbnail height: 50
Thumbnail width: 178
Original height: 297
Original width: 267
Thumbnail height: 50
Thumbnail width: 44
Original height: 256
Original width: 256
Thumbnail height: 50
Thumbnail width: 50
Original height: 477
Original width: 482
Thumbnail height: 50
Thumbnail width: 50
Original height: 350
Original width: 350
Thumbnail height: 50
Thumbnail width: 50
Thanks for doing this post! Love it!
harrods