Hi Colin,

Try this code

<xsl:variable name="media" select="umbraco.library:GetMedia($currentPage/bannerImage, 0)"/>

 <xsl:if test="$media">
    <xsl:variable name="url" select="$media/umbracoFile"/>
    <xsl:variable name="alt" select="$media/@nodeName"/>
    <xsl:variable name="width" select="$media/umbracoWidth"/>
    <xsl:variable name="height" select="$media/umbracoHeight"/>
       <img src="{$url}" width="{$width}" height="{$height}" alt="{$alt"}/>
 </xsl:if> 

Remember to change the bannerImage to your name of the field that you want to print out. And it´s the alias of the field, not the name.

You don´t the the with or height, It will also work with out setting this. So a shortcut could be.

<xsl:variable name="media" select="umbraco.library:GetMedia($currentPage/bannerImage, 0)"/>

 <xsl:if test="$media">
    <xsl:variable name="url" select="$media/umbracoFile"/>
    <xsl:variable name="alt" select="$media/@nodeName"/>
       <img src="{$url}" alt="{$alt"}/>
 </xsl:if> 

Hope you can print the image with this.

/Dennis

Hi Dennis, thanks, sorry I haven't been clear, the pictures are not displaying when I bring them into the page using the editing contant section. I have them in my media library, I choose them in the editor when but I publish them I get a number 1381 or something showing instead. I was told that I need to put in some xslt code to to make them display. Im not sure if that should be for the header or inline where the pictures appear in the template. Cheers for your help. Colin

HI Colin,

Yes you have to create an XSLT file in the Umbraco backend interface, and then when you create the XSLT it will also create a XSLT macro.

Then you have to add the code from my above post in the XSLT file (Remeber to change the alias of the field it match your own alias of the field that you want to print.). When you have done that, Then go to the Settings section --> Templates and find the template where you want the image to display. In click on the button insert macro, choose the macro to dispay the image.

Another alternative could be this: From Umbraco 4.11, there is a new control with name: umbraco:image. It is fairly simple to use, and should make it a bit easier to work with images. You use it like this:

<umbraco:Image runat="server" field="bannerImage" width="200" height="100" class="banner" />

And with the umbraco:Image tag you can print images in the templates.

It will output this:

<img src="/media/19/73006.jpg" width="200" height="100" class="banner" />

The with, height anden class are optional attributs.

I hope this explanation can help you

/Dennis

Thanks Dennis, I'll try it later. Thanks again Colin

Hi Colin,

Okay I will look forward to hear if you managed to print the image in your page. By using the XSLT or the by using the Umbraco Item for images. Or both methods that I have provide to you.

/Dennis

I forgot to mention if you have any question related to this topic that you have created, just keep asking in here.

/Dennis

Cheers a lot. Colin

Hi Colin,

Did you managed to get the image displayed on your site, using one of my suggestions. By using a speperate XSLT to display the image, or use the umbraco:Image control. I would look forward to hear if you succeed solve your problem.

/Dennis

Hi Dennis

Im ashamed to say no. Im probably being a bit thick with this but when I write the xslt it comes up with about 15 line of error meassages. Ive asked a friend who's an expert on this to help. Thanks for you help. Im not a lost cause yet.

best wishes

Colin

Hi Colin

Would you mind sharing the current code you're using? As well as the error messages that you're seeing? That will make it a lot easier to help you out instead of guessing :)

/Jan

Hi Jan

Thanks for any help you can give me. I probably need the code to go in the template as well.

Colin

Error occured

System.Xml.XmlException: Name cannot begin with the '}' character, hexadecimal value 0x7D. Line 25, position 73.
at System.Xml.XmlTextReaderImpl.Throw(Exception e)
at System.Xml.XmlTextReaderImpl.ParseAttributes()
at System.Xml.XmlTextReaderImpl.ParseElement()
at System.Xml.XmlTextReaderImpl.ParseElementContent()
at System.Xml.Xsl.Xslt.XsltInput.ReadTextNodes()
at System.Xml.Xsl.Xslt.XsltInput.ReadNextSibling()
at System.Xml.Xsl.Xslt.XsltLoader.LoadInstructions(List`1 content, InstructionFlags flags)
at System.Xml.Xsl.Xslt.XsltLoader.XslIf()
at System.Xml.Xsl.Xslt.XsltLoader.LoadInstructions(List`1 content, InstructionFlags flags)
at System.Xml.Xsl.Xslt.XsltLoader.LoadTemplate(NsDecl stylesheetNsList)
at System.Xml.Xsl.Xslt.XsltLoader.LoadRealStylesheet()
at System.Xml.Xsl.Xslt.XsltLoader.LoadDocument()
at System.Xml.Xsl.Xslt.XsltLoader.LoadStylesheet(XmlReader reader, Boolean include)

xslt:

/////////////////////////////////////

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:msxml="urn:schemas-microsoft-com:xslt"
  xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:tagsLib="urn:tagsLib" xmlns:BlogLibrary="urn:BlogLibrary" xmlns:google.maps="urn:google.maps"
  exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets tagsLib BlogLibrary google.maps ">


<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>

<xsl:template match="/">

<!-- start writing XSLT -->


 <xsl:if test="$media">
    <xsl:variable name="url" select="$media/umbracoFile"/>
    <xsl:variable name="alt" select="$media/@nodeName"/>
    <xsl:variable name="width" select="$media/umbracoWidth"/>
    <xsl:variable name="height" select="$media/umbracoHeight"/>
       <img src="{$url}" width="{$width}" height="{$height}" alt="{$alt"}/>
 </xsl:if>

</xsl:template>

</xsl:stylesheet>

Hi Jan

Thanks for any help you can give me. I probably need the code to go in the template as well.

Colin

Error occured

System.Xml.XmlException: Name cannot begin with the '}' character, hexadecimal value 0x7D. Line 25, position 73.
at System.Xml.XmlTextReaderImpl.Throw(Exception e)
at System.Xml.XmlTextReaderImpl.ParseAttributes()
at System.Xml.XmlTextReaderImpl.ParseElement()
at System.Xml.XmlTextReaderImpl.ParseElementContent()
at System.Xml.Xsl.Xslt.XsltInput.ReadTextNodes()
at System.Xml.Xsl.Xslt.XsltInput.ReadNextSibling()
at System.Xml.Xsl.Xslt.XsltLoader.LoadInstructions(List`1 content, InstructionFlags flags)
at System.Xml.Xsl.Xslt.XsltLoader.XslIf()
at System.Xml.Xsl.Xslt.XsltLoader.LoadInstructions(List`1 content, InstructionFlags flags)
at System.Xml.Xsl.Xslt.XsltLoader.LoadTemplate(NsDecl stylesheetNsList)
at System.Xml.Xsl.Xslt.XsltLoader.LoadRealStylesheet()
at System.Xml.Xsl.Xslt.XsltLoader.LoadDocument()
at System.Xml.Xsl.Xslt.XsltLoader.LoadStylesheet(XmlReader reader, Boolean include)

xslt:

/////////////////////////////////////

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:msxml="urn:schemas-microsoft-com:xslt"
  xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:tagsLib="urn:tagsLib" xmlns:BlogLibrary="urn:BlogLibrary" xmlns:google.maps="urn:google.maps"
  exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets tagsLib BlogLibrary google.maps ">


<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>

<xsl:template match="/">

<!-- start writing XSLT -->


 <xsl:if test="$media">
    <xsl:variable name="url" select="$media/umbracoFile"/>
    <xsl:variable name="alt" select="$media/@nodeName"/>
    <xsl:variable name="width" select="$media/umbracoWidth"/>
    <xsl:variable name="height" select="$media/umbracoHeight"/>
       <img src="{$url}" width="{$width}" height="{$height}" alt="{$alt"}/>
 </xsl:if>

</xsl:template>

</xsl:stylesheet>

Hi Colin,

I think I spotted whats give you the error.

<xsl:variable name="media" select="umbraco.library:GetMedia($currentPage/bannerImage, 0)"/>

<xsl:if test="$media">
    <xsl:variable name="url" select="$media/umbracoFile"/>
    <xsl:variable name="alt" select="$media/@nodeName"/>
    <xsl:variable name="width" select="$media/umbracoWidth"/>
    <xsl:variable name="height" select="$media/umbracoHeight"/>
       <img src="{$url}" width="{$width}" height="{$height}" alt="{$alt}"/>
</xsl:if> 

