Developer manual
cache
Automated processing and caching of images
Updated: Type: url
Method
/cache/path/:path:to:image.jpg/name/image.jpg
Spring has some advanced options for automated processing and caching of images controlled simply by modifying the path to the image file.
Processed files are saved to disk on the server, and Spring uses these for maximum performance. If Spring is unable to locate a previously processed file, it will load, process and save the resulting file into the cache on the fly.
This script can not be called from within CSS files. If that functionality is required you will need to include them within stlyes in head.xml
Minimal options
/cache/path/:path:to:image.jpg/name/image.jpg
Additional Options
Additional options can be specified by appending them to the URL prior to the final filename:
/cache/path/:path:to:image.jpg/<option-name>/<value>/name/image.jpg
Options:
/height/<number>
/width/<number>
/crop/1
/round/<number>
/rotate/<number>
/mask/:path:to:mask.png
/gray/1
/sepia/1
/level/1
/whitebalance/1
/contrast/<number>
/format/<jpg|png|gif>
/quality/<number>
The /path/ and /mask/ value is the full path to the file, with forward slashes '/' substituted with colons ':'.
Random Images
You can load a random image from a directory by making the /path/ value point to a folder instead of a file:
/cache/path/:path:to:folder:/<option-name>/<value>/name/random.jpg
The /name/ value can be anything (it is ignored) but for clarity we recommend calling it random.jpg or random.png.
Examples
This is the original image called through the image cache with minimal options:
/cache/path/upload:pages:image-cache-and-processor:sample.jpg/name/sample.jpg
Height
/height/<number>
Setting the height to 100px:
/cache/path/upload:pages:image-cache-and-processor:sample.jpg/height/100/name/sample.jpg
Width
/width/<number>
Setting the width to 100px:
/cache/path/upload:pages:image-cache-and-processor:sample.jpg/width/100/name/sample.jpg
Height and Width
Setting both the height and width will result in the image being scaled to fit within the specified dimensions.
Crop
/crop/1
Setting crop to 1 will crop the image square at the original size:
/cache/path/upload:pages:image-cache-and-processor:sample.jpg/crop/1/name/sample.jpg
Setting crop to 1 and specifying either a width or height will scale the image to that size then crop the image square:
/cache/path/upload:pages:image-cache-and-processor:sample.jpg/crop/1/width/100/name/sample.jpg
Setting crop to 1 and specifying a width and a height will scale the image to fit with that size then crop exactly to those dimensions:
/cache/path/upload:pages:image-cache-and-processor:sample.jpg/crop/1/width/100/height/50/name/sample.jpg
Round
/round/<number>
Setting round to 20px:
/cache/path/upload:pages:image-cache-and-processor:sample.jpg/round/20/name/sample.jpg
Rotate
/rotate/<number>
Setting rotate to 30 degrees anticlockwise:
/cache/path/upload:pages:image-cache-and-processor:sample.jpg/rotate/30/name/sample.jpg
Setting rotate to 30 degrees clockwise:
/cache/path/upload:pages:image-cache-and-processor:sample.jpg/rotate/-30/name/sample.jpg
Mask
/mask/<:path:to:file.png>
To overlay a mask on an image, you need a transparent png file ideally the same dimensions of the final image to be displayed. The mask file will be overlayed on top of the image, allowing the image to appear through the transparent parts.
/cache/path/upload:pages:image-cache-and-processor:sample.jpg/mask/upload:pages:image-cache-and-processor:sample-mask.png/name/sample.jpg
Example of the mask file - the transparent areas in this image are indicated by the checkboard:
Filters
/gray/1
/cache/path/upload:pages:image-cache-and-processor:sample.jpg/gray/1/name/sample.jpg
/sepia/1
/cache/path/upload:pages:image-cache-and-processor:sample.jpg/sepia/1/name/sample.jpg
/level/1
/cache/path/upload:pages:image-cache-and-processor:sample.jpg/level/1/name/sample.jpg
/whitebalance/1
/cache/path/upload:pages:image-cache-and-processor:sample.jpg/whitebalance/1/name/sample.jpg
Contrast
/contrast/<number>
Setting contrast to a positive number will increase the contrast:
/cache/path/upload:pages:image-cache-and-processor:sample.jpg/contrast/50/name/sample.jpg
Setting contrast to a negative number will decrease contast:
/cache/path/upload:pages:image-cache-and-processor:sample.jpg/contrast/-50/name/sample.jpg
Combining effects
You can combine the various filters to create different effects. Some combinations may not work, but experimenting with the options can create a variety of effects.
/gray/1 + /contrast + /mask
/cache/path/upload:pages:image-cache-and-processor:sample.jpg/gray/1/contrast/50/mask/upload:pages:image-cache-and-processor:sample-mask.png/name/sample.jpg
/crop + /contrast + /round
/cache/path/upload:pages:image-cache-and-processor:sample.jpg/crop/1/contrast/60/round/20/name/sample.jpg