Copied to clipboard

Flag this post as spam?

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


  • Joao 53 posts 172 karma points
    Feb 05, 2013 @ 12:21
    Joao
    0

    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.

  • Lewis 36 posts 116 karma points
    Feb 05, 2013 @ 16:51
    Lewis
    0

    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'

  • Joao 53 posts 172 karma points
    Feb 06, 2013 @ 12:50
    Joao
    0

    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 "&#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" 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?

  • Lewis 36 posts 116 karma points
    Feb 06, 2013 @ 14:01
    Lewis
    100

    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 

  • Joao 53 posts 172 karma points
    Feb 06, 2013 @ 14:17
    Joao
    0

    It finally worked! I chose another photo on the MediaPicker and pressed save and now it displayed. Thank you!

Please Sign in or register to post replies

Write your reply to:

Draft