You need to create a macro to be called from your parent page which simply uses a foreach on its child items, grabs the property from each of the child pages that holds the image and creates the anchor tag with the image on the page.

I recommend that when you create your new "list child pages with image" you start off with the default "List subpages from current page" XSLT macro template thats in Umbraco - that will already list the child pages within a foreach.
Just add a call to GetMedia and create the <img> within the <a> for each page and you're done!

Cheers,
Drew 

Hi Drew, thanks for that, I am nearly there. Just need to figure out how to call the get media.

So I have this

<!-- The fun starts here -->
<ul>
<xsl:for-each select="$currentPage/* [@isDoc and string(umbracoNaviHide) != '1']">
  <li>
    <a class="fancybox" href="{umbraco.library:NiceUrl(@id)}">
      <a href="@umbraco.library.GetMedia(System.Int32.Parse(page.thumbnail), false)" />
    </a>
  </li>
</xsl:for-each>
</ul>

Which works and displays the child pages as links, then on the child page I have this

    <umbraco:Item field="image"
       runat="server"
       xslt="concat('&lt;img src=&quot;',
           umbraco.library:GetMedia({0}, true())/umbracoFile, '&quot;',
           ' height=&quot;', umbraco.library:GetMedia({0}, true())/umbracoHeight, '&quot;',
           ' width=&quot;', umbraco.library:GetMedia({0}, true())/umbracoWidth, '&quot;',
           ' /&gt;')"
       xsltDisableEscaping="true" />

Which works and displays the image, thats inline. How do I call that in the XSLT macro?

Thanks for your help!

Simon

Hi Simon,

To display an image within the link to each child page, using the image associated with each page (providing you have a property that holds the media ID of an image) you can simply put a bit of XSLT in your foreach loop so that you can display the image.

For example:
 

<!-- The fun starts here -->
<ul>
<xsl:for-each select="$currentPage/* [@isDoc and string(umbracoNaviHide) != '1']">
  <li>
    <a class="fancybox" href="{umbraco.library:NiceUrl(@id)}">

             <!-- If image exists on the child page, show that in the link to the child page-->
             <xsl:if test="string-length(./PropertyAliasHere) &gt; 0">
                       <xsl:variable name="image" select="umbraco.library:GetMedia(./PropertyAliasHere)"/>
                        <xsl:if test="$image">
                                  <img src="{$image/umbracoFile}" width="{$image/umbracoWidth}px" height="{umbracoHeight}px"/>
                        </xsl:if> 
             </xsl:if>
      </a> 
    </li>
</xsl:for-each>
</ul>

How would I pull the image from a child page?

Thanks for your help, so close!!

Simon

Hi Simon,

Do you mean show the image for the child pages on the parent page? (where it's listing a link to each of the child pages)
If so, then the previous example is pretty much what you need - as it simply looks at all the child pages on the current page and creates a link with an <img> tag inside it, using the image from the child pages image property.

Or did you mean something else?
(i.e. not showing an image for each child page on the parent page, such as a 'sub pages' list).

Cheers,
Drew 

is working on a reply...