There's no way for ImageGen to bring back the resulting sizes to put into a variables. You can often know the resulting size depending on the situation. For instance:

imagegen.ashx?image=myphoto.jpg&width=400&height=400&pad=true will always return an image that is 400x400.

cheers,
doug. 

Okay.. what does pad=true ? prevent the image from being pressed to fit that size or?

I have set the width of the image always to be 250px but the height can vary..
So I did this to set values of height and width attributes:

<xsl:variable name="imgWidth" select="'250'"/>
<xsl:variable name="scale" select="number(umbracoWidth) div $imgWidth"/>
<xsl:variable name="imgHeight" select="round(number(umbracoHeight) div $scale)"/>

<a href="#">
   <img src="{concat('/ImageGen.ashx?Width=250&amp;Image=',./umbracoFile)}" id="productImage" alt='{$productName}' title="{$productName}" width="{$imgWidth}" height="{$imgHeight}" />
</a> 

then the height is calculated from the width..
but I would like to use the imgWidth variable in the ImageGen string, so I only need to set the width once.

Bjarne

Hi Jan

Okay, I'll try that..
But the Width shouldn't be written twice? with Width=250 when using the variable..

Bjarne 

Hi Bjarne

You can omit the width attribute but please don't confuse the passed width to the handler width the passed width to the "width attribute" on the img tag.

However it's alway a best practice to specifically set the width and height attributes on the img tag (when possible) since it improves performance that the browser knows the dimensions when it's rendering the page. If omitted the browser needs to calculate the image dimensions itself.

/Jan

Okay, yes but I mean in the ImageGen String... the image isn't displayed correct with both width=250 and the imgWidth variable .. then the width is set twice in the string..

There was missing a comma too in your code, right before $imgWidth, but this works now:

<img src="{concat('/ImageGen.ashx?Image=',./umbracoFile,'&amp;Width=',$imgWidth)}" id="productImage" alt='{$productName}' title="{$productName}" width="{$imgWidth}" height="{$imgHeight}" />

Yes, that is exactly why I want to specify the width and height of on the img tag, cause the browser then knows the sizes from earlier and the site will load a bit faster.. otherwise the browser first knows the size of the image, when it has loaded the image.

And when I use a plugin like Cloud Zoom too on this page: http://sub.ak-security.dk/da/shop/lygter/led-lenser-p7.aspx you can actually see a difference.

Bjarne

Hi Bjarne...oh yeah, my bad :)

But you got it working in the end...

Hmm, I'm not sure I see the difference you're talking about? Seems fine to me?

/Jan

Yes, it works now, thanks :)

well you have to compare with how it was before the width and height on the img tag was specified.
the browser then doesn't know the height of the image before it's loaded and then the border around the img tag here: http://sub.ak-security.dk/da/shop/lygter/led-lenser-p7.aspx would have been compressed to the top as it doesn't know how heigt the image would be..

often in a image list like this: http://sub.ak-security.dk/da/aktuelt/galleri/21-aars-foedselsdag-plus-svendegilde.aspx it also doesn't know where to place the img tags on the page, before the images one by one is loaded.

when you have specified the height and width of the img tag I think the page load is more smooth.. especially when you have a border around the image, then you can see the difference.

Bjarne

If you try to reload this page a couple of times: http://sub.ak-security.dk/da/shop/lygter/led-lenser-p7.aspx you can see how it was before and see a small difference.

Notice the border around the image.. and it probably will load it faster when you have visited the site once.

Bjarne

is working on a reply...