media picker macro only shows id and no image

Devin 87 posts 251 karma points

May 08, 2013 @ 12:58

Media Picker macro only shows ID and no image

Hi guys,

I have a 3 media picker fields in Umbraco which are used for a 3 column layout (3 images, bottom, middle and left). I'm trying to output the selected images using XSLT and all I can see on my page is the image ID and no image. I'm sure I'm missing something simple, but I cannot see it. :(

Here's my code:

<?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:variable name="configData" select="$currentPage/ancestor-or-self::*[@isDoc]/*[@isDoc][@nodeName='SiteConfig']" />


<xsl:template match="/">
  <xsl:call-template name="getBottomImagesAndText" />
</xsl:template>


<xsl:template name="getBottomImagesAndText" >
  <xsl:variable name = "bottomLeftImage" select = "$configData/bottomLeftImage" />
  <xsl:variable name = "bottomMiddleImage" select = "$configData/bottomMiddleImage" />
  <xsl:variable name = "bottomRightImage" select = "$configData/bottomRightImage" />

  <xsl:variable name = "bottomLeftImageLink" select = "$configData/bottomLeftImageLink" />
  <xsl:variable name = "bottomMiddleImageLink" select = "$configData/bottomMiddleImageLink" />
  <xsl:variable name = "bottomRightImageLink" select = "$configData/bottomRightImageLink" />

  <xsl:variable name = "bottomLeftText" select = "$configData/bottomLeftText" />
  <xsl:variable name = "bottomMiddleText" select = "$configData/bottomMiddleText" />
  <xsl:variable name = "bottomRightText" select = "$configData/bottomRightText" />
  
  <xsl:variable name = "bottomLeftTitle" select ="$configData/bottomLeftTitle" />
  <xsl:variable name = "bottomMiddleTitle" select ="$configData/bottomMiddleTitle" />
  <xsl:variable name = "bottomRightTitle" select ="$configData/bottomRightTitle" />
  
  <xsl:if test = "$bottomLeftImage and $bottomMiddleImage and $bottomRightImage != ''">
  
    <table width="926" border="0" cellpadding="0" cellspacing="0" class="homeTable">
            <tr>
              <td height="10" colspan="5"><img src="/images/RESGroup/spacer.gif" alt="space" width="1" height="1" /></td>
            </tr>
 
            <tr>
                <td width="300" height="114" valign="top">
        
        <xsl:if test="$bottomLeftTitle != ''">
        <div class="imageTextOverlay_1">
        <xsl:call-template name="getTitle">
          <xsl:with-param name="imageTitle" select="$bottomLeftTitle" />
        </xsl:call-template>   
        </div>
        </xsl:if>
                                
        <xsl:call-template name="getImage">
          <xsl:with-param name="imageTag" select="$bottomLeftImage" />
          <xsl:with-param name="imageLink" select="$bottomLeftImageLink" />
        </xsl:call-template>
                  
        <xsl:call-template name="getText">
          <xsl:with-param name="imageText" select="$bottomLeftText" />
        </xsl:call-template>
                                                    
        </td>

                <td height="114"><img src="/images/RESGroup/spacer.gif" alt="space" width="1" height="1" /></td>

                <td width="300" height="114" valign="top" >
                  
        <xsl:if test="$bottomMiddleTitle != ''">
        <div class="imageTextOverlay_2">
        <xsl:call-template name="getTitle">
          <xsl:with-param name="imageTitle" select="$bottomMiddleTitle" />
        </xsl:call-template>   
        </div>
        </xsl:if>         
        
        <xsl:call-template name="getImage">
          <xsl:with-param name="imageTag" select="$bottomMiddleImage" />
          <xsl:with-param name="imageLink" select="$bottomMiddleImageLink" />
        </xsl:call-template>
                  
        <xsl:call-template name="getText">
          <xsl:with-param name="imageText" select="$bottomMiddleText" />
        </xsl:call-template>
                                   
        </td>

                <td height="114"><img src="/images/RESGroup/spacer.gif" alt="space" width="1" height="1" /></td>
 
                <td width="300" height="114" valign="top">
        
        <xsl:if test="$bottomRightTitle != ''">
        <div class="imageTextOverlay_3">
        <xsl:call-template name="getTitle">
          <xsl:with-param name="imageTitle" select="$bottomRightTitle" />
        </xsl:call-template>   
        </div>
        </xsl:if>
                      
        <xsl:call-template name="getImage">
          <xsl:with-param name="imageTag" select="$bottomRightImage" />
          <xsl:with-param name="imageLink" select="$bottomRightImageLink" />
        </xsl:call-template>
                  
        <xsl:call-template name="getText">
          <xsl:with-param name="imageText" select="$bottomRightText" />
        </xsl:call-template>  
                                                      
        </td>
          
           </tr>
      
        </table>
  </xsl:if>
</xsl:template>

