Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

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


  • Keith Jackson 183 posts 552 karma points
    Jun 01, 2011 @ 11:31
    Keith Jackson
    0

    How do I show an image?

    I know this is a newbie question, but how can I show an image, added with the upload picker in the content editor screen on the final page?

    The umbraco:item tag just shows the URL text.

    I've tried creating an XSLT macro to do this, but I can't seem to figure out how to pass a variable to the XSLT macro for the URL path. I know I can specify fields in the Macro directly, but I'd rather not do that if possibvle so I don't end up creating lots of XSLT Macros to load all of my image fields.

    Here's what I've cobbled together so far...

      <xsl:output method="xml" omit-xml-declaration="yes"/>  
      <xsl:param name="imagePath"/>
      
      <xsl:template match="/">
        imagePath = <xsl:value-of select="$imagePath"/><br/>
          <xsl:if test="$imagePath != '' ">
            <xsl:element name="img">
              <xsl:attribute name="src">
                <xsl:value-of select="$imagePath" />
              </xsl:attribute>
            </xsl:element>
          </xsl:if>
      </xsl:template>

    </xsl:stylesheet>

    Copy Link
  • Sean Holmesby 61 posts 82 karma points
    Jun 02, 2011 @ 00:58
    Sean Holmesby
    0

    I think you have to add a little bit to your param to select the parameter being passed in.

    <xsl:param name="imagePath" select="/macro/imagePath"/>

    Copy Link
  • Keith Jackson 183 posts 552 karma points
    Jun 02, 2011 @ 12:08
    Keith Jackson
    1

     

    Thanks Sean - That really set me off well to get this working! For those who are interested here’s the complete solution for a page with simple image display from Upload using both RAZOR and XSLT. First, the XSLT Macro…

     

    <xsl:output method="xml" omit-xml-declaration="yes"/>
    <xsl:param name="imagePath" select="/macro/imagePath"/>
    <xsl:template match="/">
    <xsl:if test="$imagePath != '' ">
    <xsl:element name="img">
    <xsl:attribute name="src">
    <xsl:value-of select="$imagePath" />
    </xsl:attribute>
    </xsl:element>
    </xsl:if>
    </xsl:template>

     

    To make this work I added a property to the Macro declaration with an alias of ‘imagePath’ and a name of ‘Image Path’. This was the key penny that had failed to drop for me.

    Here’s the page template itself, showing the same content twice. Once with RAZOR and once with XSLT. Personally I find the RAZOR syntax a lot more lightweight for this but it’s more personal preference than anything else I guess, as once you have the XSLT Macro you can re-use it anywhere…

     

    <%@ Master Language="C#" MasterPageFile="~/masterpages/StandardLayout.master" AutoEventWireup="true" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="innerContent" runat="server">
    <h3>RAZOR...</h3>
    <umbraco:Macro runat="server" language="cshtml">
    <img src="@Model.photo" alt="@Model.photo"/>
    </umbraco:Macro>
    <br/>
    <h3>XSLT...</h3>
    <umbraco:Macro imagePath="[#photo]" Alias="ImageDisplay" runat="server"></umbraco:Macro>
    </asp:Content>

     

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft