accessing damp images in child nodes

awm 187 posts 376 karma points

Aug 31, 2011 @ 18:59

Hi Guys,

I've wasted a good couple of hours so far, trying to get my head around this.

To explain my scenario: I have a 'portfolio' document type, with nested 'case study' children. Each of those children have 1 'before photo' and X 'after photos'. the 'beforePhoto' property uses DAMP classic to select the image. I then have an 'afterPhotos' property which has the DAMP new control so I can select multiple after photos. so the structure would look like this:

PORTFOLIO

Case Study 1

- beforePhoto (DAMP classic)

- afterPhotos (DAMP new)

The problem comes with me being able to build the xslt in my macro. This is what I need to do in pseudocode:

For each child (document type 'CaseStudy') of the portfolio node

create a variable $beforePhoto and store the before photo path

For each after photo

<div>

</div>

I realise that what I've written above is incredibly unclear but hopefully you can understand my objective? I just want to list each case study, and for each case study I want to create a div that contains the before photo, and each of the after photos that have been selected. So for a case study where I have 1 before photo and 2 after photos, the resulting HTML should look like this:

<div>

</div>

<div>

</div>

I hope this makes sense? I've had so many different attempts at the xslt that I don't think listing any of my variations would be very helpful, haha. Can anyone point me in the right direction or offer me some advice?

Thanks!

Copy Link

Chriztian Steinmeier 2798 posts 8788 karma points MVP 8x admin c-trib

Aug 31, 2011 @ 22:26

Hi alimac,

Here's one way to do it - should be pretty much self explanatory - otherwise, let us know:

<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:umb="urn:umbraco.library"
    exclude-result-prefixes="umb"
>

    <xsl:output method="xml" indent="yes" omit-xml-declaration="yes" />

    <xsl:param name="currentPage" />

    <xsl:template match="/">
        <!-- Process CaseStudy if <beforePhoto> contains a value -->
        <xsl:apply-templates select="$currentPage/CaseStudy[normalize-space(beforePhoto)]" />
    </xsl:template>

    <xsl:template match="CaseStudy">
        <xsl:variable name="beforePhoto" select="umb:GetMedia(beforePhoto, false())/Image" />
        <xsl:for-each select="afterPhotos/DAMP/mediaItem">
            <div>
                <!-- Render the beforePhoto -->
                <xsl:apply-templates select="$beforePhoto" />
                <!-- Render this one -->
                <xsl:apply-templates select="." />
            </div>
        </xsl:for-each>
    </xsl:template>

    <!-- Template for images -->
    <xsl:template match="Image">
        <img src="{umbracoFile}" width="{umbracoWidth}" height="{umbracoHeight}" alt="{@nodeName}" />
    </xsl:template>

</xsl:stylesheet>

/Chriztian

Copy Link

awm 187 posts 376 karma points

Sep 01, 2011 @ 11:19

Hi Chriztian,

Thank you for your help. I tried using the template you provided but I get the following error: "Error parsing XSLT file: \xslt\Portfolio.xslt".

I've tried stepping through the XSLT and it seems the error occurs on this line:

"<xsl:variablename="beforePhoto"select="umb:GetMedia(beforePhoto, false())/Image"/>"

Any ideas?

Thanks!

Copy Link

awm 187 posts 376 karma points

Sep 01, 2011 @ 11:42

Aha, after a little tweaking, I came up with the following:

<?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:umb="urn:umbraco.library"
        exclude-result-prefixes="umb">

        <xsl:output method="xml" indent="yes" omit-xml-declaration="yes" />

        <xsl:param name="currentPage" />
        
        <xsl:template match="/">
          <!-- Process CaseStudy if <beforePhoto> contains a value -->
          <xsl:apply-templates select="$currentPage/CaseStudy[normalize-space(beforePhoto)]" />
        </xsl:template>
        
        <xsl:template match="CaseStudy">
          <xsl:variable name="beforePhoto" select="umb:GetMedia(beforePhoto, false())" />
          <xsl:for-each select="afterPhotos/DAMP/mediaItem">
            <div>
              <!-- Render the beforePhoto -->
              <xsl:apply-templates select="$beforePhoto" />
              <!-- Render this one -->
              <xsl:apply-templates select="." />
            </div>
          </xsl:for-each>
        </xsl:template>
        
        <!-- Template for images -->
        <xsl:template match="Image">
                <img src="{umbracoFile}" width="{umbracoWidth}" height="{umbracoHeight}" alt="{@nodeName}" />
        </xsl:template>

</xsl:stylesheet>

Seems only a couple of values had to be changed

Thanks again for your help - you've saved the day!

Copy Link

Jeroen Breuer 4908 posts 12265 karma points MVP 5x admin c-trib

Sep 01, 2011 @ 11:48

I see for DAMP classic you still only store the id. The datatypes that came with DAMP 1.0 are samples and can easily be adjusted. If you go to your DAMP classic datatype and change "store id" to "store full media xml" it will also store the full xml and you can use it in the same way as DAMP new. No need for umb:GetMedia anymore :).

Jeroen

Copy Link

awm 187 posts 376 karma points

Sep 01, 2011 @ 12:00

Yea originally I did change the data type to use the xml path but for some reason that wasn't working. I just kept playing around with settings until things worked (messy I know, but I'm desperately trying to get this project finished! haha).

Thanks again guys

Copy Link

is working on a reply...

Flag this post as spam?

Accessing DAMP images in child nodes