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.
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.
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.
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:
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.
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..
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.
Use variable as width
Hi..
I have done this to get the image:
How can I use a imgWidth variable instead of 250 there when using concat in the src attribute?
I can't just use {$imgWidth} where 250 is placed.
Does the ImageGen have values to specify the height and width attribute of the scaled image?
Bjarne
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:
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 Bjarne
You should be able to use the variable width in the path like this
<img src="{concat('/ImageGen.ashx?Width=250&Image=',./umbracoFile,'&width='$imgWidth)}" id="productImage" alt='{$productName}' title="{$productName}" width="{$imgWidth}" height="{$imgHeight}" />
That should do the trick for you.
/Jan
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:
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...