Dan,

Man, a lot of work just to show a picture... :) What method is recomended?

I don't really get that XSLT thing. It says "How to render an Image from XSLT" but where does this go? Straigt into the code of the template or do I create a new XSLT file?

Ok, never mind. I figured out how to use it. What I can't figure out is:

• How to make it recursive
• How to add alt texts
• Since the property name is in the code, do I have to make one script for each image I want to post this way?

Hi Peter,

Here is a post about recursive values in XSLT...I haven't tested but it looks like this code would work:

<xsl:value-of select="$currentPage/ancestor-or-self::node 
[string(data[@alias='field'])!=''] [position()=last()] 
/data[@alias='field']"/>

To add alt text (or any other attribute), you can use xsl:attribute:

<img>
<xsl:attribute name="alt">my alt text here</xsl:attribute>
</img>

You can make the macro re-usable by adding a parameter for the field name.  Then change the macro code to read from the parameter instead of hardcoding the name.   Ex:

<xsl:variable name="mediaFieldName" select="/macro/mediaFieldName"/>
<xsl:variable name="media" select="umbraco.library:GetMedia($currentPage/data[@alias=$mediaFieldName], 0)/data" />

You can add the parameters in the Developer section under Macros.  Now when you insert this macro in your template, it will prompt you for whatever parameters you define. You could also define parameters for alt text, etc..

-Tom

XSL for-each: http://www.w3schools.com/xsl/xsl_for_each.asp

You can put whatever you want in the alt-text

With for-each you can render unlimited image. Also you can use a usercontrol with .NET...

With me being new to XSLT, I don't really see how I could merge that with my existing code.

Starting with the recursive:

I've got this from the GetMedia page:

<xsl:variable name="media" select="umbraco.library:GetMedia($currentPage/data[@alias='TopLogo'], 0)/data" />

How would this line look if it were recursive?

Try this...

<xsl:variable name="media" select="umbraco.library:GetMedia($currentPage/ancestor-or-self::node [string(data[@alias='TopLogo'])!=''] [position()=last()]/data[@alias='TopLogo'], 0)/data" />

Again I havent tested the recursive code but if it works this should work :)

Tom

Tom,

Yes, that dit the trick. Thanks!

Moving on with the alt text. I assume it would be something like this but what goes in where ******** are?

  <xsl:variable name="media" select="umbraco.library:GetMedia($currentPage/ancestor-or-self::node [string(data[@alias='TopLogo'])!=''] [position()=last()]/data[@alias='TopLogo'], 0)/data" />
    <xsl:variable name="altText" select="********" />
    <xsl:if test="$media">

        <xsl:variable name="url" select="$media [@alias = 'umbracoFile']" />
            <xsl:variable name="width" select="$media [@alias = 'umbracoWidth']" />
            <xsl:variable name="height" select="$media [@alias = 'umbracoHeight']" />
        <xsl:variable name="alt" select="@altText [@alias = '********']" />

            <img src="{$url}" width="{$width}" height="{$height}" alt="{$alt}" />
    </xsl:if>

That depends - where are you wanting to generate/retrieve the alt text from?

A property called TopLogoAlt.

In that case...

   <xsl:variable name="media" select="umbraco.library:GetMedia($currentPage/ancestor-or-self::node [string(data[@alias='TopLogo'])!=''] [position()=last()]/data[@alias='TopLogo'], 0)/data" />
        <xsl:variable name="altText" select="$currentPage/data [@alias = 'TopLogoAlt']" />
        <xsl:if test="$media">
                
                <xsl:variable name="url" select="$media [@alias = 'umbracoFile']" />
                <xsl:variable name="width" select="$media [@alias = 'umbracoWidth']" />
                <xsl:variable name="height" select="$media [@alias = 'umbracoHeight']" />

                <img src="{$url}" width="{$width}" height="{$height}" alt="{$altText}" />
        </xsl:if>

Hi Peter,

Glad to here it.  Here is some info on Macro Parameters - http://umbraco.org/documentation/books/macro-parameters-syntax/what-is-macro-parameters

Basically youll want to add 2 text parameters (maybe more later) for the field names - something like "Image Field Name" and "Alt Field Name".  Then, when you insert the macro in your template, it will prompt for these, at which point you'd enter 'TopLogo' and 'TopLogoAlt'.

Then you adjust the variables in your macro - set their values to /macro/paramnamehere to read in the values.

For example:

<xsl:variable name="altFieldName" select="/macro/altFieldName">
<xsl:variable name="altText" select="$currentPage/data [@alias = $altFieldName]" />

