Hi David,

Here's a faily simple way of doing it by using the auto generated thumbnail Umbraco saves for every uploaded image (it will be named with the suffix "_thumb" before the extension, e.g., a file named "my-cool-image.jpg" has a thumbnail named "my-cool-image_thumb.jpg").

Try it out - just hurl it in a macro:

<?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" />
    <!-- Select the Home node here - usually the ancestor at level 1 -->
    <xsl:variable name="siteRoot" select="$currentPage/ancestor-or-self::*[@level = 1]" />

    <xsl:template match="/">
        <ul>
            <!-- Process childpages of the root -->
            <xsl:apply-templates select="$siteRoot/*[@isDoc][not(umbracoNaviHide = 1)]" />
        </ul>
    </xsl:template>

    <!-- Template for a childnode -->
    <xsl:template match="*[@isDoc]">
        <li>
            <!-- Render the image (thumbnail) if it has a value -->
            <xsl:apply-templates select="image[normalize-space()]" />
            <!-- Render the link -->
            <a href="{umb:NiceUrl(@id)}">
                <xsl:value-of select="@nodeName" />
            </a>
        </li>
    </xsl:template>

    <!-- Template for the image property -->
    <xsl:template match="image">
        <!-- Get the Image XML -->
        <xsl:variable name="mediaNode" select="umb:GetMedia(., false())" />
        <!-- Process the Image -->
        <xsl:apply-templates select="$mediaNode[not(error)]" />
    </xsl:template>

    <!-- Template for a Media Image (getting the auto-generated thumbnail) -->
    <xsl:template match="Image">
        <!-- Find the basename (the part of the URL before the extension) -->
        <xsl:variable name="basename" select="substring-before(umbracoFile, concat('.', umbracoExtension))" />
        <!-- Output the thumbnail -->
        <img src="{$basename}_thumb.{umbracoExtension}" />
    </xsl:template>

</xsl:stylesheet>

/Chriztian

If I understand the question correctly you want to add article images to the media section of umbraco and need a way to connect them to the article node in the content section? If so you would need to iterate the article nodes and get the connected image from the media section (from the damp property). Havent used damp myself but I dont think you can iterate folder content in the media section and get connected content nodes from there.

If every article only has one image and you dont need to reuse images for other articles the simplest way would be to just add an upload property to your article doc-type and upload images directly from the content node. I also recomend Imagegen for creating thumbnails. The size can easily be adjusted to your design. Just check out the documentation :)

Ernst,

Since my original post, I managed to get the DAMP image uploading working correctly. This uploads images to a pre-defined folder in the Media section, and allows me to automatically crop and resize them to a predefined sized. The selected image is then displayed on the page through a macro. All of this is already set up and working.

What I'm trying to do now is create a new template with a macro that will list its child pages as text links (I have this part working), but also figure out which image is selected through the DAMP data type on child each page, and display those images next to the links.

I would guess that this could be accomplished through some modification of the XSLT used to display the selected DAMP image on my current document type, but I'm not sure how to do that.

Here is the XSLT I'm using to display the selected DAMP image on a page:

    <xsl:for-each select="$currentPage/damp200x200/DAMP/mediaItem/PageImage200x200">
        <img src="{pageImage200x200/crops/crop[@name='200x200 Page Image']/@url}" alt="{@nodeName}" title="{@nodeName}"/>
    </xsl:for-each>

I figured out that I could look at the \App_Data\umbraco.config file to see the way things were organized in the XML tree. Once I figured that out, it got a lot easier to understand how to link to files. Here's the code I ended up with:

<img src="{damp200x200/DAMP/mediaItem/PageImage200x200/pageImage200x200/crops/crop[@name='200x200 Page Image']/@url}"/>

is working on a reply...