Hello,

Yes this is possible and there are some good examples you can use :).

• You can try the DAMP 2.0 Samples package. This has some crop examples (Razor and XSLT). Here is the instruction video: http://www.screenr.com/gz0s. Best way to try this is on an empty 4.7.1 website and you already need DAMP 2.0 installed.
• You can try the Cultiv Razor Examples project. This also has some nice crop examples.
• I showed a demo of DAMP 2.0 at the Umbraco Uk Festival. You can view it here: http://www.youtube.com/watch?feature=player_embedded&v=LkcObL7CMvQ

Hi..

I've installed DAMP 2.0 ... and Umbraco 4.7.0 as the Tea Commerce Starter Kit v2 is a complete site incl. Umbraco 4.7.0

The product lists and each product is written with xslt..
So in this example the value in the image source is refering to the image crop with alias wideCrop? and I then need to specify the crop alias in Image Cropper Property Alias in the datatype?

<ul>
<xsl:for-each select="$currentPage/dampNewWide/DAMP/mediaItem/ImageWide">
              <li>
                <img src="{wideImage/crops/crop[@name='wideCrop']/@url}" alt="{@nodeName}"/>
              </li>
</xsl:for-each>
</ul>

If I want a single image, just the first one, should I use? <img src="{$currentPage//mediaItem/Image/umbracoFile}" height="100px;"/>
I didn't figured out how to use this: <xsl:variable name="file" select="$currentPage/dampFile/DAMP/mediaItem/File" /> .. it didn't seem to work with <xsl:variable name="image" select="$currentPage/dampImage/DAMP/mediaItem/Image" /> .. so probably the dampImage alias that's wrong..

Bjarne

I haven't used DAMP 2.0 a lot with XSLT, but maybe this example can help you more: http://damp.codeplex.com/SourceControl/changeset/view/81602#1970701.

Jeroen

Okay..
How can a see the xml structure... perhaps it's easier to understand how I should get the images..?

Bjarne 

You can only see the xml if you're using full media xml in the datatype. The xml is in a file which you can check. In your website folder look for App_Data\umbraco.config. There you can see the xml of your complete website.

Jeroen

Hi Bjarne,

You are correct about the cropping, your code looks for a crop called 'wideCrop' that you need to define in the Image Cropper datatype and add to the ImageWide mediatype.

To get only the first item in a DAMP picker, you can use: 

<img src="{$currentPage/yourDampPropertyAlias/DAMP/mediaItem[1]/*/umbracoFile}" />

The [1] should pull only the first selected media.  I always use * after mediaItem so it handles different media types, but if it's always an Image you could replace with Image.

-Tom

Okay, I see..

I have this:

<productImage>
              <DAMP fullMedia="">
                <mediaItem>
                  <Image id="1165" version="04b00276-f70d-4e25-be23-592fc4e9b93c" parentID="1161" level="3" writerID="0" nodeType="1032" template="0" sortOrder="3" createDate="2011-08-25T12:01:03" updateDate="2011-08-25T12:01:03" nodeName="Product A3" urlName="producta3" writerName="Admin" nodeTypeAlias="Image" path="-1,1160,1161,1165">
                    <umbracoFile>/media/3264/chrysanthemum.jpg</umbracoFile>
                    <umbracoWidth>1024</umbracoWidth>
                    <umbracoHeight>768</umbracoHeight>
                    <umbracoBytes>879394</umbracoBytes>
                    <umbracoExtension>jpg</umbracoExtension>
                    <crops>
                      <crops date="07/11/2011 15:30:09">
                        <crop name="productThumb" x="128" y="0" x2="896" y2="768" url="/media/3264/chrysanthemum_productThumb.jpg" />
                        <crop name="productSmallThumb" x="128" y="0" x2="896" y2="768" url="/media/3264/chrysanthemum_productSmallThumb.jpg" />
                      </crops>
                    </crops>
                  </Image>
                </mediaItem>
...... 

So I just need to get the productThumb and productSmallThumb crops.. so e.g. for-each selected image with the DAMP it should list productSmallThumb images..

Bjarne

Hi Tom

Thanks for your suggestion..

It worked with <img src="{$currentPage/productImage/DAMP/mediaItem[1]/*/umbracoFile}" /> to get the original image size..

I have then tried with

<img src="{$currentPage/productImage/DAMP/mediaItem/Image/productSmallThumb/crops/crop[@name='productSmallThumb']/@url}" height="50px;"/>

to get the thumbnail with alias productSmallThumb, but didn't seem to work..

the crop is created and the xml structure is as above: <productImage><Damp fullMedia=""><mediaItem><Image><crops><crops date="07/11/2011 15:30:09"><crop><crop name="productSmallThumb" x="128" y="0" x2="896" y2="768" url="/media/3264/chrysanthemum_productSmallThumb.jpg" /></crops></crops> .....</productImage>

Bjarne

Yes.. it seems to be correct written in the xslt and the thumbs are created: 
http://sub.ak-security.dk/media/3264/chrysanthemum_productThumb.jpg and 
http://sub.ak-security.dk/media/3264/chrysanthemum_productSmallThumb.jpg

But it didn't seem to give the img src attribute any value: http://sub.ak-security.dk/da/shop/category-a/product-a3.aspx

Bjarne

Ahh... this worked to get each thumb of the selected image :)

<xsl:for-each select="./productImage/DAMP/mediaItem/Image">
          <li>
            <!--<img src="{./productImage/DAMP/mediaItem/Image/crops//crop [@name='productThumb']/@url}" />-->
            <img src="{./crops//crop [@name='productSmallThumb']/@url}" />
        </li>
      </xsl:for-each>

http://sub.ak-security.dk/da/shop/category-a/product-a3.aspx

Bjarne

I've set a test, so it only shows thumbnails when more than one image is selected:

<xsl:if test="count(./productImage/DAMP/mediaItem/Image) > 1">
<xsl:for-each select="./productImage/DAMP/mediaItem/Image">
<li>
<img src="{./crops//crop [@name='productSmallThumb']/@url}" />
</li>
</xsl:for-each>
</xsl:if>

Bjarne 

The way I get a single image is like Tom wrote:

<img src="{$currentPage/productImage/DAMP/mediaItem[1]/*/umbracoFile}" />
<img src="{$currentPage/productImage/DAMP/mediaItem[1]/Image/umbracoFile}" /> 

or to get a crop

<img src="{./productImage/DAMP/mediaItem[1]/Image/crops//crop [@name='productThumb']/@url}"/>

Bjarne

is working on a reply...