general getimage macro

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Milen Kovachev 13 posts 33 karma points

Mar 24, 2011 @ 11:49

0

General GetImage macro

XSLT

Hi,

I am absolutely new to umbraco, so I might be trying to do something silly here. But what I am trying to achieve is write a general macro that will input an img tag with the src attribute set to the appropriate image url. And the image is present on the current content node as a property that is set via a Media Picker.

So My Macro has an ImageId parameter and looks like this:

<xsl:param name="currentPage"/>
    <xsl:variable name="imageId" select="/macro/imageId" />

    <xsl:template match="/">

        <xsl:variable name="media" select="umbraco.library:GetMedia($imageId, 0)" />

        <xsl:if test="$media">
                <img src="{$media/umbracoFile}" alt="{$media/altText}" />
        </xsl:if>


    </xsl:template>

Now I can not stop getting this infamous: System.OverflowException: Value was either too large or too small for an Int32.error without checking the Skip Testing checkbox.

As to the template that I am trying to use the macro in, the code looks like this:

<umbraco:Macro imageId="<umbraco:Item field='logo' recursive='true' runat='server'></umbraco:Item>" Alias="GetImage" runat="server"></umbraco:Macro>

Basically set the imageId macro parameter from the umbracoItem and use it to build the image tag.

I get an error: Error parsing XSLT file: \xslt\getImage.xslt

Tried to debug the web site, but it would not build in visual studio due to not being able to find some services and many other errors.

Given a CMS, looks like a simple thing to do, but proves infinitely complicated so far.

Please advise what the problem here is. Hopefully I would not give up umbraco before even starting to use it.

Thanks

Copy Link
Daniel Bardi 927 posts 2562 karma points

Mar 24, 2011 @ 12:00
1
Make one change:
```
<xsl:variable name="imageid" select="/macro/imageid/Image/@id"/>
```
The macro data for media does not return an id.. but instead, returns the xml.

and since media can be any type (Image, Folder, File, etc.) you must reference the type.
Copy Link
Daniel Bardi 927 posts 2562 karma points

Mar 24, 2011 @ 12:05
0
You should also be able to get the url without using GetMedia.

Try this:
```
<xsl:variable name="image" select="/macro/imageid"/>
```
```
<img src="{$image/umbracoFile}" />
```
Copy Link
Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib

Mar 24, 2011 @ 12:08
0
Hi Milen, welcome to the Umbraco community!

As you've already found out, nesting the tags within each other didn't work well.

Here are a couple of things to help you out...
- I wrote a blog post a long time ago about how to use the GetMedia function, it's still relevant now: http://blog.leekelleher.com/2010/08/11/how-to-use-umbraco-library-getmedia-in-xslt-for-umbraco-v4-5/
- If you happen to be using the uComponents package, then we have a nice XSLT extension in the Media library called "GetImage" - which will do exactly what you need. http://ucomponents.codeplex.com/wikipage?title=Media&referringTitle=Documentation
But those require a little more effort... so for a super-quick fix, try this XSLT snippet:
```
<xsl:variable name="media" select="umbraco.library:GetMedia($imageId, 0)" />
<xsl:if test="normalize-space($media/umbracoFile)">
        <img src="{$media/umbracoFile}" alt="{$media/altText}" />
</xsl:if>
```
The reason the XSLT editor is throwing an error is because it must check if the "umbracoFile" has a value first, hence the "normalize-space" call.

Cheers, Lee.
Copy Link
Milen Kovachev 13 posts 33 karma points

Mar 25, 2011 @ 13:32
0
Hi Guys,

Thanks a lot for the replys!

One thing I found out is that passing an to a macro is wrong. All you need to do is pass the page property via the bracket syntax like this:

imageId="[$logo]" Alias="GetImage" runat="server">umbraco:Macro>

The $ is for recrusive properties - quite neat! More information on this I found here:

http://our.umbraco.org/wiki/reference/templates/umbracomacro-element/macro-parameters/advanced-macro-parameter-syntax

Going back to my original problem, now that I am passing the correct imageId to the macro my invocation to GetMedia works and the macro itself does what I wanted it do do.

The macro looks like this:
```
<xsl:template match="/">
  <xsl:variable name="imageId" select="/macro/imageId" />
      <xsl:if test="$imageId> 0">
          <xsl:variable name="mediaNode" select="umbraco.library:GetMedia($imageId, true)" />
          <xsl:if test="string($mediaNode/umbracoFile) != ''">
              <img src="{$mediaNode/umbracoFile}" alt="{$mediaNode/altText}" width="{$mediaNode/umbracoWidth}" height="{$mediaNode/umbracoHeight}"/>
          xsl:if>
      xsl:if>
xsl:template>
```
I guess because I am using the latest version of umbraco the xml schema for the media is a bit different. There are no data nodes and the xml looks like this:
```
<Image id="1191" version="d4790fa8-68eb-4767-8a70-a9d45e56d4da" parentID="-1" level="1" writerID="0" nodeType="1032" template="0" sortOrder="62" createDate="2011-03-23T22:37:10" updateDate="2011-03-23T22:37:10" nodeName="logo" urlName="logo" writerName="7Spikes Webmaster" nodeTypeAlias="Image" path="-1,1191">
  <umbracoFile>/media/943/logo.png</umbracoFile>
  <umbracoWidth>217</umbracoWidth>
  <umbracoHeight>58</umbracoHeight>
  <umbracoBytes>7641</umbracoBytes>
  <umbracoExtension>png</umbracoExtension>
</Image>
```
The only thing left to figure out is the altText. The documentation in the wiki for the GetMedia function does use an altText node:

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

But in my case there is no such information for a media of type Image. Do you think specifying alt text for an image file is possible in umbraco out of the box?

Thanks!
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?