Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib
    Dec 12, 2011 @ 17:40
    Bjarne Fyrstenborg
    0

    Use variable as width

    Hi..

    I have done this to get the image:

    <img src="{concat('/ImageGen.ashx?Width=250&amp;Image=',./umbracoFile)}" alt="" />

    How can I use a imgWidth variable instead of 250 there when using concat in the src attribute?

    <xsl:variable name="imgWidth" select="'250'"/>

    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

  • Douglas Robar 3570 posts 4711 karma points MVP ∞ admin c-trib
    Dec 13, 2011 @ 17:53
    Douglas Robar
    0

    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. 

  • Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib
    Dec 13, 2011 @ 18:06
    Bjarne Fyrstenborg
    0

    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

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Dec 13, 2011 @ 20:15
    Jan Skovgaard
    1

    Hi Bjarne

    You should be able to use the variable width in the path like this

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

    That should do the trick for you.

    /Jan

  • Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib
    Dec 13, 2011 @ 20:18
    Bjarne Fyrstenborg
    0

    Hi Jan

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

    Bjarne 

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Dec 13, 2011 @ 20:24
    Jan Skovgaard
    0

    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

  • Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib
    Dec 13, 2011 @ 20:38
    Bjarne Fyrstenborg
    0

    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

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Dec 13, 2011 @ 20:43
    Jan Skovgaard
    0

    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

  • Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib
    Dec 13, 2011 @ 20:51
    Bjarne Fyrstenborg
    0

    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

  • Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib
    Dec 13, 2011 @ 21:00
    Bjarne Fyrstenborg
    0

    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

Please Sign in or register to post replies

Write your reply to:

Draft