Resized image using imageGen macro

Hi,

I created this macro. It creates an <img> tag for displaying an image at a specific width / height wich is picked with the media picker. This took me some time to create, wich i found odd at the time since I thought this would be very basic.

Anyway, I will post the source over here, I understand that I should make a package or so but I don't have time for all that.

You need to create an xslt, a macro with parameters and you have to make shure ImageGen is working on your installation.

Create this XSLT and automaticly add a Macro, and name it 'AddSizedPicture' without the quotes:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [  <!ENTITY nbsp "&#x00A0;">]>
<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" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
 exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">

  <xsl:output method="xml" omit-xml-declaration="yes"/>

  <xsl:param name="currentPage"/>
  <xsl:param name="imgAlias" select="macro/imgAlias" />
  <xsl:param name="maxWidth" select="macro/maxWidth" />
  <xsl:param name="maxHeight" select="macro/maxHeight" />
  <xsl:param name="alt" select="macro/alt" />
  <xsl:param name="class" select="macro/class" />

  <xsl:template match="/">

    <xsl:if test="$imgAlias">
 
    <xsl:variable name="imgData" select="umbraco.library:GetMedia($currentPage/child::*[name() = $imgAlias], 'false')" />
 
      <img>
 <xsl:attribute name="src">
  <xsl:text>/umbraco/ImageGen.ashx?image=</xsl:text>
   <xsl:value-of select="$imgData/umbracoFile" />
  <xsl:if test="$maxWidth &gt; 0 and $imgData/umbracoWidth &gt; $maxWidth">
   <xsl:text>&amp;width=</xsl:text>
   <xsl:value-of select="$maxWidth"/>
  </xsl:if>
  <xsl:if test="$maxHeight &gt; 0 and $imgData/umbracoHeight &gt; $maxHeight">
   <xsl:text>&amp;height=</xsl:text>
   <xsl:value-of select="$maxHeight"/>
  </xsl:if>
 </xsl:attribute>
 <xsl:if test="$class">
  <xsl:attribute name="class"><xsl:value-of select="$class"/></xsl:attribute>
 </xsl:if>
 <xsl:attribute name="alt">
  <xsl:if test="$alt = ''"><xsl:text> </xsl:text></xsl:if>
  <xsl:value-of select="$alt"/>
 </xsl:attribute>
     </img>   
   </xsl:if>

  </xsl:template>
</xsl:stylesheet>

Then edit the macro, add these parameters (all of type text is ok):

imgAlias
maxWidth
maxHeight
alt
class

Add some media picker field to your document type, eg productImage

You can now add a picture in your template:

<umbraco:Macro imgAlias="productImage" alt="[#productName]" class="image-right" maxWidth="300" maxHeight="400" Alias="AddSizedPicture" runat="server"></umbraco:Macro>

You can specify the alias of the media picker field of your document type in the imgAlias field. In my case 'productImage'.

This should add a picture with the nodeName as alt text and Css class 'image-right'. It will have a maximum width of 300 pixels and maximum height of 400 pixels (without affecting the aspect ratio). You can also use 0 for the max width or height if you don't want to restrict it.