Copied to clipboard

Flag this post as spam?

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

  • Luke Johnson 61 posts 80 karma points
    Aug 05, 2011 @ 16:29
    Luke Johnson

    How can I use xsl:value-of in image path <img src = "<xsl:value-of>" />

    Using XSLT, I am drawing data from a SQL database. The thumbnail column returns the end of an image path - photo_thumbnail.jpg. I call the thumbnail in an <xsl:value-of>, and I am trying to append this thumbnail data to the end of an image path:

    <img src = "/folder/images/<xsl:value-of select='thumbnail' />" />

    but I get an error. I understand that < > can't be part of an image path, but I'm not sure what syntax changes I need to make this work. I am going about this the wrong way? How can I include <xsl:value-of> as part of a file path?

  • Rich Green 2246 posts 3956 karma points
    Aug 05, 2011 @ 16:40
    Rich Green

    Hey Luke,

    Try something like

    <img><xsl:attribute name="src">/folder/images/<xsl:value-of select='thumbnail' /></xsl:attribute></img>


  • Peter Dijksterhuis 1442 posts 1722 karma points
    Aug 05, 2011 @ 16:40
    Peter Dijksterhuis

    Hi Luke,

    try this:

    <xsl:attribute name="src>/folder/images/<xsl:value-of select="thumbnail"/></xsl:attribute>


  • Luke Johnson 61 posts 80 karma points
    Aug 05, 2011 @ 17:42
    Luke Johnson

    I managed to rough it out with CDATA:


    <xsl:text disable-output-escaping="yes"><![CDATA[<img src = "/folder/images/]]></xsl:text>
    <xsl:value-of select="thumbnail"/>
    <xsl:text disable-output-escaping="yes"><![CDATA[" />]]></xsl:text>

    But it is much cleaner to use the attribute method you suggested. Thanks!

  • Richard 146 posts 168 karma points
    Aug 05, 2011 @ 18:32

    You could also do it:

    <img src="{concat('/folder/images/',thumbnail)}"/>


  • Laurence Gillian 595 posts 1212 karma points
    Aug 05, 2011 @ 18:48
    Laurence Gillian

    Above is perfectly correct, or you could simplify it further too...

    <img src="/path/{file}" alt="" />

    Curly brackets allow you to pass a value into a attribute (e.g src, alt, href). Hehe don't forgot the ALT tag ;)

    Laurie : - }

  • Luke Johnson 61 posts 80 karma points
    Aug 05, 2011 @ 19:58
    Luke Johnson


    Laurie, if I use {file} in the path, I assume I would need to declare it as a variable?

    Something like this?

    <xsl:variable name = "file"><xsl:value-ofselect='thumbnail'/></xsl:variable>
  • Chriztian Steinmeier 2715 posts 8162 karma points MVP 4x admin c-trib
    Aug 05, 2011 @ 22:03
    Chriztian Steinmeier

    Hi Luke,

    Here's a couple of rules of thumb:

    * Generally, use the curly braces like you use <xsl:value-of /> but output goes inside an attribute value (they're called an "Attribute Value Template"), e.g.:

    <a href="{url}">link</a>

    * Use the <xsl:attribute> version when you need to do complicated logic determining the value; If you don't know the name of the attribute or if you don't always want the attribute added:

        <xsl:attribute name="class">
            <xsl:if test="*[@isDoc]">
                <xsl:text> hasChildren</xsl:text>
        <xsl:attribute name="$class-or-id">
            <xsl:value-of select="$identifier" />
        <xsl:if test="@id = $currentPage/@id">
            <xsl:attribute name="class">selected</xsl:attribute>

    * Never use the <xsl:text disable-output-escaping="yes"> with CDATA hack - it's meant to be so ugly and verbose so it works as a flag that says "this is wrong, wrong, wrong" :-)

    Regarding the {file} thing: Whatever you write in there is effectively an XPath expression, so if you're inside a template that matches an Image element (nodes in the Media section looks like that), you can access the child nodes using their aliases, like this:

    <xsl:template match="Image">
        <img src="{umbracoFile}" width="{umbracoWidth}" height="{umbracoHeight}" alt="{@nodeName}" />

    (So you don't have to create a variable).


Please Sign in or register to post replies

Write your reply to: