Author:
Nils
Version:
1.0.1
Release Date:
22 Feb 2010
Category:
Output

Description

JIT Image Manipulation is one of Symphony’s core extensions. This template aims to simplify the resizing process and offers automatic image generation with some extra features.

XSLT

View Raw
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">


<!--
	RESIZE IMAGES
	by Nils Hörrmann, http://www.nilshoerrmann.de
	Version 1.0.1, 22nd February 2010
	
	# Example usage:
	
	<xsl:call-template name="image" mode="jit">
		<xsl:with-param name="image" select="image" />
		<xsl:with-param name="mode" select="2" />
		<xsl:with-param name="width" select="50" />
		<xsl:with-param name="height" select="50" />
		<xsl:with-param name="link" select="true()" />
	</xsl:call-template>
							
	# Options:
	
	image:             a Symphony image node containing image path, 
	                   filename and meta information
	mode:              resize mode, either nummeric or string
	                    - direct display: 0 or empty
	                    - resize: 1 or 'resize'
	                    - crop to fill: 2 or 'crop'
	                    - resize canvas: 3 or 'resize-crop'
	width:             target width, nummeric
	height:            target height, nummeric
	position:          canvas position, nummeric
	background-color:  optional for mode 3, hex
	link:              link back to original image, either true() or false()	
	class:             optional class name, string
	
	# Notes:
	
	This template will add the original dimensions as image title, e. g.:
	
		title="width: 615px, height: 250px"
	
	This can be used as object for futher JavaScript processing when 
	generating an image gallery.
	
	If either width or height of the resized image are missing, these values are automatically calculated based on the original dimensions.
	
	# Limitations:
	
	This template currently does not support external images.
-->
<xsl:template name="image" mode="jit">
	<xsl:param name="image" />
	<xsl:param name="mode" select="'resize'" />
	<xsl:param name="width" select="0" />
	<xsl:param name="height" select="0" />
	<xsl:param name="position" select="5" />
	<xsl:param name="background-color" />
	<xsl:param name="link" select="false()" />
	<xsl:param name="class" />
	
	<!-- Get Image -->
	<xsl:variable name="resized-image">
		<xsl:choose>
		
			<!-- Resize -->
			<xsl:when test="$mode = 'resize' or $mode = 1">
				<xsl:call-template name="resize" mode="jit">
					<xsl:with-param name="image" select="$image" />
					<xsl:with-param name="mode" select="1" />
					<xsl:with-param name="width" select="$width" />
					<xsl:with-param name="height" select="$height" />
					<xsl:with-param name="class" select="$class" />
				</xsl:call-template>
			</xsl:when>
			
			<!-- Crop to fill -->
			<xsl:when test="$mode = 'crop' or $mode = 2">
				<xsl:call-template name="resize" mode="jit">
					<xsl:with-param name="image" select="$image" />
					<xsl:with-param name="mode" select="2" />
					<xsl:with-param name="width" select="$width" />
					<xsl:with-param name="height" select="$height" />
					<xsl:with-param name="position" select="$position" />
					<xsl:with-param name="class" select="$class" />
				</xsl:call-template>
			
			</xsl:when>
			
			<!-- Resize canvas -->
			<xsl:when test="$mode = 'resize-crop' or $mode = 3">
				<xsl:call-template name="resize" mode="jit">
					<xsl:with-param name="image" select="$image" />
					<xsl:with-param name="mode" select="3" />
					<xsl:with-param name="width" select="$width" />
					<xsl:with-param name="height" select="$height" />
					<xsl:with-param name="position" select="$position" />
					<xsl:with-param name="background-color" select="$background-color" />
					<xsl:with-param name="class" select="$class" />
				</xsl:call-template>
			</xsl:when>
			
			<!-- Direct display -->
			<xsl:otherwise>
				<xsl:call-template name="resize" mode="jit">
					<xsl:with-param name="image" select="$image" />
					<xsl:with-param name="mode" select="0" />
					<xsl:with-param name="class" select="$class" />
				</xsl:call-template>
			</xsl:otherwise>	
		
		</xsl:choose>
	</xsl:variable>
	
	<!-- Link image -->
	<xsl:choose>
		<xsl:when test="$link != false()">
			<a href="{$workspace}{$image/@path}/{$image/filename}">
				<xsl:copy-of select="$resized-image" />
			</a>
		</xsl:when>
		<xsl:otherwise>
			<xsl:copy-of select="$resized-image" />
		</xsl:otherwise>
	</xsl:choose>