<xsl:template name="getImage">
  <xsl:param name="imageTag" />
  <xsl:param name="imageLink" />
  <xsl:choose>
    <xsl:when test="$imageLink!= ''">
      <a href="{umbraco.library:NiceUrl($imageLink)}"><xsl:value-of disable-output-escaping="yes" select="$imageTag" /></a>
    </xsl:when>
    <xsl:otherwise>
      <xsl:value-of disable-output-escaping="yes" select="$imageTag" />
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>
    
<xsl:template name="getText">
  <xsl:param name="imageText" />
  <xsl:if test="$imageText != ''">
    <xsl:value-of disable-output-escaping="yes" select="$imageText" />
  </xsl:if>
</xsl:template>    
    
<xsl:template name="getTitle">
  <xsl:param name="imageTitle" />
  <xsl:if test="$imageTitle!= ''">
    <xsl:value-of disable-output-escaping="yes" select="$imageTitle" />
  </xsl:if>
</xsl:template>   

</xsl:stylesheet>

Copy Link

Dennis Aaen 4457 posts 17970 karma points admin hq c-trib

May 08, 2013 @ 13:12

Hi Devin,

What I think you are missing is the /umbracoFile.

Try to change this:

  <xsl:variablename="bottomLeftImage"select="$configData/bottomLeftImage"/>
  <xsl:variablename="bottomMiddleImage"select="$configData/bottomMiddleImage"/>
  <xsl:variablename="bottomRightImage"select="$configData/bottomRightImage"/>

To this

  <xsl:variablename="bottomLeftImage"select="$configData/bottomLeftImage/umbracoFile"/>
  <xsl:variablename="bottomMiddleImage"select="$configData/bottomMiddleImage/umbracoFile"/>
  <xsl:variablename="bottomRightImage"select="$configData/bottomRightImage/umbracoFile"/>

To see if it will solve your problem.

/Dennis

Copy Link

Devin 87 posts 251 karma points

May 08, 2013 @ 13:27

Hi Dennis,

Thanks so much for your reply. I tried that but it just made everything dissapear.

Copy Link

Dennis Aaen 4457 posts 17970 karma points admin hq c-trib

May 08, 2013 @ 13:34

Okay,

Now I see where you print the image out. Have you tried this one as well.

<xsl:templatename="getImage">
  <xsl:paramname="imageTag"/>
  <xsl:paramname="imageLink"/>
  <xsl:choose>
    <xsl:whentest="$imageLink!= ''">
      <ahref="{umbraco.library:NiceUrl($imageLink)}"><xsl:value-ofdisable-output-escaping="yes"select="$imageTag/umbracoFile"/></a>
    </xsl:when>
    <xsl:otherwise>
      <xsl:value-ofdisable-output-escaping="yes"select="$imageTag/umbracoFile"/>
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>

/Dennis

Copy Link

Devin 87 posts 251 karma points

May 08, 2013 @ 13:40

Adding /umbracoFile just removes the ID too. So no image and no ID :( It's really frustrating me.

Copy Link

Dennis Aaen 4457 posts 17970 karma points admin hq c-trib

May 08, 2013 @ 13:56

Hi Devin,

I understand that.

But have you try to see the documentation for GetMedia (Getting the url of a media file using a mediaPicker). I think this could help you in the right direction.

One of the examples is this one.

Getting the url of a media file using a mediaPicker

<xsl:value-ofselect="umbraco.library:GetMedia($currentPage/propertyAlias, 0)/umbracoFile"/>

I think you should take a look on this.

http://our.umbraco.org/wiki/reference/umbracolibrary/getmedia

/Dennis

Copy Link

Dennis Aaen 4457 posts 17970 karma points admin hq c-trib

May 08, 2013 @ 14:03

Actually after I look more in to your code, I think this will do the trick for you. I know I have said it before in this post :-)

<?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:outputmethod="xml"omit-xml-declaration="yes"/>

<xsl:paramname="currentPage"/>
<xsl:variablename="configData"select="$currentPage/ancestor-or-self::*[@isDoc]/*[@isDoc][@nodeName='SiteConfig']"/>


<xsl:templatematch="/">
  <xsl:call-templatename="getBottomImagesAndText"/>
</xsl:template>


