Referencing to picture inside a document from XSLT macro
Okay, i hope that my topic is clear enough, but i will describe in more details what i need help with:
First of all, im a beginner to umbraco, so i will do my best to describe it as good as possible.
The website im working on, has a bunch of articles, made from document templates. That works and everything is fine and dandy. On the main page, is a list of the latest published articles, and that works BUT! That list has to contain the respective articles picture AND a special segment of text from the article, a teaser text if you will.
(Hope my ASCII drawing works)
--------------------------------------------------------- | | | |---------------| Article title here | | | Pic | Excerpt from text here | | | here | | | |---------------| | |________________________________| (A row of five of these display the most recent published articles)
They are made of XSLT files of course.
The links to the articles work, but whats the path/url to the articles picture? Ive searched and searched and could only find how to use from the media "pool", and nowhere could i find anything on how to get content from inside the article/document.
I hope ive been clear enough, and thank you for your time.
Thank you for your reply, im still learning, but i figured that i couldnt use getmedia for this, but perhaps i can?
But yes, there is a macro in place that lists the articles and links to them. Now i need for it to display the picture that the article uses along with the link to the article.
So i have to somehow make a generic call to the respective articles picture. Sorry if im unclear, im still trying to get to grips with umbraco.
EDIT
Ok, maybe it would be a good idea if i posted a snippet of the code, guess that would help :p
Right now it just displays a generic placeholder image as you can see in the code, hope it makes sense, as i am also trying to figure out heads and tails in this code, seeing as i was just hired to help out.
<ul class="list"> <xsl:for-each select="$currentPage/ancestor-or-self::* [@isDoc and @level=$level]/* [@isDoc and string(umbracoNaviHide) != '1']"> <li> <a href="{umbraco.library:NiceUrl(@id)}"> <xsl:if test="$currentPage/ancestor-or-self::*/@id = current()/@id"> <!-- we're under the item - you can do your own styling here --> <xsl:attribute name="class">selected</xsl:attribute> </xsl:if> <img src="http://placehold.it/125x70g" width="125" height="70" /> <h5><xsl:value-of select="@nodeName"/></h5> <p>Teaser tekst</p> </a> </li> </xsl:for-each> </ul>
First you will need to have a look at the macro, find out which control or script it is using (.NET/XSLT) and have a look at thecode - perhaps you can post a code snippet here? (Developer section)
Secondly, you need to have a look at the document type of the article, it probably has some properties like bodyText etc. One of the properties should be a reference to the image you are trying to display. Can you let me know if there's such a property and which data type it is using? (Settings section)
Ok, didnt know you replied as i made my edit, but in my above post ive pasted in the code that i hope is relevant, i can also post the full code perhaps.
Just talked with the lead programmer, and he told me that the pictures property name is "outputPictures" (its displayed as alias and not property under the generic properties tab for the document template but according to him that IS the property). There is also a "Type" field right under the Alias, it says "DAMP - New".
Generally there's to ways of attaching a picture to a particular document in Umbraco
1: You can place an Upload datatype property in the Document type, which will place an upload control i the edit pane when you're editing the document. You can then upload the picture directly to the documen while editing it. In this case the path to your picture is stored as text in the property of the document node and can be obtained with the following xslt:
2: You can have a Mediapicker datatype property in the Document type which will place a link in the edit pane which opens a dialog that lets you select a picture uploaded to server from the media section of Umbraco. In this case Umbraco stores the unique id of the media item in the property of the document node, and you have to get the path to the picture using umbraco.library:GetMedia() like this:
Thank you for your reply, i hoped it would work, but sadly not. I tried the getmedia example you posted. I tried to create an article to see the process, and to upload a picture, it seems like it uses the regular media picker. As in, when i try to choose a picture for an article, it opens a popup box, where i can choose pictures already uploaded, or i can open a dialog box where i cna upload a picture from my own computer.
Well, thats fine and dandy, just read up on it, he could at least have told me that "DAMP" was different, never seen it before and i shrugged it off as non important. Well this puts a new twist on things, thank you for pointing this out.
EDIT
trying to learn how to use DAMP now, sigh, well thats a developers life for ya :p
I tried your code snip, it doesnt show up as an xslt parser error, but the picture is blank, or rather there isnt any picture at all. Wierd... You write "current", but its not from the actual page i need pictures from, but the article its linking to. I will try and fiddle with it some more.
Srry, the name of the property is "outputPictures" instead of "outputImages", you might need to change that twice.
If I'm not mistaken the loop is iterating the articles, so current() would refer to the current article within the loop, and by calling its property "outputPictures", I'm referring to the image associated to that article (the property of type DAMP).
It works! Awesome! Thank you so much! (cant believe i didnt spot the spelling error, oh well). You are not only making me happy, buy my co-workers as well, thank you.
Referencing to picture inside a document from XSLT macro
Okay, i hope that my topic is clear enough, but i will describe in more details what i need help with:
First of all, im a beginner to umbraco, so i will do my best to describe it as good as possible.
The website im working on, has a bunch of articles, made from document templates. That works and everything is fine and dandy. On the main page, is a list of the latest published articles, and that works BUT! That list has to contain the respective articles picture AND a special segment of text from the article, a teaser text if you will.
(Hope my ASCII drawing works)
---------------------------------------------------------
| |
| |---------------| Article title here |
| | Pic | Excerpt from text here |
| | here | |
| |---------------| |
|________________________________|
(A row of five of these display the most recent published articles)
They are made of XSLT files of course.
The links to the articles work, but whats the path/url to the articles picture? Ive searched and searched and could only find how to use from the media "pool", and nowhere could i find anything on how to get content from inside the article/document.
I hope ive been clear enough, and thank you for your time.
Hi Frederik,
So you already have an XSLT script in place that iterates through the articles and renders the list, right?
Can you tell us how the images are associated to the articles in the back-end: do articles have a property with e.g. a media picker as data type?
If that is the case you should be able to access the image URL in XSLT with the GetMedia method:
http://our.umbraco.org/wiki/reference/umbracolibrary/getmedia
Note that the syntax can be slightly different for Umbraco version 4.5+Thank you for your reply, im still learning, but i figured that i couldnt use getmedia for this, but perhaps i can?
But yes, there is a macro in place that lists the articles and links to them. Now i need for it to display the picture that the article uses along with the link to the article.
So i have to somehow make a generic call to the respective articles picture. Sorry if im unclear, im still trying to get to grips with umbraco.
EDIT
Ok, maybe it would be a good idea if i posted a snippet of the code, guess that would help :p
Right now it just displays a generic placeholder image as you can see in the code, hope it makes sense, as i am also trying to figure out heads and tails in this code, seeing as i was just hired to help out.
No worries, we all had to start somewhere ;-)
First you will need to have a look at the macro, find out which control or script it is using (.NET/XSLT) and have a look at thecode - perhaps you can post a code snippet here? (Developer section)
Secondly, you need to have a look at the document type of the article, it probably has some properties like bodyText etc. One of the properties should be a reference to the image you are trying to display. Can you let me know if there's such a property and which data type it is using? (Settings section)
Hope this makes sense :-)
Ok, didnt know you replied as i made my edit, but in my above post ive pasted in the code that i hope is relevant, i can also post the full code perhaps.
Just talked with the lead programmer, and he told me that the pictures property name is "outputPictures" (its displayed as alias and not property under the generic properties tab for the document template but according to him that IS the property). There is also a "Type" field right under the Alias, it says "DAMP - New".
Hi Frederik,
Just a short clarification:
Generally there's to ways of attaching a picture to a particular document in Umbraco
1: You can place an Upload datatype property in the Document type, which will place an upload control i the edit pane when you're editing the document. You can then upload the picture directly to the documen while editing it. In this case the path to your picture is stored as text in the property of the document node and can be obtained with the following xslt:
<img src="{./nameOfUploadFieldProperty}" width="125" height="70" />2: You can have a Mediapicker datatype property in the Document type which will place a link in the edit pane which opens a dialog that lets you select a picture uploaded to server from the media section of Umbraco. In this case Umbraco stores the unique id of the media item in the property of the document node, and you have to get the path to the picture using umbraco.library:GetMedia() like this:
<img src="{umbraco.library:GetMedia(./nameOfMediaPickerProperty, 'false')}" widht="125" height="70" />Hope this helps.
Regards
Jesper Hauge
Thank you for your reply, i hoped it would work, but sadly not. I tried the getmedia example you posted. I tried to create an article to see the process, and to upload a picture, it seems like it uses the regular media picker. As in, when i try to choose a picture for an article, it opens a popup box, where i can choose pictures already uploaded, or i can open a dialog box where i cna upload a picture from my own computer.
Hmm... i think im getting there.
Hi Frederik,
Since you are using the DAMP - new data type, all media info is stored within the XML, so there's no need to call GetMedia.
Have a look at the data type, there's also a sample XSLT provided in the documentation tab of the project:
http://our.umbraco.org/projects/backoffice-extensions/digibiz-advanced-media-picker
Well, thats fine and dandy, just read up on it, he could at least have told me that "DAMP" was different, never seen it before and i shrugged it off as non important. Well this puts a new twist on things, thank you for pointing this out.
EDIT
trying to learn how to use DAMP now, sigh, well thats a developers life for ya :p
Hey Frederik,
Can you give the following piece of XSLT a try to render the image?
You can just paste it inside the XSLT foreach loop you posted above. It should output the first image selected through DAMP.
<xsl:if test="count(current()/outputImages) > 0"><img src="{current()/outputImages[position()=1]/DAMP[@fullMedia]/mediaItem/Image/umbracoFile}" height="150px;"/>
</xsl:if>
I tried your code snip, it doesnt show up as an xslt parser error, but the picture is blank, or rather there isnt any picture at all. Wierd... You write "current", but its not from the actual page i need pictures from, but the article its linking to. I will try and fiddle with it some more.
Srry, the name of the property is "outputPictures" instead of "outputImages", you might need to change that twice.
If I'm not mistaken the loop is iterating the articles, so current() would refer to the current article within the loop, and by calling its property "outputPictures", I'm referring to the image associated to that article (the property of type DAMP).
Should be close to working, hope it helps..
It works! Awesome! Thank you so much! (cant believe i didnt spot the spelling error, oh well). You are not only making me happy, buy my co-workers as well, thank you.
Glad to hear that :-)
is working on a reply...