Would this mean I have to add a text-string containing the URL to the image I'd like to display?

No, the way I was mentioning you would add a textstring to contain the Property Name of the Media Picker field that contains the Image ID you want to insert.  That way you could reuse the same macro for similar instances when you need to show an image from a Media Picker.  That just saves you from hardcoding the property name (TopLogo) so you can use the macro elsewhere with different fields.

Does that make sense?  I might be misunderstanding what you wanted when asking about creating more macros for more images

That makes perfect sense! So I begin by adding two text parameters to the macro. One called imageField and one called altField. Then what? The XSLT now looks like this:

  <xsl:variable name="media" select="umbraco.library:GetMedia($currentPage/ancestor-or-self::node [string(data[@alias='TopLogo'])!=''] [position()=last()]/data[@alias='TopLogo'], 0)/data" />
    <xsl:variable name="altText" select="$currentPage/ancestor-or-self::node [string(data[@alias='LogoAlt'])!=''] [position()=last()] /data[@alias='LogoAlt']"/>
        <xsl:if test="$media">

                <xsl:variable name="url" select="$media [@alias = 'umbracoFile']" />
                <xsl:variable name="width" select="$media [@alias = 'umbracoWidth']" />
                <xsl:variable name="height" select="$media [@alias = 'umbracoHeight']" />

                <img src="{$url}" width="{$width}" height="{$height}" alt="{$altText}" />
        </xsl:if>

So now you need to replace your hardcoded values with the ones passed from the macro parameter.  Start by adding variables for the parameters:

<xsl:variable name="imageField" select="/macro/imageField"/>
<xsl:variable name="altField" select="/macro/altField"/>

Then the first two lines become:

<xsl:variable name="media" select="umbraco.library:GetMedia($currentPage/ancestor-or-self::node [string(data[@alias=$imageField])!=''] [position()=last()]/data[@alias=$imageField], 0)/data" />
<xsl:variable name="altText" select="$currentPage/ancestor-or-self::node [string(data[@alias=$altField])!=''] [position()=last()] /data[@alias=$altField]"/>

That code gives me an error message:

