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.
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.
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.
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.
Created a doc type called 'Event'
Created 3 properties for the event... 'location' (textstring); 'date' (datepicker); 'icon' (mediapicker)
Created a template to display the 'Event' page details
Used xslt wizard to "List sub pages from current page".
Created a macro for above item (4)
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.
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']">
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... :)
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. :)
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
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
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
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
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
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.
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 " "> ]>
<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>
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... :)
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
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
is working on a reply...