Hey, I'm totally new to umbraco, and I would like to know how to display an image selected from a media picker using a .net User Control? I've looked around for a while and i'm still stuck, I don't know where to begin I guess. Any help would be greatly appreciated!
No, I just thought it might be easier to use a usercontrol because I'm more familiar with VB vs XSLT. But either way, it doesn't matter, whatever is easier because i've been struggling with this for a long time.
Thanks a lot!!! I actually see the image....but there is still one problem that I'm having. The image is really small. When I checked the pages source code i saw this for the image:
Also if you are still interested in doing this in .NET for whatever reason:
using umbraco.cms.businesslogic.media; .... Media m = new Media(_mediaId); Image1.ImageUrl = m.getProperty("umbracoFile").Value.ToString();
where _mediaId is the value of your content picker. You can pass it in using a public property & a macro parameter using something like below. You need to add as a parameter in the Macro settings also.
Or you can get the value from the node directly in .NET using nodefactory (using umbraco.presentation.nodeFactory;)
int mid = int.Parse(Node.GetCurrent().GetProperty("yourPropertyAlias").Value); Media m = new Media(mid); Image1.ImageUrl = m.getProperty("umbracoFile").Value.ToString();
Display image from media picker (newbie)
Hey, I'm totally new to umbraco, and I would like to know how to display an image selected from a media picker using a .net User Control? I've looked around for a while and i'm still stuck, I don't know where to begin I guess. Any help would be greatly appreciated!
Thanks
Hi,
First question is, do you need to show it using the API or a usercontrol for a particular reason?
There are many easier ways to display an image from the media picker.
So let us know and we can point you in the right direction.
Rich
No, I just thought it might be easier to use a usercontrol because I'm more familiar with VB vs XSLT. But either way, it doesn't matter, whatever is easier because i've been struggling with this for a long time.
Hey Kevin,
Understood, some people prefer .NET controls, but this is really easy to do in XSLT.
I'm assuming you are using the latest Umbraco version (4.5.2) or at least version 4.5 and above, let me know if not.
<?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="/">
<xsl:variable name="mediaId" select="number($currentPage/mediaId)" />
<xsl:if test="$mediaId > 0">
<xsl:variable name="mediaNode" select="umbraco.library:GetMedia($mediaId, 0)" />
<xsl:if test="$mediaNode/umbracoFile">
<img src="{$mediaNode/umbracoFile}" height="{umbracoHeight}" width="{umbracoWidth}" />
</xsl:if>
</xsl:if>
</xsl:template>
</xsl:stylesheet>
There is ONE line you have to change, in the line below change "mediaId" to be the name of the property that your media picker uses
(could be something like mediaId or image or newsImage, whatever you called it, it's cAsE sensitive)
<
xsl:variable
name
=
"mediaId"
select
=
"number($currentPage/yourPropertyName)"
/>
Press 'Save'
Then go to your template where you want the image displayed and select "Insert Macro" from the menu
Select the macro you just added and click insert.
Save your template.
That should be it! Let me know if you have any problems
Rich
Thanks a lot!!! I actually see the image....but there is still one problem that I'm having. The image is really small. When I checked the pages source code i saw this for the image:
<img width="1" height="1" src="img/myimagepath" complete="complete"/>
Why would it set width and height to 1?
Hey Kevin,
Sorry, there is an error in the code, change
to
Rich
I think this line
<img src="{$mediaNode/umbracoFile}" height="{umbracoHeight}" width="{umbracoWidth}" />
should be changed to
<img src="{$mediaNode/umbracoFile}" height="{$mediaNode/umbracoHeight}" width="{$mediaNode/umbracoWidth}" />
to get the correct height/width values
Too slow :)
Also if you are still interested in doing this in .NET for whatever reason:
where _mediaId is the value of your content picker. You can pass it in using a public property & a macro parameter using something like below. You need to add as a parameter in the Macro settings also.
Or you can get the value from the node directly in .NET using nodefactory (using umbraco.presentation.nodeFactory;)
int mid = int.Parse(Node.GetCurrent().GetProperty("yourPropertyAlias").Value);
Media m = new Media(mid);
Image1.ImageUrl = m.getProperty("umbracoFile").Value.ToString();
Snap.
I blame Lee, I copied it from his post ;)
http://blog.leekelleher.com/2010/08/11/how-to-use-umbraco-library-getmedia-in-xslt-for-umbraco-v4-5/
Thanks a lot guys for your fast responses. I really, really, really appreciate it!!!!
Hi all,
I have read this post through, and still cant make it work.. Can someone tell me what I am doing wrong?
Here my macro :
And here's my XSLT:
I'd like to have 3 mediaPickers for 3 images on the frontpage of the site..
Hope you can clears this out :)
/Djan
umbraco ver. 4.7
is working on a reply...