ImageGen Macros

These are based on information from forum and blog posts by the umbraco community.  They should be used as examples of one way, not a good way or the best way, to do these. The Image Thumbnail would be better with Pro-ImageGen feature of not increasing smaller pictures to thumb size.  List Media doesn't actually form a list, which would be a better approach.  So, there you go.

Image Thumbnail

Set up a macro with two parameters.  One numeric with alias "thumbWidth"--has self-explanatory purpose--the other, aliased "imageID", can be a Media Chooser or numeric and points to a node in the Media tree by its @id. You should set the macro for use in editor, and may as well set it to render in editor too.

<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxml="urn:schemas-microsoft-com:xslt"
    xmlns:umbraco.library="urn:umbraco.library">
  <xsl:output method="xml" omit-xml-declaration="yes" />
  <xsl:param name="currentPage" />
  <xsl:variable name="ThumbWidth" select="/macro/thumbWidth"/>
  <xsl:variable name="ImageID" select="/macro/imageID/node/@id"/>
  <xsl:template match="/">
    <xsl:if test="$ThumbWidth != '' and $ImageID != ''">
      <a>
        <xsl:attribute name="href">
          <xsl:value-of select="umbraco.library:GetMedia($ImageID, 'false')/data [@alias = 'umbracoFile']"/>
        </xsl:attribute>
        <xsl:attribute name="title">
              <xsl:value-of select="umbraco.library:GetMedia($ImageID, 'false')/@nodeName"/>
        </xsl:attribute>
        <img>
          <xsl:attribute name="src">
            <xsl:text>/umbraco/ImageGen.ashx?image=</xsl:text>
            <xsl:value-of select="umbraco.library:GetMedia($ImageID, 'false')/data [@alias = 'umbracoFile']"/>
            <xsl:text>&amp;width=</xsl:text>
            <xsl:value-of select="$ThumbWidth"/>
            <xsl:text>&amp;constrain=true</xsl:text>
          </xsl:attribute>
          <xsl:attribute name="alt">
             <xsl:value-of select="umbraco.library:GetMedia($ImageID, 'false')/@nodeName"/>
          </xsl:attribute>
        </img>
      </a>
    </xsl:if>
  </xsl:template>
</xsl:stylesheet>

List Media

Set up a macro with identical parameters to the Image Thumbnail macro above.  This time the Media node will be a branch (Folder) not a leaf (Image). This can potentially be a long list of images, so render in editor with caution.

<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    xmlns:msxml="urn:schemas-microsoft-com:xslt"
    xmlns:umbraco.library="urn:umbraco.library">
  <!-- Display Children of Specified Media Folder -->
  <xsl:output method="xml" omit-xml-declaration="yes" />
  <xsl:variable name="ThumbSize" select="/macro/thumbsize"/>
  <xsl:variable name="ImageFolder" select="/macro/imagefolder/node/@id"/>
  <xsl:template match="/">
    <xsl:if test="$ThumbSize != '' and $ImageFolder != ''">
      <xsl:for-each select="umbraco.library:GetMedia($ImageFolder, 'yes')/node">
        <div style="margin: 1em; padding: 0.5em; border: solid 1px #000000; text-align: center;">
          <a>
            <xsl:attribute name="href">
              <xsl:value-of select="umbraco.library:GetMedia(@id, 'false')/data [@alias = 'umbracoFile']"/>
            </xsl:attribute>
            <xsl:attribute name="title">
              <xsl:value-of select="@nodeName"/>
            </xsl:attribute>
<xsl:attribute name="target">
<xsl:text>_blank</xsl:text>
</xsl:attribute>
            <img>
              <xsl:attribute name="src">
                <xsl:text>/umbraco/ImageGen.ashx?image=</xsl:text>
                <xsl:value-of select="umbraco.library:GetMedia(@id, 'false')/data [@alias = 'umbracoFile']"/>
                <xsl:text>&amp;width=</xsl:text>
                <xsl:value-of select="$ThumbSize"/>
                <xsl:text>&amp;constrain=true</xsl:text>
              </xsl:attribute>
              <xsl:attribute name="alt">
                <xsl:value-of select="@nodeName"/>
              </xsl:attribute>
            </img>
          </a>
        </div>
      </xsl:for-each>
    </xsl:if>
  </xsl:template>
</xsl:stylesheet>