I am a rookie developer using umbraco to set up a website for my company. I tend to do a lot of reasearch to try and solve my problems but this one has been illuding me for a few days now so I decided to call out for help.
Here is my situation. I want the Editor of the blog to choose a picture using the Media Picker property instead of adding an image through the Rich Text Editor. This will allow me more control when displaying the website it self.
I created said Media Picker property on the Blogpost document type and I have now to change the Blogpost template to show the image the Editor picks.
From what I have read, I can either use inline XSLT or create a macro to fetch the image from the media folder, using the ID provided by the Media Picker. I have tried several of the solutions proposed in other threads to no avail. Can anyone take the time to tell me how to do this? I am a rookie at XSLT as well.
I'm using umbraco v 4.11.3 (Assembly version: 1.0.4760.34993)
I took the code on the last example and inserted it in an XSLT named Display Image, which I associated with a macro of the same name. Inside the code I altered the alias "mainImage" to "photopicker" which is the name of my Media Picker. Here is the code for the XSLT file:
Displaying an image selected with Media Picker
Hello.
I am a rookie developer using umbraco to set up a website for my company. I tend to do a lot of reasearch to try and solve my problems but this one has been illuding me for a few days now so I decided to call out for help.
Here is my situation. I want the Editor of the blog to choose a picture using the Media Picker property instead of adding an image through the Rich Text Editor. This will allow me more control when displaying the website it self.
I created said Media Picker property on the Blogpost document type and I have now to change the Blogpost template to show the image the Editor picks.
From what I have read, I can either use inline XSLT or create a macro to fetch the image from the media folder, using the ID provided by the Media Picker. I have tried several of the solutions proposed in other threads to no avail. Can anyone take the time to tell me how to do this? I am a rookie at XSLT as well.
I'm using umbraco v 4.11.3 (Assembly version: 1.0.4760.34993)
Thank you.
Have you checked out the XSLT macro example at the bottom of this page?
http://our.umbraco.org/documentation/Using-Umbraco/Backoffice-Overview/Property-Editors/Built-in-Property-Editors/Media-Picker
It assumes your media picker property alias is 'mainImage'
I took the code on the last example and inserted it in an XSLT named Display Image, which I associated with a macro of the same name. Inside the code I altered the alias "mainImage" to "photopicker" which is the name of my Media Picker. Here is the code for the XSLT file:
<?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" xmlns:tagsLib="urn:tagsLib" xmlns:BlogLibrary="urn:BlogLibrary"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets tagsLib BlogLibrary ">
<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:template match="/">
<!-- start writing XSLT -->
<xsl:if test="number($currentPage/photopicker) > 0">
<xsl:variable name="selectedMedia" select="umbraco.library:GetMedia($currentPage/photopicker, 0)" />
<img src="{$selectedMedia/umbracoFile}" width="{$selectedMedia/umbracoWidth}" height="{$selectedMedia/umbracoHeight}" alt="{$selectedMedia/@nodeName}" />
</xsl:if>
</xsl:template>
</xsl:stylesheet>
In the template for the blog post, I inserted the macro inside a div, like so:
<div>
<umbraco:Macro Alias="DisplayImage" runat="server"></umbraco:Macro>
</div>
In the document type of the blogpost, I have a property with the alias "photopicker" and in the content I have a media selected.
Nothing is displayed on the page. If I look at the source, I have an empty div.
Any thoughts on what I might be doing wrong?
Have just tested the above code on my local environment and it works fine
Have you double checked the propertyAlias 'photopicker' is definitely correct?
Is the blog post template assigned to the blog post document type
Try saving your page in the content section again
Otherwise not too sure sorry
It finally worked! I chose another photo on the MediaPicker and pressed save and now it displayed. Thank you!
is working on a reply...