</xsl:template>


<!--
	Generate resized image
-->
<xsl:template name="resize" mode="jit">
	<xsl:param name="image" />
	<xsl:param name="mode" />
	<xsl:param name="width" />
	<xsl:param name="height" />
	<xsl:param name="position" />
	<xsl:param name="background-color" />
	<xsl:param name="class" />
	
	<!-- Get Width -->
	<xsl:variable name="jit-width">
		<xsl:choose>
			
			<!-- Keep width -->
			<xsl:when test="$width != 0">
				<xsl:value-of select="$width" />
			</xsl:when>
			
			<!-- Calculate with -->
			<xsl:otherwise>
				<xsl:call-template name="calculate-dimension" mode="jit">
					<xsl:with-param name="a" select="$image/meta/@width" />
					<xsl:with-param name="b" select="$image/meta/@height" />
					<xsl:with-param name="c" select="$height" />
				</xsl:call-template>
			</xsl:otherwise>
			
		</xsl:choose>
	</xsl:variable>
	
	<!-- Get Height -->
	<xsl:variable name="jit-height">
		<xsl:choose>
			
			<!-- Keep height -->
			<xsl:when test="$height != 0">
				<xsl:value-of select="$height" />
			</xsl:when>
			
			<!-- Calculate height -->
			<xsl:otherwise>
				<xsl:call-template name="calculate-dimension" mode="jit">
					<xsl:with-param name="a" select="$image/meta/@height" />
					<xsl:with-param name="b" select="$image/meta/@width" />
					<xsl:with-param name="c" select="$width" />
				</xsl:call-template>
			</xsl:otherwise>
			
		</xsl:choose>
	</xsl:variable>
	
	<img title="" alt="width: '{$image/meta/@width}px', height: '{$image/meta/@height}px'">
	
		<!-- Set width -->
		<xsl:if test="$jit-width != 0 and $jit-width != ''">
			<xsl:attribute name="width">
				<xsl:value-of select="$jit-width" />
			</xsl:attribute>
		</xsl:if>
		
		<!-- Set height -->
		<xsl:if test="$jit-height != 0 and $jit-height != ''">
			<xsl:attribute name="height">
				<xsl:value-of select="$jit-height" />
			</xsl:attribute>
		</xsl:if>
	
		<!-- Set source -->
		<xsl:attribute name="src">
			<xsl:value-of select="$root" />
			<xsl:choose>
			
				<!-- Resize -->
				<xsl:when test="$mode = 1">
					<xsl:value-of select="concat('/image/1/', $jit-width, '/', $jit-height)" />
				</xsl:when>
				
				<!-- Crop to fill -->
				<xsl:when test="$mode = 2">
					<xsl:value-of select="concat('/image/2/', $jit-width, '/', $jit-height, '/', $position)" />
				</xsl:when>
				
				<!-- Resize canvas -->
				<xsl:when test="$mode = 3">
					<xsl:value-of select="concat('/image/2/', $jit-width, '/', $jit-height, '/', $position)" />
					<xsl:if test="$background-color">
						<xsl:value-of select="concat('/', $background-color)" />
					</xsl:if>
				</xsl:when>
				
				<!-- Direct display -->
				<xsl:otherwise>
					<xsl:text>/workspace/</xsl:text>
				</xsl:otherwise>	
			
			</xsl:choose>
			<xsl:value-of select="$image/@path" />
			<xsl:text>/</xsl:text>
			<xsl:value-of select="$image/filename" />
		</xsl:attribute>
		
		<!-- Set class -->
		<xsl:if test="$class != ''">
			<xsl:attribute name="class">
				<xsl:value-of select="$class" />
			</xsl:attribute>
		</xsl:if>
		
	</img>

</xsl:template>


<!-- 
	Calculate missing dimension
-->
<xsl:template name="calculate-dimension" mode="jit">
	<xsl:param name="a" />
	<xsl:param name="b" />
	<xsl:param name="c" />

	<xsl:if test="$c != 0">
		<xsl:value-of select="round($a div $b * $c)" />
	</xsl:if>
</xsl:template>


</xsl:stylesheet>

Discuss this XSLT Utility

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details