Copied to clipboard

Flag this post as spam?

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


  • Kevin 6 posts 26 karma points
    Dec 21, 2010 @ 16:38
    Kevin
    0

    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

  • Rich Green 2246 posts 4008 karma points
    Dec 21, 2010 @ 17:15
    Rich Green
    0

    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

     

  • Kevin 6 posts 26 karma points
    Dec 21, 2010 @ 17:22
    Kevin
    0

    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.

  • Rich Green 2246 posts 4008 karma points
    Dec 21, 2010 @ 17:34
    Rich Green
    0

    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.

    • Go to developer section, right click XSLT and select 'create'
    • Type a name
    • Make sure 'Create Macro' is ticked
    • Choose 'Clean' from the drop down
    Replace any code with ALL of the following:
    <?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" 
      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

  • Kevin 6 posts 26 karma points
    Dec 21, 2010 @ 18:18
    Kevin
    0

    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?

     

  • Rich Green 2246 posts 4008 karma points
    Dec 21, 2010 @ 18:21
    Rich Green
    0

    Hey Kevin,

    Sorry, there is an error in the code, change

     <img src="{$mediaNode/umbracoFile}" height="{umbracoHeight}" width="{umbracoWidth}" />

    to

     <img src="{$mediaNode/umbracoFile}" height="{$mediaNode/umbracoHeight}" width="{$mediaNode/umbracoWidth}" />

    Rich

  • Tom Fulton 2030 posts 4998 karma points c-trib
    Dec 21, 2010 @ 18:22
    Tom Fulton
    0

    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

  • Tom Fulton 2030 posts 4998 karma points c-trib
    Dec 21, 2010 @ 18:28
    Tom Fulton
    1

    Too slow :)

    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.

    <umbraco:Macro MediaId="[#yourPropertyAlias]" Alias="InsertImage" runat="server"></umbraco:Macro>

    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();


  • Rich Green 2246 posts 4008 karma points
    Dec 21, 2010 @ 18:29
  • Kevin 6 posts 26 karma points
    Dec 21, 2010 @ 18:44
    Kevin
    0

    Thanks a lot guys for your fast responses. I really, really, really appreciate it!!!!

  • Djan Blom 99 posts 161 karma points
    May 01, 2011 @ 14:15
    Djan Blom
    0

    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 :

    <umbraco:Macro Alias="mediaId" runat="server"></umbraco:Macro>

    And here's my XSLT:

    <?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"
      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/forsideBillede1)" />

        <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="{$mediaNode/umbracoHeight}" width="{$mediaNode/umbracoWidth}" />

            </xsl:if>

        </xsl:if>


    </xsl:template>

    </xsl:stylesheet>

    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

Please Sign in or register to post replies

Write your reply to:

Draft