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