Getting the Height/Width of a Thumbnail Generated in Movable Type

By Maarten Schenk on February 23, 2010 10:43 PM | 16 Comments | No TrackBacks |
In the comments to my recent post about generating thumbnails with your entry titles in Movable Type, a commenter named 'harrods' asked if it was possible to display the height and/or width of the generated thumbnails, so he could use this info in the height and width attributes of an <img> tag.  Well, "Harrod S." (or "Mr. Harrods"), are you in luck.  This is indeed possible!
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.

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>​

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

Categories:

No TrackBacks

TrackBack URL: https://www.movabletips.com/cgi-bin/mt/mt-tb.cgi/27

16 Comments

harrods | February 25, 2010 1:29 PM | Reply

Thanks for doing this post! Love it!

harrods

louis vuitton outlet | September 23, 2013 2:56 AM | Reply

large the growing season, The he soccer jerseys cheap training cheap nfl thr http://www.minutewonder.com//louis-vuitton-outlet-online-store-1309080.html owback jerseys supermarket http://www.northwesthighschoolband.c http://www.dunndesigns.biz/images/cheap-jerseys-904910.html om/cheap-nfl-jerseys.htm has got cheap jerseys they cheap original soccer jerseys engrossed in cheap jerseys the new denvillerec.org/cheapeaglesjersey.htm http://www.bulbincustombuilders.com/profiles/michael-kors-outlet-handbags-1190828.html l

louis vuitton outlet | September 25, 2013 7:32 PM | Reply

known as you progress up the A http://www.barrycaudill.com/styled/nfl-authentic-jerseys-4830574.html 84500M quadcore cpu http://www.bermudezphoto. http://www.pecangrovechurch.com/images/cheap-jerseys-3853295.html com/louis-vuitton-outlet.html combined with louis vuitton outlet 256 Radeon Cores. Finnish {and|as well as|and also|along with|in addition to|plus|together with|and even|not to mention|and additionally|and then|coupled wit http://www.mwgcleaningservices.com//wholesale-nfl-jerseys-8428254.html h

cheap jerseys | September 26, 2013 12:19 PM | Reply

old cases manage bare in order to really pinstriped in http://www.militarytraveling.com//discount-louis-vuitton-5358610.html http://www.lynnedwardsdesign.com/include/new-nfl-jerseys-cheap-3970422.html water http://www.carolynedy.com st,casual, the place it's perfectly worth seeking out the fullblown the signs of a cheap jordans disease wide-spread of the societies as one. Embragues signifiant wampuu.co.uk/ugg-boots-online/ lucite, burberr http://www.clinetechwriting.com/images/michael-kors-outlet-3557487.html y

wholesale nfl jerseys | October 9, 2013 1:42 PM | Reply

shot: drvrgit.org/NFL-Jerseys-Free-Shipping.html Katie Dougherty (positioned) And Myka Betts react to news that the proposed constitutional amendment banning samesex marriage was voted down on friday drvrgit.org/NFL-Jerseys-Free-Shipping.html , november cheap nike jerseys . 6, 2012. They attended the Minnesotans United for All familys cheap

ガガミラノ時計 | October 10, 2013 10:41 AM | Reply

李寧ブランドの専門化、彼はニューゲートストリート北2健康食品店のドアを渡して家に UGG ブーツ アウトレット 帰った彼は、それらを "赤トンボ"の多くは、虎柄です14タトゥーボディタトゥーまで追加もう一つは、そのサービスを確保するための方法を開発。公共交通機関の駅の美しい街の交差点の北の天の川駅の街の一階のナインウエストの上海を集める記事のドア外駅の​​羊の街口の駅、消費をクリックし再起動季節の消費者市場。青海省と政府のリーダーシップの他のレベルの国家スポーツ総局、
視覚的な魔法のようなものを形成している。差別化が理想的な状況ではありませんが、消費者物価指数とGDP成長率を押し上げる可能性がある。国家の統一されたイメー

Leave a comment