<xsl:templatename="getBottomImagesAndText">
  <xsl:variablename="bottomLeftImage"select="umbraco.library:GetMedia($configData/bottomLeftImage,0)/umbracoFile"/>
  <xsl:variablename="bottomMiddleImage"select="umbraco.library:GetMedia($configData/bottomMiddleImage,0)/umbracoFile"/>
  <xsl:variablename="bottomRightImage"select="umbraco.library:GetMedia($configData/bottomRightImage,0)/umbracoFile"/>

  <xsl:variablename="bottomLeftImageLink"select="$configData/bottomLeftImageLink"/>
  <xsl:variablename="bottomMiddleImageLink"select="$configData/bottomMiddleImageLink"/>
  <xsl:variablename="bottomRightImageLink"select="$configData/bottomRightImageLink"/>

  <xsl:variablename="bottomLeftText"select="$configData/bottomLeftText"/>
  <xsl:variablename="bottomMiddleText"select="$configData/bottomMiddleText"/>
  <xsl:variablename="bottomRightText"select="$configData/bottomRightText"/>
  
  <xsl:variablename="bottomLeftTitle"select="$configData/bottomLeftTitle"/>
  <xsl:variablename="bottomMiddleTitle"select="$configData/bottomMiddleTitle"/>
  <xsl:variablename="bottomRightTitle"select="$configData/bottomRightTitle"/>
  
  <xsl:iftest="$bottomLeftImage and $bottomMiddleImage and $bottomRightImage != ''">
  
    <tablewidth="926"border="0"cellpadding="0"cellspacing="0"class="homeTable">
            <tr>
              <tdheight="10"colspan="5"><imgsrc="/images/RESGroup/spacer.gif"alt="space"width="1"height="1"/></td>
            </tr>
 
            <tr>
                <tdwidth="300"height="114"valign="top">
        
        <xsl:iftest="$bottomLeftTitle != ''">
        <divclass="imageTextOverlay_1">
        <xsl:call-templatename="getTitle">
          <xsl:with-paramname="imageTitle"select="$bottomLeftTitle"/>
        </xsl:call-template>   
        </div>
        </xsl:if>
                                
        <xsl:call-templatename="getImage">
          <xsl:with-paramname="imageTag"select="$bottomLeftImage"/>
          <xsl:with-paramname="imageLink"select="$bottomLeftImageLink"/>
        </xsl:call-template>
                  
        <xsl:call-templatename="getText">
          <xsl:with-paramname="imageText"select="$bottomLeftText"/>
        </xsl:call-template>
                                                    
        </td>

                <tdheight="114"><imgsrc="/images/RESGroup/spacer.gif"alt="space"width="1"height="1"/></td>

                <tdwidth="300"height="114"valign="top">
                  
        <xsl:iftest="$bottomMiddleTitle != ''">
        <divclass="imageTextOverlay_2">
        <xsl:call-templatename="getTitle">
          <xsl:with-paramname="imageTitle"select="$bottomMiddleTitle"/>
        </xsl:call-template>   
        </div>
        </xsl:if>         
        
        <xsl:call-templatename="getImage">
          <xsl:with-paramname="imageTag"select="$bottomMiddleImage"/>
          <xsl:with-paramname="imageLink"select="$bottomMiddleImageLink"/>
        </xsl:call-template>
                  
        <xsl:call-templatename="getText">
          <xsl:with-paramname="imageText"select="$bottomMiddleText"/>
        </xsl:call-template>
                                   
        </td>

                <tdheight="114"><imgsrc="/images/RESGroup/spacer.gif"alt="space"width="1"height="1"/></td>
 
                <tdwidth="300"height="114"valign="top">
        
        <xsl:iftest="$bottomRightTitle != ''">
        <divclass="imageTextOverlay_3">
        <xsl:call-templatename="getTitle">
          <xsl:with-paramname="imageTitle"select="$bottomRightTitle"/>
        </xsl:call-template>   
        </div>
        </xsl:if>
                      
        <xsl:call-templatename="getImage">
          <xsl:with-paramname="imageTag"select="$bottomRightImage"/>
          <xsl:with-paramname="imageLink"select="$bottomRightImageLink"/>
        </xsl:call-template>
                  
        <xsl:call-templatename="getText">
          <xsl:with-paramname="imageText"select="$bottomRightText"/>
        </xsl:call-template>  
                                                      
        </td>
          
           </tr>
      
        </table>
  </xsl:if>
</xsl:template>

<xsl:templatename="getImage">
  <xsl:paramname="imageTag"/>
  <xsl:paramname="imageLink"/>
  <xsl:choose>
    <xsl:whentest="$imageLink!= ''">
      <ahref="{umbraco.library:NiceUrl($imageLink)}"><xsl:value-ofdisable-output-escaping="yes"select="$imageTag"/></a>
    </xsl:when>
    <xsl:otherwise>
      <xsl:value-ofdisable-output-escaping="yes"select="$imageTag"/>
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>
    
<xsl:templatename="getText">
  <xsl:paramname="imageText"/>
  <xsl:iftest="$imageText != ''">
    <xsl:value-ofdisable-output-escaping="yes"select="$imageText"/>
  </xsl:if>
</xsl:template>    
    
<xsl:templatename="getTitle">
  <xsl:paramname="imageTitle"/>
  <xsl:iftest="$imageTitle!= ''">
    <xsl:value-ofdisable-output-escaping="yes"select="$imageTitle"/>
  </xsl:if>
</xsl:template>   

</xsl:stylesheet>

/Dennis

Copy Link

Devin 87 posts 251 karma points

May 08, 2013 @ 14:07

This worked perfectly for me!

<img>
    <xsl:attribute name="src">
    <xsl:value-of select="umbraco.library:GetMedia($imageTag, 0)/umbracoFile"/>
    <xsl:attribute>
>

Copy Link

Dennis Aaen 4457 posts 17970 karma points admin hq c-trib

May 08, 2013 @ 14:10

Cool that you found a solution Devin,

/Dennis

Copy Link

Devin 87 posts 251 karma points

May 08, 2013 @ 16:45

Thanks Dennis :)

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

Media Picker macro only shows ID and no image