Copied to clipboard

Flag this post as spam?

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


  • Colin Watson 17 posts 47 karma points
    Oct 18, 2013 @ 15:04
    Colin Watson
    0

    Pictures not displaying

    Im new to Umbraco. My photographs from the Media Library are just showing as numbers in my page when it renders, Im told I need some xslt script to enable them to display properly. Can anyone give this or point me in the right direction? many thanks Colin

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Oct 18, 2013 @ 17:57
    Dennis Aaen
    0

    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

  • Colin Watson 17 posts 47 karma points
    Oct 18, 2013 @ 18:17
    Colin Watson
    0

    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

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Oct 18, 2013 @ 18:30
    Dennis Aaen
    1

    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

  • Colin Watson 17 posts 47 karma points
    Oct 18, 2013 @ 18:53
    Colin Watson
    0

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

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Oct 18, 2013 @ 18:59
    Dennis Aaen
    0

    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

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Oct 18, 2013 @ 19:10
    Dennis Aaen
    0

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

    /Dennis

  • Colin Watson 17 posts 47 karma points
    Oct 18, 2013 @ 19:20
    Colin Watson
    0

    Cheers a lot. Colin

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Oct 22, 2013 @ 08:14
    Dennis Aaen
    0

    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

  • Colin Watson 17 posts 47 karma points
    Oct 22, 2013 @ 14:06
    Colin Watson
    0

    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

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Oct 22, 2013 @ 19:48
    Jan Skovgaard
    0

    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

  • Colin Watson 17 posts 47 karma points
    Oct 22, 2013 @ 19:58
    Colin Watson
    0

    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>

     

     

     

  • Colin Watson 17 posts 47 karma points
    Oct 22, 2013 @ 19:58
    Colin Watson
    0

    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>

     

     

     

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Oct 22, 2013 @ 20:19
    Dennis Aaen
    0

    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

  • Colin Watson 17 posts 47 karma points
    Oct 22, 2013 @ 20:27
    Colin Watson
    0

    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)

     

     

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Oct 22, 2013 @ 20:30
    Dennis Aaen
    0

    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

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Oct 22, 2013 @ 22:33
    Dennis Aaen
    0

    Hi again Colin,

    Just to make sure that you dont get an error if the field is empty, I have rewritten the if statement. And again you have to chage to the alias that contains the image in the backoffice of your Umbraco, for the specific page.

    <xsl:if test="$currentPage/fieldAlias!=''">
            <xsl:variable name="media" select="umbraco.library:GetMedia($currentPage/fieldAlias, 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>

    And remember to change the fieldAlias to the actually alias for the field you want to pull out :-)

    With this piece of code I really hope you can get it to work.

    /Dennis

  • Colin Watson 17 posts 47 karma points
    Oct 23, 2013 @ 13:09
    Colin Watson
    0

    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

     


     

     

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Oct 23, 2013 @ 13:44
    Dennis Aaen
    0

    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

  • Colin Watson 17 posts 47 karma points
    Oct 23, 2013 @ 14:30
    Colin Watson
    0

    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

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Oct 23, 2013 @ 15:13
    Dennis Aaen
    100

    Hi Colin,

    No what you can do and what I do the most. I make an XSLT file for each type of page so I don´t use the umbraco:item  often to pull data out.

    So if I had a product page I make an XSLT file named productPage and then add all my markup for that type of page, and pull data out by using XSLT.

    So if you do it that way you just add the macro to template where the data should show.

    I hope that I have description is easy to understand.

    And good pictures are displaying finally :-)

    /Dennis

  • Colin Watson 17 posts 47 karma points
    Oct 23, 2013 @ 15:28
    Colin Watson
    0

    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

     

     

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Oct 23, 2013 @ 15:42
    Dennis Aaen
    0

    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

Please Sign in or register to post replies

Write your reply to:

Draft