creating macroxslt for use in the editor which selects images from media picker - XSLT

Mike 62 posts 274 karma points

Jan 21, 2010 @ 02:21

Creating Macro/XSLT for use in the editor which selects images from Media Picker

Hi everyone,

I have a need to place a Macro inside my page, via the editor, which requests two images to be selected from the Media Picker. The images need to have some other HTML tags around them hence the reason for the Macro approach.

So I have created my Macro and two parameters named: "photoIcon" for image 1 and "prodPhoto" for image 2, both with the mediaCurrent type. Dropping the macro into my page via the editor works fine and I can select the images. I'm having a bit of trouble with the XSLT however.

What I am trying to do is to extract the path to the two images and put them into the XSLT. I've created the following XSLT but it basically shows nothing when rendered so far:

<?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="photoIcon" select="/macro/photoIcon"/>
<xsl:variable name="prodPhoto" select="/macro/prodPhoto"/>


<xsl:template match="/">



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


</xsl:template>


</xsl:stylesheet>

I've basically started by just trying to output the first image (photoIcon) - and got stuck here - so I've not added the other HTML elements around the IMG tag at this stage.

Any help would be much appreciated. I'm a novice when it comes to XSLT so still learning lots. By the way, this is version 4.0.3

Many thanks,

Mike

Copy Link

Harald Ulriksen 207 posts 249 karma points

Jan 21, 2010 @ 07:26

Suggest you digg into it using

<div class="border: 1px solid red">
  <xsl:value-of select="$photoIcon" /><br/>
  <xsl:copy-of select="umbraco.library:GetMedia($photoIcon,'true')"/>
</div>

Use a browser with some debug tool and inspect the red div to see what's returned by the xsl:copy-of. This should give you some pointers on what's happening.

Cheers,
Harald.

Copy Link

Horst Sterr 171 posts 133 karma points

Jan 21, 2010 @ 12:25

try this

<img src="{umbraco.library:GetMedia($photoIcon,'false')/data [@alias = 'umbracoFile']}" />

/horst

Copy Link

Horst Sterr 171 posts 133 karma points

Jan 21, 2010 @ 13:34

ok, i see, my approach doesn't work :-(
will post if i got solution

/horst

Copy Link

Mike 62 posts 274 karma points

Jan 21, 2010 @ 21:58

Thanks for your input Harald and Horst. I got it working with the following in the end:

<?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="photoIcon" select="/macro/photoIcon"/>
<xsl:variable name="prodPhoto" select="/macro/prodPhoto"/>


<xsl:template match="/">


 <xsl:variable name="imgProdIcon" select="$photoIcon/node/data [@alias='umbracoFile']"/>
 <xsl:if test="$imgProdIcon != ''">
  <a class="showphoto">
  <img>
   <xsl:attribute name="src">
    <xsl:value-of select="$imgProdIcon"/>
   </xsl:attribute>
  </img>
  </a>
 </xsl:if>


 <xsl:variable name="imgProdPhoto" select="$prodPhoto/node/data [@alias='umbracoFile']"/>
 <xsl:if test="$imgProdIcon != ''">
  <div class="tooltip">
  <img>
   <xsl:attribute name="src">
    <xsl:value-of select="$imgProdPhoto"/>
   </xsl:attribute>
  </img>
  </div>
 </xsl:if>


</xsl:template>


</xsl:stylesheet>

Copy Link

is working on a reply...

Flag this post as spam?

Creating Macro/XSLT for use in the editor which selects images from Media Picker