Try this one instead. The error came because the last " at the alt="{alt"} was inside the curly brackets.

And you have to change the banner image alias to to the alias of the field that contains the image in your Umbraco backend. Maybe you can tell us what the alias of the field is, so we can help you to the end where your image is displaying on the site.

/Dennis

Hi Dennis

Still an error, sorry. Pls see below, best Colin.

Error occured

System.Xml.XmlException: The '=' character, hexadecimal value 0x3D, cannot be included in a name. Line 20, position 13.
at System.Xml.XmlTextReaderImpl.Throw(Exception e)
at System.Xml.XmlTextReaderImpl.ParseElement()
at System.Xml.XmlTextReaderImpl.ParseElementContent()
at System.Xml.Xsl.Xslt.XsltInput.ReadTextNodes()
at System.Xml.Xsl.Xslt.XsltInput.ReadNextSibling()
at System.Xml.Xsl.Xslt.XsltLoader.LoadInstructions(List`1 content, InstructionFlags flags)
at System.Xml.Xsl.Xslt.XsltLoader.LoadTemplate(NsDecl stylesheetNsList)
at System.Xml.Xsl.Xslt.XsltLoader.LoadRealStylesheet()
at System.Xml.Xsl.Xslt.XsltLoader.LoadDocument()
at System.Xml.Xsl.Xslt.XsltLoader.LoadStylesheet(XmlReader reader, Boolean include)

Hi Colin,

Did you remember to change the variable to the alias of your field. Could you please tell me what the alias of the field that contains the image in the backend is.

The alias can you see on the document type for the page that contains the image.

<xsl:variable name="media" select="umbraco.library:GetMedia($currentPage/bannerImage, 0)"/>

<xsl:if test="$media">
    <xsl:variable name="url" select="$media/umbracoFile"/>
    <xsl:variable name="alt" select="$media/@nodeName"/>
    <xsl:variable name="width" select="$media/umbracoWidth"/>
    <xsl:variable name="height" select="$media/umbracoHeight"/>
       <img src="{$url}" width="{$width}" height="{$height}" alt="{$alt}"/>
</xsl:if>

/Dennis

Hi Dennis

Thanks for all this, no error message but picture is not displaying, but the ref number has disappeared, interesting. The code on the page, the whole div, is:

<xsl:variable name="media" select="umbraco.library:GetMedia($currentPage/mainPhototop, 0)"/>
  <!--  <umbraco:Item field="mainPhototop" runat="server" /> --> <umbraco:Item field="stSecondRowPhoto" runat="server" /> <umbraco:Item field="ndSecondRowPhoto" runat="server" />
      <p><umbraco:Item field="projectMainText" runat="server" /></p>
      <div class="spacer40px"></div>
    </div>

What do I have to do to get all my pictures to display, write one for each alias or list them?

Very grateful for your help.

Best

Colin

Hi Colin,

Did you have an for-each loop or did you have multiple media pickers on the page, that you asign an image too?

If you have multiple media picker you want to print then you can:

<xsl:if test="$currentPage/mainPhototop!=''">
        <xsl:variable name="media" select="umbraco.library:GetMedia($currentPage/mainPhototop, 0)"/>
        <xsl:variable name="url" select="$media/umbracoFile"/>
        <xsl:variable name="alt" select="$media/@nodeName"/>
        <xsl:variable name="width" select="$media/umbracoWidth"/>
        <xsl:variable name="height" select="$media/umbracoHeight"/>
               <img src="{$url}" width="{$width}" height="{$height}" alt="{$alt}"/>
</xsl:if>

<xsl:if test="$currentPage/mainPhototopTwo!=''">
        <xsl:variable name="media" select="umbraco.library:GetMedia($currentPage/mainPhototopTwo, 0)"/>
        <xsl:variable name="url" select="$media/umbracoFile"/>
        <xsl:variable name="alt" select="$media/@nodeName"/>
        <xsl:variable name="width" select="$media/umbracoWidth"/>
        <xsl:variable name="height" select="$media/umbracoHeight"/>
               <img src="{$url}" width="{$width}" height="{$height}" alt="{$alt}"/>
</xsl:if>

Did you remember to add the marco to the template. To render the content of the XSLT

Hi Dennis, the pictures are displaying!! Do i write a separate xslt for each div where pictures are displayed with all of the alias's listed like your's above and accross all the templates displaying pictures? I assume so.

This is brilliant !!

Thanks

Colin

Hi Dennis

Thanks for all your help, Im very grateful for this sort of help as Im primarily a designer, not a programmer and it come hard to me. Im up and away with this now. I really like Umbraco and want to get good at it.

best wishes

Colin

Okay Colin I´m glad that I finally could help you get your images to show on your webpage.

If you have other questions about Umbraco just create a new topic in the forum and then  ask your questions.

Colin I think that you should mark is question as solved so it helps others too. And they can se was worked for you.

The way you mark a quesiton as solved is like this:

You find the right answer. Then find the person who have give you the solution, to solve your problem There you see a green tick, hit this green tick and you have marked your question as solved.

/Dennis

is working on a reply...