Error occured
System.OverflowException: Value was either too large or too small for an Int32. 
at System.Convert.ToInt32(Double value) 
at System.Double.System.IConvertible.ToInt32(IFormatProvider provider) 
at System.Convert.ChangeType(Object value, Type conversionType, IFormatProvider provider) 
at System.Xml.Xsl.Runtime.XmlQueryRuntime.ChangeTypeXsltArgument(XmlQueryType xmlType, Object value, Type destinationType) 
at System.Xml.Xsl.Runtime.XmlQueryContext.InvokeXsltLateBoundFunction(String name, String namespaceUri, IList`1[] args) 
at (XmlQueryRuntime {urn:schemas-microsoft-com:xslt-debug}runtime, XPathNavigator {urn:schemas-microsoft-com:xslt-debug}current) 
at Root(XmlQueryRuntime {urn:schemas-microsoft-com:xslt-debug}runtime) 
at Execute(XmlQueryRuntime {urn:schemas-microsoft-com:xslt-debug}runtime) 
at System.Xml.Xsl.XmlILCommand.Execute(Object defaultDocument, XmlResolver dataSources, XsltArgumentList argumentList, XmlSequenceWriter results) 
at System.Xml.Xsl.XmlILCommand.Execute(Object defaultDocument, XmlResolver dataSources, XsltArgumentList argumentList, XmlWriter writer, Boolean closeWriter) 
at System.Xml.Xsl.XmlILCommand.Execute(IXPathNavigable contextDocument, XmlResolver dataSources, XsltArgumentList argumentList, XmlWriter results) 
at System.Xml.Xsl.XmlILCommand.Execute(IXPathNavigable contextDocument, XmlResolver dataSources, XsltArgumentList argumentList, TextWriter results) 
at System.Xml.Xsl.XslCompiledTransform.Transform(IXPathNavigable input, XsltArgumentList arguments, TextWriter results) 
at umbraco.presentation.webservices.codeEditorSave.SaveXslt(String fileName, String oldName, String fileContents, Boolean ignoreDebugging)

  <xsl:variable name="imageField" select="/macro/imageField"/>
    <xsl:variable name="altField" select="/macro/altField"/>

    <xsl:variable name="media" select="umbraco.library:GetMedia($currentPage/ancestor-or-self::node [string(data[@alias=$imageField])!=''] [position()=last()]/data[@alias=$imageField], 0)/data" />
    <xsl:variable name="altText" select="$currentPage/ancestor-or-self::node [string(data[@alias=$altField])!=''] [position()=last()] /data[@alias=$altField]"/>
        <xsl:if test="$media">

                <xsl:variable name="url" select="$media [@alias = 'umbracoFile']" />
                <xsl:variable name="width" select="$media [@alias = 'umbracoWidth']" />
                <xsl:variable name="height" select="$media [@alias = 'umbracoHeight']" />

                <img src="{$url}" width="{$width}" height="{$height}" alt="{$altText}" />
        </xsl:if>

Try this

 <xsl:variable name="imageField" select="/macro/imageField"/>        
 <xsl:variable name="altField" select="/macro/altField"/>
 <xsl:variable name="media">
  <xsl:if test="string($imageField) != ''"><xsl:value-of select="umbraco.library:GetMedia($currentPage/ancestor-or-self::node [string(data[@alias=$imageField])!=''] [position()=last()]/data[@alias=$imageField], 0)/data" /></xsl:if>
 </xsl:variable>
       <xsl:variable name="altText" select="$currentPage/ancestor-or-self::node [string(data[@alias=$altField])!=''] [position()=last()] /data[@alias=$altField]"/> 
       <xsl:if test="$media != ''">
                <xsl:variable name="url" select="$media [@alias = 'umbracoFile']" />
                <xsl:variable name="width" select="$media [@alias = 'umbracoWidth']" />
                <xsl:variable name="height" select="$media [@alias = 'umbracoHeight']" />
                <img src="{$url}" width="{$width}" height="{$height}" alt="{$altText}" />
        </xsl:if>

I past it, saved the file and inserted it into my template and I got to choose what properties I wanted to use for the paramaters. I get the connection between them now but the XSLT seems to be wrong. I get Error parsing XSLT file: \xslt\GetImage.xslt.

I've managed to get it down to this. This one prints out the url to the image as a link but why doesn't it print <img>-tag like it did before? I'm to much of a noob when it comes to XSLT to figure this one out... :)

<xsl:variable name="imageField" select="/macro/imageField"/>        
 <xsl:variable name="altField" select="/macro/altField"/>
 <xsl:variable name="media"/>
  <xsl:if test="string($imageField) != ''"><xsl:value-of select="umbraco.library:GetMedia($currentPage/ancestor-or-self::node [string(data[@alias=$imageField])!=''] [position()=last()]/data[@alias=$imageField], 0)/data" /></xsl:if>

       <xsl:variable name="altText" select="$currentPage/ancestor-or-self::node [string(data[@alias=$altField])!=''] [position()=last()] /data[@alias=$altField]"/> 
       <xsl:if test="$media != ''">
                <xsl:variable name="url" select="$media [@alias = 'umbracoFile']" />
                <xsl:variable name="width" select="$media [@alias = 'umbracoWidth']" />
                <xsl:variable name="height" select="$media [@alias = 'umbracoHeight']" />
                <img src="{$url}" width="{$width}" height="{$height}" alt="{$altText}" />
        </xsl:if>

I'm on to something here... :) How come the first one works but not the second one?

<xsl:variable name="imageField" select="/macro/imageField"/>        
 <xsl:variable name="altField" select="/macro/altField"/>
 <xsl:variable name="media"/>

  <xsl:if test="string($imageField) != ''">
    <xsl:variable name="imageAlt" select="umbraco.library:GetMedia($currentPage/ancestor-or-self::node [string(data[@alias=$altField])!=''] [position()=last()]/data[@alias=$altField], 0)/data" />
    <img src="{$imageUrl}" alt=" " />
  </xsl:if>

<xsl:variable name="imageField" select="/macro/imageField"/>        
 <xsl:variable name="altField" select="/macro/altField"/>
 <xsl:variable name="media"/>

  <xsl:if test="string($imageField) != ''">
    <xsl:variable name="imageUrl" select="umbraco.library:GetMedia($currentPage/ancestor-or-self::node [string(data[@alias=$imageField])!=''] [position()=last()]/data[@alias=$imageField], 0)/data" />
    <xsl:variable name="imageAlt" select="umbraco.library:GetMedia($currentPage/ancestor-or-self::node [string(data[@alias=$altField])!=''] [position()=last()]/data[@alias=$altField], 0)/data" />
    <img src="{$imageUrl}" alt="{$imageAlt}" />
  </xsl:if>

It's no media, right?

is working on a reply...