Copied to clipboard

Flag this post as spam?

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


  • Stephen 47 posts 69 karma points
    Aug 30, 2011 @ 15:49
    Stephen
    0

    How to display a list of icons using xslt

    Hello,

    This is my first post so please forgive me if I my question is poorly phrased or belongs elsewhere.
    I can list a series of document using xslt but I want to be able to show an accompany image with each listing.

    The documents I am listing each have an image field, called 'icon'...the data Type is Media Picker.

    I am trying include the icon as part of the listing but can't get it to work. I've really tried to understand other postings on this but I think I'm too much of a newbie. Other postings I have seen don't work for me, but I'm sure I'm missing something.

    Any help would be greatly appreciated.

     

    Thanks

     

    Steve

     

  • Rich Green 2245 posts 3918 karma points
    Aug 30, 2011 @ 16:11
    Rich Green
    0

    Hey Steve,

    Welcome to the forum!

    To render the image is not too diffcult, especially if you already have the listing working already.

    For details of how to render the image have a look at this sample code here http://blog.leekelleher.com/2010/08/11/how-to-use-umbraco-library-getmedia-in-xslt-for-umbraco-v4-5/

    Rich

  • Stephen 47 posts 69 karma points
    Aug 30, 2011 @ 16:34
    Stephen
    0

    Hello Rich,

    Thanks for the rapid response. It's a great introduction to the forum community have such a quick answer.

    I had seen that page but I'm not exactly a code so it was lost on me a bit.

    What I probably need is a step by step walk through that a novice like me could understand.

    Despite my amateur status I have managed to create a list of document using xslt. And each item in the list links to the relevant document.

    When I click through to the document I am able to disply the approprite media image. But try as I might I am unable to show the same image data in list format.

    Steve

     

  • Rasmus Berntsen 213 posts 251 karma points c-trib
    Aug 30, 2011 @ 19:31
    Rasmus Berntsen
    0

    Hi Stephen!

    So you are able to output the list at the moment, but not able to show an image from the nodes that are in the list? Could you please post your XSLT and perhaps also an overview of the documenttype you want to output.

    The basic way to output an image is:

     

     <xsl:variable name="media" select="umbraco.library:GetMedia($currentPage/data[@alias='YourAliasHere'], 0)/data" />

     <xsl:if test="$media">

            <xsl:variable name="url" select="$media [@alias = 'umbracoFile']" />

            <img src="{$url}" />

     </xsl:if>

    /Berntsen

     

  • Rich Green 2245 posts 3918 karma points
    Aug 30, 2011 @ 19:54
    Rich Green
    0

    Hi Steve,

    As Berntsen says it might be better if you post the xslt you have, then we can see what's going on and help you further.

    The code above if for older versions of Umbraco (pre 4.5) the code in the link will be appropriate if you're using the latest version (4.7).

    Rich

  • Stephen 47 posts 69 karma points
    Aug 31, 2011 @ 10:59
    Stephen
    0

    Thank you both for taking the time to help me. It really gives a great impression of the Umbraco community, especially to a non-coder like myself.

    So Here's what I've done so far.

    1. Created a doc type called 'Event'
    2. Created 3 properties for the event... 'location' (textstring); 'date' (datepicker); 'icon' (mediapicker)
    3. Created a template to display the 'Event' page details
    4. Used xslt wizard to "List sub pages from current page".
    5. Created a macro for above item (4)
    6. I utilised the above macro in a page that succesfully lists (including hyperlibnks) all of the sub ( Event) pages that I have created.

    THIS IS WHERE I GET STUCK. I want to be able to accompany each event listing with the matching 'icon' for each event.

    The xslt that was created by the wizard is shown below. I just don't know how to display the 'icon' as an image. All I ever get is the media ID number.

    I feel I'm real close but still a million miles away from the solution.

    Cheers

    Guys

     

     

     

     

     

     

    <?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"
     exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">

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

    <xsl:param name="currentPage"/>

    <xsl:template match="/">

    <!-- The fun starts here -->
    <ul>
    <xsl:for-each select="$currentPage/* [@isDoc and string(umbracoNaviHide) != '1']">
     <li>
      <a href="{umbraco.library:NiceUrl(@id)}">
       <xsl:value-of select="@nodeName"/>
      </a>
     </li>
    </xsl:for-each>
    </ul>

    </xsl:template>

    </xsl:stylesheet>

  • Rasmus Berntsen 213 posts 251 karma points c-trib
    Aug 31, 2011 @ 11:35
    Rasmus Berntsen
    0

    So what you need to do is to combine your code with the post from Lee Kelleher. I've switched to Razor now, so I'm not that much into the new schema in XSLT, but it should look something like this now (from your for-each):

    <xsl:for-each select="$currentPage/* [@isDoc and string(umbracoNaviHide) != '1']">

     <li>

      <a href="{umbraco.library:NiceUrl(@id)}">

        <xsl:variable name="mediaId" select="number(./icon)" />

        <xsl:if test="$mediaId > 0">

            <xsl:variable name="mediaNode" select="umbraco.library:GetMedia($mediaId, 0)" />

            <xsl:if test="$mediaNode/umbracoFile">

                <img src="{$mediaNode/umbracoFile}" />

            </xsl:if>

        </xsl:if>

       <xsl:value-of select="@nodeName"/>

      </a>

     </li>

    </xsl:for-each>

    It might work. If not, then there's something wrong with my variable. You just need to get the MediaID in the variable. And remember to add some alt-attrbute to the img, so it's valid xhtml... :)

  • Stephen 47 posts 69 karma points
    Aug 31, 2011 @ 11:43
    Stephen
    0

    Whey! Hey! It works. Thanks Berntsen and Rich for your combined help.

    I hope that this post is as much help to others as it has been to me.

    Many thanks for helping me in this. It's a great leap forward.

     

    Regards

     

    Steve

  • Rasmus Berntsen 213 posts 251 karma points c-trib
    Aug 31, 2011 @ 11:55
    Rasmus Berntsen
    0

    All right, cool Stephen! Glad it worked! Please remember to mark your topic as solved / mark the post that solved your problem. This will help others with the same problem to find the solution. :)

    /Berntsen

Please Sign in or register to post replies

Write your reply to:

Draft