Magical Image Resize Utility

By The Workers London Ltd.

Overview

Magical image resizer and tag generator, with fallback to DummyImage generator.

Required params:

upload: takes an xPath of Symphony’s <upload> node
- if upload is omitted, it will generate a dummy image with the specified dimensions (w and h dimensions required in that case)

Optional params:

'w': the requested width
'h': the requested height (both can be set)
(standard <img/> attributes. class, id, title, name, longdesc, etc.)
value-only: if set to either 'w' or 'h' will return only the result number not the whole <img/> tag.
mode: 'normal', 'fit', 'max'
- normal: none, 'w', 'h', 'w' and 'h'
- fit: 'w' and 'h'
- max: 'w', 'h', 'w' and 'h'
  In normal mode the scaler takes whatever h and/or w is passed and scales the specified dimensions to whatever value was passed.
  If either w or h are passed, then the missing value is derived proportionally. If both values are passed then both are applied, effectively constraining the image to a specified size.
  In fit mode both h and w are required. The two values define the area within which the scaler has to proportionally fit the image.
JITmode: JIT modes (see docs on Symphony-CMS.com)
JITcenter: JIT center 1 to 9
JITexternal: 0 or url (without the http:// part)

Examples

Output original size

No explicit size = original size

<xsl:call-template name="img">  
  <xsl:with-param name="upload" select="$upload"></xsl:with-param>  
</xsl:call-template>

Force a specific size

Specifying both dimensions, using no explicit mode, will output exactly what you asked for.

<xsl:call-template name="img">  
  <xsl:with-param name="upload" select="$upload"></xsl:with-param>  
  <xsl:with-param name="w" select="300"></xsl:with-param>  
  <xsl:with-param name="h" select="200"></xsl:with-param>  
</xsl:call-template>

Scale proportionally based on width or height constraint

To trigger this simply omit one dimension

<xsl:call-template name="img">  
  <xsl:with-param name="upload" select="$upload"></xsl:with-param>  
  <xsl:with-param name="w" select="300"></xsl:with-param>  
</xsl:call-template>

Scale proportionally within a set bounding box (square or not)

This is useful if you want to proportinally constrain your images to set dimensions.

<xsl:call-template name="img">  
  <xsl:with-param name="upload" select="$upload"></xsl:with-param>  
  <xsl:with-param name="mode" select="'fit'"></xsl:with-param>  
  <xsl:with-param name="w" select="400"></xsl:with-param>  
  <xsl:with-param name="h" select="400"></xsl:with-param>  
</xsl:call-template>

Set a grid and trim exceeding values from automatically calculated dimensions

Makes sure that any automatically calculated value will be a (nearest neighbor) multiple of the grid you set.

<xsl:call-template name="img">  
  <xsl:with-param name="upload" select="$upload"></xsl:with-param>  
  <xsl:with-param name="mode" select="'trim'"></xsl:with-param>  
  <xsl:with-param name="gridsize" select="50"></xsl:with-param><!-- This will set a 50px grid -->
  <xsl:with-param name="w" select="400"></xsl:with-param>  
  <!-- i.e.: 'h' will be trimmed to the nearest neighbor grid -->
</xsl:call-template>

Set a grid and use multipliers

Straighforward. W and H values are used as multiplier in this case.

<xsl:call-template name="img">  
  <xsl:with-param name="upload" select="$upload"></xsl:with-param>  
  <xsl:with-param name="gridsize" select="50"></xsl:with-param><!-- This will set a 50px grid -->
  <xsl:with-param name="w" select="3"></xsl:with-param> <!-- When in 'pure' grid mode, these values act as multipliers -->
  <xsl:with-param name="h" select="2"></xsl:with-param>  
</xsl:call-template>

Use and external image

w and h needed as we don’t have XML metadata on the fetched image

<xsl:call-template name="img">   
  <xsl:with-param name="upload" select="'images.apple.com/home/images/mbp_hero20110224.png'"></xsl:with-param>  
  <xsl:with-param name="w" select="400"></xsl:with-param>  
  <xsl:with-param name="h" select="200"></xsl:with-param>  
</xsl:call-template>

Generate a dummy image (needs Dummy Image extension)

Note that we are not passing any upload param in this case.

<xsl:call-template name="img">
  <xsl:with-param name="w" select="200"></xsl:with-param>   
  <xsl:with-param name="h" select="150"></xsl:with-param>  
</xsl:call-template>

Use it as a MATCHED template

<xsl:apply-templates match="upload">  
  <xsl:with-param name="w" select="300"></xsl:with-param>  
</xsl:apply-templates>

Add attributes (works in all modes)

<xsl:call-template name="img">  
  <xsl:with-param name="upload" select="$upload"></xsl:with-param>  
  <xsl:with-param name="w" select="500"></xsl:with-param>  
  <xsl:with-param name="class" select="'someclass anotherclass'"></xsl:with-param>  
  <xsl:with-param name="id" select="'myID'"></xsl:with-param>  
  <xsl:with-param name="title" select="'Herr Title'"></xsl:with-param>  
</xsl:call-template>

Notes

When this template is used as a match rather than called by name, the DummyImage mode is effectively inaccessible.
Besides, it wouldn’t make sense since you if have a match, then you have an upload.

By The Workers London Ltd. theworkers.net - io@theworkers.net