damp listing multiple dampclassic images in custom page

John Halsey 59 posts 220 karma points

Jul 12, 2013 @ 13:39

XSLT

I am using this cool DAMP package, and have put it into a custom page on my website. I want to use only the dampClassic image type, and have ticked the box to allow multiple images, but can't work out how to show all images on my page. The XML shows the <dampClassic> tag and then the image ID's (4 in this case) but I'm having trouble looping through them all. Can anyone help?

Firstly, here is my XML for the page. The <dampClassic> tag is at the bottom.

<Product id="1126" 
  parentID="1180" 
  level="4" 
    creatorID="0" 
    sortOrder="1" 
    createDate="2013-06-04T15:54:29" 
 updateDate="2013-07-12T10:23:11" 
 nodeName="BeeWi Mini Cooper iOS" 
 urlName="beewi-mini-cooper-ios" 
  path="-1,1050,1080,1180,1126" 
    isDoc="" 
 nodeType="1074" 
  creatorName="admin" 
  writerName="admin" 
   writerID="0" template="1075">
   <pageTitle>
      BeeWi Mini Cooper for iOS from Avenir Accessories
  </pageTitle>    
   <metaDescription>
        Beewi Mini Cooper for iOS from Avenir Accessories
  </metaDescription>
   <metaKeywords>
   </metaKeywords>
  <productTitle>
       Mini Cooper for iPhone iPad
    </productTitle>
  <shortDescription>
       <![CDATA[This is a short description for the mini cooper.]]>
 </shortDescription>
  <longDescription><![CDATA[]]></longDescription>
  <brand><![CDATA[BeeWi]]></brand>
 <category><![CDATA[Toys,Bluetooth]]></category>
  <productCompatibility><![CDATA[Apple]]></productCompatibility>
   <specs>
      <![CDATA[<ul>
         <li>134 x 35 x 756 cm</li>
         <li>123kg</li>
         <li>shiney</li>
            <li>cool</li>    
           </ul>]]>
  </specs>
 <tradePrice>
     423.33
 </tradePrice>
    <retailPrice>458.655</retailPrice>
 <searchTerms>
        <![CDATA[beewi mini cooper car iphone ipad bluetooth ios toys wireless app radio controlled black white]]>
   </searchTerms>
   <mainImage>1127</mainImage>
    <dampClassic>1127,1088,1086,1203</dampClassic>
</Product>

Now, here is my XSLT

<xsl:variable name="damp" select="$currentPage/dampClassic/DAMP/mediaItem/Image" />
    <xsl:if test="count($damp) &gt; 0"> <!-- have also tried <xsl:if test="$damp &gt; 0"> -->
    <ul>
 <xsl:for-each select="$damp [@isDoc and string(umbracoNaviHide) != '1']" >
   <xsl:variable name="mediaNode" select="umbraco.library:GetMedia(dampClassic, true())" />
   <li>
    <img src="{$mediaNode/umbracoFile}" alt="{$mediaNode/altText}" width="200"  />
     </li>
 </xsl:for-each>
  </ul>
    </xsl:if>

Because there is only 1 <dampClassic> node tag it doesn't itterate through the ID's.

Thanks in advance for any advice.

John

Copy Link

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

Jul 13, 2013 @ 00:44

Hi John,

If you're using XSLT with DAMP, I highly recommend instructing DAMP to store the Full Media XML instead of a CSV of IDs. You can do that on the dampClassic DataType - in fact, that's what your damp variable expects; you can see it looks for elements within the dampClassic element, but yours contain only a CSV list of IDs, so the loop will never be entered.

When you change that setting, you can use this to render them:

<xsl:variable name="damp" select="$currentPage/dampClassic/DAMP/mediaItem/Image" />
<xsl:if test="$damp">
    <ul>
        <!-- Process the Images -->
        <xsl:for-each select="$damp">
            <li>
                <!-- The context is now an Image, so we can just refer to its properties relatively -->
                <img src="{umbracoFile}" alt="{altText}" width="200"  />
            </li>
        </xsl:for-each>
    </ul>
</xsl:if>

Otherwise, if you can't change that setting, use the Split() function to get the image IDs as separate elements:

<xsl:variable name="damp" select="normalize-space($currentPage/dampClassic)" />
<xsl:if test="$damp">
    <ul>
        <!-- Process the Images -->
        <xsl:for-each select="umbraco.library:Split($damp, ',')/value">
            <xsl:variable name="mediaItem" select="umbraco.library:GetMedia(., false())" />
            <xsl:if test="not($mediaItem[error])">
                <li>
                    <img src="{$mediaItem/umbracoFile}" alt="{$mediaItem/altText}" width="200" />
                </li>
            </xsl:if>
        </xsl:for-each>
    </ul>
</xsl:if>

/Chriztian

Copy Link

John Halsey 59 posts 220 karma points

Jul 15, 2013 @ 12:11

Hi Chriztian,

Thanks for your helpful response.

I found the option on the Damp classic data type and changed it to Full media xml like you said, and also made changes to my xslt file. Then when I added the images to my page and clicked save I got an error message saying that the "String or binary data would be truncated". I know this means that one of my data table elements is not big enough, but didn't have a clue which one it was.

So looked at your second option which works perfectly.

Thanks so much.

Copy Link

is working on a reply...

Flag this post as spam?

DAMP listing multiple dampClassic images in custom page