This is also for version 4.5.x

Hi Chris,

To display an image from a media picker you'd typically use an XSLT macro to do the work for you. Here's an example from Lee Kelleher's blog (with height/width fixed and alt tag added):

<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}" alt="{$mediaNode/@nodeName}" height="{$mediaNode/umbracoHeight}" width="{$mediaNode/umbracoWidth}" />
        </xsl:if>
    </xsl:if>
</xsl:template>

You'll just want to replace "mediaId" in $currentPage/mediaId with the alias of your media picker property.

Also, I typically make a generic macro called "Insert Image" and add a parameter I can use to pass in the image, that way I can reuse the macro for different cases.  To do that you can add a line above the xsl:template tag like:

<xsl:param name="mediaId" select="/macro/mediaId"/>

and delete the mediaID variable below the xsl:template tag.

Then add the parameter to your macro, type Text (Developer -> Macros -> InsertImage -> Parameters tab).  Then when you insert the macro in your template you can pass [#yourMediaPickerPropertyAlias] as the parameter, which will pass in the value from your media picker.

Hope this makes sense, let us know if not!

-Tom

Tom,

That's awesome; going to try it out.

Thanks,

Chris.

Ok,

It appears I am doing something wrong. (I also couldn't get the second part about changing xsl:param name to work).  My Media Picker has alias "mediaPicker"

For my xslt, I have:

<xsl:param name="currentPage"/>

<xsl:template match="/">


    <xsl:variable name="mediaId" select="number($currentPage/mediaPicker)" />
    <xsl:if test="$mediaId > 0">
        <xsl:variable name="mediaNode" select="umbraco.library:GetMedia($mediaId, 0)" />
        <xsl:if test="$mediaNode/umbracoFile">
            <img src="{$mediaNode/umbracoFile}" alt="{$mediaNode/umbracoAlt}" height="{$mediaNode/umbracoHeight}" width="{$mediaNode/umbracoWidth}" id="feature-pic" />
        </xsl:if>
    </xsl:if>

</xsl:template>

And in my macro, I have fparamaters name and aliases umbracoAlt, umbracoHeight, umbracoWidth.

and in my template I have:

<umbraco:Macro umbracoAlt="Image Alt Tag" umbracoHeight="387" umbracoWidth="956" Alias="Image" runat="server"></umbraco:Macro>

And when I view source, I get:

<img src="/media/2559/main-pic.jpg" alt="" height="386" width="959" id="feature-pic" />

I appreciate the help.

Chris.

Ok,

It appears I am doing something wrong. (I also couldn't get the second part about changing xsl:param name to work).  My Media Picker has alias "mediaPicker"

For my xslt, I have:

<xsl:param name="currentPage"/>

<xsl:template match="/">


    <xsl:variable name="mediaId" select="number($currentPage/mediaPicker)" />
    <xsl:if test="$mediaId > 0">
        <xsl:variable name="mediaNode" select="umbraco.library:GetMedia($mediaId, 0)" />
        <xsl:if test="$mediaNode/umbracoFile">
            <img src="{$mediaNode/umbracoFile}" alt="{$mediaNode/umbracoAlt}" height="{$mediaNode/umbracoHeight}" width="{$mediaNode/umbracoWidth}" id="feature-pic" />
        </xsl:if>
    </xsl:if>

</xsl:template>

And in my macro, I have fparamaters name and aliases umbracoAlt, umbracoHeight, umbracoWidth.

and in my template I have:

<umbraco:Macro umbracoAlt="Image Alt Tag" umbracoHeight="387" umbracoWidth="956" Alias="Image" runat="server"></umbraco:Macro>

And when I view source, I get:

<img src="/media/2559/main-pic.jpg" alt="" height="386" width="959" id="feature-pic" />

I appreciate the help.

Chris.

It would also be ideal to declare the alt text and height and width from the content section.

Hi Chris

It makes sense that the macro parameters does not work, since you don't call them anywhere in the XSLT.

The image you get outputted seems to be working perfectly fine since the width and height dimensions are in fact being set. The reason why the alt attribute is empty is because this property is not a part of the image media type, unless you add it yourself. Have you done that? And if so have you filled in some text?

If you want the values from the from the parameters you need to define the fields as xsl:param as Tom mentions above.

So I guess you should try to do the following

<xsl:param name="currentPage"/>
<xsl:param name="alt" select="/macro/umbracoAlt"/>
<xsl:param name="height" select="/macro/umbracoHeight"/>
<xsl:param name="width" select="/macro/umbracoWidth"/>

<xsl:template match="/">

    <xsl:variable name="mediaId" select="number($currentPage/mediaPicker)" />
    <xsl:if test="$mediaId > 0">
        <xsl:variable name="mediaNode" select="umbraco.library:GetMedia($mediaId, 0)" />
        <xsl:if test="$mediaNode/umbracoFile">
            <!--<img src="{$mediaNode/umbracoFile}" alt="{$mediaNode/umbracoAlt}" height="{$mediaNode/umbracoHeight}" width="{$mediaNode/umbracoWidth}" id="feature-pic" />-->
            <img src="{$mediaNode/umbracoFile}" alt="{$alt}" height="{$height}" width="{$width}" id="feature-pic" />
    </xsl:if>

</xsl:template>

Please note I have commented out the code that generates the image you currently get in the source.

Does this work?

I think you should consider using a combination where you take the height and width values from the media item and then just have a parameter to make sure the alt attribute can have a text.

Hope this helps.

/Jan

Hi, Jan:

Looks like my first reply did not post? Anyways, I appreciate the help and sorry it took so long to reply. 

It seems to be working great!  If you don't mind, what does:

 <!--<img src="{$mediaNode/umbracoFile}" 
alt="{$mediaNode/umbracoAlt}" height="{$mediaNode/umbracoHeight}" 
width="{$mediaNode/umbracoWidth}" id="feature-pic" />-->
            <img src="{$mediaNode/umbracoFile}" 
alt="{$alt}" height="{$height}" 
width="{$width}" id="feature-pic" />

this do?  Still new to Umbraco and xslt and this is really helping a lot!

Thanks,

Chris.

Thanks, guys! That's awesome.

is working on a reply...