Copied to clipboard

Flag this post as spam?

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


  • carl.sargunar 6 posts 71 karma points
    Nov 25, 2009 @ 02:10
    carl.sargunar
    0

    Macro to show an image from Media

    Hi Guys n Gals

    I want to do something fairly straightforward but can find no help for it. I need to use the standard Media picker in umbraco 4 to pick content, and through using a macro, present it as an image.I need to use the media picker as the image will be sized correctly, and will be reused on many pages

    I've got the media in the library but now need some help creating a macro to show that media as an image. The page I want to show the image on is working fine, and there is a property on it (bannerImage) which represents the image

    <umbraco:Item runat="server" field="bannerImage"/> does not work (didn't expect it to, but wild shot in the dark) - this just shows the id of the media

     

    Has anyone done anything like this, or able to point me in the right direction so I can get started

     

    thanks

     

    Carl

  • Finn 86 posts 50 karma points
    Nov 25, 2009 @ 08:02
  • Dirk De Grave 4541 posts 6021 karma points MVP 3x admin c-trib
    Nov 25, 2009 @ 09:17
    Dirk De Grave
    0

    Carl,

    you can use inline xslt in your template to show the image:

    <umbraco:Item runat="server" 
      field="bannerImage" 
      xslt="concat('&lt;img src=&quot;', umbraco.library:GetMedia({0},'true')/data[@alias='umbracoFile'], '&quot; /&gt;')"

     

    Hope this helps.

    Regards,

    /Dirk

  • Josh Townson 67 posts 162 karma points
    Nov 25, 2009 @ 11:23
    Josh Townson
    0

    Hi Carl,

    I have a Macro for doing exactly that:

    <?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:variable name="mediaId" select="/macro/mediaId"/>
    <xsl:template match="/">
    <xsl:if test="$mediaId &gt; 0">
    <xsl:variable name="image" select="umbraco.library:GetMedia($mediaId,'true')"/>
    <img src="{$image/data[@alias='umbracoFile']}" alt="{$image/@nodeName}">
    <xsl:if test="/macro/style != ''">
    <xsl:attribute name="style"><xsl:value-of select="/macro/style"/></xsl:attribute>
    </xsl:if>
    </img>
    </xsl:if>
    </xsl:template>
    </xsl:stylesheet>

    The macro has 2 parameters?: mediaId - which is a media node id usually coming from a media picker, and a style string - just in case I want to add some forced styling to the image.

    Hopefully this will do what you want, or can be easily adapted for you

    /Josh

  • carl.sargunar 6 posts 71 karma points
    Nov 25, 2009 @ 13:06
    carl.sargunar
    0

    Hi Josh

    That's great - it's 99% of what I want. I'm trying to find a way of using a property in the Macro though so that I can set one of the properties (mediaID) using a media picker on the template.

    Essentially what I have is below - the first line is the media picker with a static media ID, but is there any way to get the bannerImage field into that Macro

    <!-- Banner Image Macro -->
    <umbraco:Macro mediaId="1079" style="" Alias="MediaImage" runat="server"></umbraco:Macro>

    <umbraco:Item runat="server" field="bannerImage"/>

     

    Thanks for your help - I'm pretty new at all this, but enjoying the exp so far

     

    Carl

  • carl.sargunar 6 posts 71 karma points
    Nov 25, 2009 @ 13:14
    carl.sargunar
    0

    Hi All

     

    I found an anwer - it is indeed possible.

    http://umbraco.org/documentation/books/macro-parameters-syntax/advanced-parameter-syntax

    Essentially you use "the Bracket syntax" - live the name. So the macro would become

    <!-- Banner Image Macro -->
    <umbraco:Macro mediaId="[$bannerImage]" style="" Alias="MediaImage" runat="server"></umbraco:Macro>

    Where bannerImage was a page property for a media picker

     

  • Touhid 97 posts 117 karma points
    Dec 01, 2010 @ 12:46
    Touhid
    0

    thnks for quick reply. now im doing that..

  • PedroM. 28 posts 87 karma points
    Oct 19, 2011 @ 17:02
    PedroM.
    0

    Hi all, i'm new with umbraco.

    I'm trying do something like what is talk where, i tryed the examples in this thread and others but isn't working for me, i canĀ“t get the url for the image to appear.

    I want to put a Logo image for my site using a parameter , type contentMedia.

    I created a macro with a parameter and put it in the master page:

    <umbraco:MacroLogoID="1149"Alias="Logo"runat="server"></umbraco:Macro>

    My XSLT file:

    ...

      <xsl:paramname="currentPage"/>
     
    <xsl:variablename="logoid"select="/macro/LogoID/Image/@id"/>
     
    <xsl:templatematch="/">
         
    <xsl:variablename="image"select="umbraco.library:GetMedia($logoid,'true')"/>
         
    <imgsrc="{$image/data[@alias='umbracoFile']}"alt="{$image/@nodeName}"></img>
     
    </xsl:template>

    ...

    My XML for the variable image is:

    <Imageid="1149"version="b1c2dd91-46bd-4f35-a0fe-2afebdd541cd"parentID="-1"level="1"writerID="0"nodeType="1032"template="0"sortOrder="59"createDate="2011-10-12T17:00:32"updateDate="2011-10-12T17:00:32"nodeName="logo"urlName="logo"writerName="Pedro M."nodeTypeAlias="Image"path="-1,1149">
       
    <umbracoFile>~/media/366/logo.png</umbracoFile>
       
    <umbracoWidth>314</umbracoWidth>
       
    <umbracoHeight>92</umbracoHeight>
       
    <umbracoBytes>22448</umbracoBytes>
       
    <umbracoExtension>png</umbracoExtension>
    </Image>

     

    this "$image/@nodeName" gives me "logo" my problem is getting umbracoFile, return empty.

    <img scr="" alt="logo" />

     

    What have i'm doing wrong?

  • Tom Fulton 2030 posts 4998 karma points c-trib
    Oct 19, 2011 @ 17:20
    Tom Fulton
    0

    Hi,

    You're close, the issue is that you are using some of the old schema syntax (data [@alias....]) to retrieve the umbracoFile property, instead use:

          <img src="{$image/umbracoFile}" alt="{$image/@nodeName}"></img>

    Also, FYI, you should replace 'true' with true(), the GetMedia function is meant to accept a bool and I think if you pass a string it always evaluates to true.

    -Tom

  • PedroM. 28 posts 87 karma points
    Oct 19, 2011 @ 17:30
    PedroM.
    0

    Thanks Tom for your reply,

    I already test it like you said and like http://our.umbraco.org/wiki/reference/umbracolibrary/getmedia

    But like that i get: Error parsing XSLT file: \xslt\BindLogo.xslt

    I put

    <textarea>
    <xsl:copy-of select="$image/umbracoFile"/>
    </textarea>

    Gives me in the textarea: <umbracoFile>~/media/366/logo.png</umbracoFile>
  • Tom Fulton 2030 posts 4998 karma points c-trib
    Oct 19, 2011 @ 17:32
    Tom Fulton
    0

    Try wrapping your GetMedia call in a test to verify $logoid has a value - otherwise you can get a parsing error when saving since it tries to test your XSLT but doesn't have a value, ex:

    <xsl:if test="$logoid &gt; 0">
     <xsl:variable name="image" select="umbraco.library:GetMedia($logoid,true())"/>
     <img src="{$image/umbracoFile}" alt="{$image/@nodeName}"></img>
    </xsl:if>

    See this blog post for more info also:  http://blog.leekelleher.com/2010/08/11/how-to-use-umbraco-library-getmedia-in-xslt-for-umbraco-v4-5/

    -Tom

  • PedroM. 28 posts 87 karma points
    Oct 19, 2011 @ 17:49
    PedroM.
    0

    I saw that blog post too :) and tryed the example but still getting: Error parsing XSLT file: \xslt\BindLogo.xslt.

    If i remove the

    {$image/umbracoFile} 

    from src="" and it display the tag img only with the logo alt text

    if i put src="{$image/umbracoHeight}" it works and i get the height.

    Its strange not working with umbracoFile.

    I could be anything else besides the xslt?

    I have umbraco v 4.7.1 (Assembly version: 1.0.4281.20201)

  • Rich Green 2246 posts 4008 karma points
    Oct 19, 2011 @ 18:37
    Rich Green
    0

    Hey Pedro,

    It might be more useful to post your whole xslt.

    Rich

  • PedroM. 28 posts 87 karma points
    Oct 19, 2011 @ 18:50
    PedroM.
    0

    Hi Rich, this is 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:variable name="logoid" select="/macro/LogoID/Image/@id"/>
      <xsl:template match="/">
        <xsl:if test="$logoid > 0">
          <xsl:variable name="image" select="umbraco.library:GetMedia($logoid, false())"/>
          <img alt="{$image/@nodeName}" src="{$image/umbracoFile}" />
        </xsl:if>
      </xsl:template>

    </xsl:stylesheet>
  • Rich Green 2246 posts 4008 karma points
    Oct 19, 2011 @ 18:56
    Rich Green
    0

    Hey Pedro,

    I think this line is your problem

    select="/macro/LogoID/Image/@id"/>

    You just need
     

    select="/macro/LogoID"/>

    Rich

  • PedroM. 28 posts 87 karma points
    Oct 19, 2011 @ 19:28
    PedroM.
    0

    Rich, why this could be the problem?

    I saw that the other example dont have it like mine xslt but that gives me the id of the media file, logoid will get 1149 , because i need it for the GetMedia().

    My problem is using src="{$image/umbracoFile}

     

  • Tom Fulton 2030 posts 4998 karma points c-trib
    Oct 19, 2011 @ 19:32
    Tom Fulton
    0

    I think he's using the mediaCurrent parameter for LogoID which is why he's using /Image/@id

    Really since you are using mediaCurrent you don't need to use GetMedia, the media's XML is already there in the macro parameter, you can just do

    <img src="{/macro/LogoID/Image/umbracoFile}"/>

    or

    <xsl:variable name="image" select="/macro/LogoID/Image"/>
    <img src="{$image/umbracoFile}"/>

    But theoretically your code should work anyway.  I don't know why you'd be getting a parsing error, I pasted the code here and it's fine...hmm.

    -Tom

  • Rich Green 2246 posts 4008 karma points
    Oct 19, 2011 @ 19:33
    Rich Green
    1

    Hey Pedro,

    So the ID of your image file node is 1149?

    I can't see where your error is, but what happens if you use this code

     <xsl:variable name="mediaId" select="1149" />
     
        <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>

    Rich
  • Rich Green 2246 posts 4008 karma points
    Oct 19, 2011 @ 19:35
    Rich Green
    0

    Posted at the same time as Tom, hopefully one of the posts should help you.

    Rich

  • heinnge 3 posts 23 karma points
    Apr 11, 2012 @ 20:25
    heinnge
    0

    okay.. it has been ages since the last post. but i think i just had the same problem like Pedro.

    I have a couple of images that were auto-uploaded by LiveWriter which has '~' in umbracoFile element whereas normal uploaded images doesn't. The system is throwing error on this.

    I got this resolved by removing the '~' in the xslt.

    Mine is running on umbraco.4.7.1, blog4umbraco.

    <xsl:value-of select="Exslt.ExsltStrings:replace(umbraco.library:GetMedia(ThumbnailImage, false())/umbracoFile,'~','')" /
Please Sign in or register to post replies

Write your reply to:

Draft