Umbraco not executing code before displaying it - image

Question

I am doing a Umbraco site (my first) and I am having a serious issue with loading an image on one of my pages.
I created a new template and one section of the code I inserted the following:
<a href="{umbraco.library:NiceUrl($currentPage/../#id)}">"
<xsl:value-of select="$currentPage/../#nodeName" />
</a>
When I look at the results in the browser it displays the results exactly the same, it does not get executed before rendering. ie I see this when I look at the "view source" in the browser:
<a href="{umbraco.library:NiceUrl($currentPage/../#id)}">
<xsl:value-of select="$currentPage/../#nodeName" />
</a>
The confusing part is that when I run the following :
<img src='<umbraco:Item field="articlePhoto" runat="server"></umbraco:Item>' />
It actually generates this tag :
<img src="~/media/554/bath.png">
The main thing I am trying to do is load a dynamic field/url into an image tag.
Any help would be greatly appreciated.
Thanks

Answer 1

I'm assuming you actually have two problems here and that they're not linked.
First Problem: Code not executing
You are trying to execute XSLT code directly inside the template. The template only accepts what you would normally find in a ASPX page (e.g. HTML, Server Controls, Registered Umbraco Controls etc) and will not parse any XSLT constructs but output them directly into the source, as exemplified in your question.
You will need to create an XSLT file in the developer section, along with it's associated macro, which is usually created automatically along with the XSLT. Then you simply import the macro into the template.
Template Snippet:
<umbraco:Macro Alias="MyMacro" runat="server" />
XSLT Snippet:
<a href="{umbraco.library:NiceUrl($currentPage/../#id)}">
<xsl:value-of select="$currentPage/../#nodeName" />
</a>
Second Problem: Image not showing
It's weird Umbraco is preprending the ~ symbol as your code is indeed correct (it's working on my Umbraco - Version 4.7.1). As a work-around, try creating an XSLT file and using the following XSLT code. At least with XSLT you're able to put in coding logic, which will be needed as your pages become more complex.
XSLT Snippet:
<xsl:if test="$currentPage/articlePhoto != ''">
<img src="{$currentPage/articlePhoto}" />
</xsl:if>
Hope that helps.