Published: 2015-05-22
- Content Studio version 5.7 and later
Image processing in Content Studio 5.7
With the advent of all the variety of devices with different screen sizes the old fixed
image scaling and processing functionality is not well suited any more. A developer today
needs to be able to adjust the size of an image depending of the client's device capability.
I order to address this Content Studio 5.7 introduces a new dynamic image processing functionality
where the developer can control the image processing just by adding a number of parameters to
the image URL. For example, to scale the image content/assets/image.jpg to a maximum of
400 x 400 pixels the developer can now add a number of query strings after the image url:
content/assets/image.jpg?DoProcessing=&w=200&h=200.
When Content Studio detects an image link with processing instructions it looks in the
file system to see if any previous call has requested the exact same processed image.
If that image already exists it returns the processed image and if not it creates it and
returns the processed image. The processed image is cached until the original image is
changed or deleted.
Image url query strings
There are two helper methods which can be used to build the parameterized image URL:
They both accept the image file name and image processing parameters and returns the same file name with
image processing query string parameters.
Image processing parameters
- DoProcessing
- Querystring name: DoProcessing
- Value:
- Description: The presence of this query string turns on image scaling and cropping processing
- Usage:
/image.jpg?DoProcessing= - ImageProcessingWidthQuery
- Querystring name: w
- Value: integer
- Description: The desired maximum width in pixels of the scaled image
- Usage:
/image.jpg?DoProcessing=&w=500 - ImageProcessingHeightQuery
- Querystring name: h
- Value: integer
- Description: The desired maximum height in pixels of the scaled image
- Usage:
/image.jpg?DoProcessing=&h=640 - ImageProcessingCompression
- Querystring name: c
- Value: integer
- Description: The compression of the scaled image
- Usage:
/image.jpg?DoProcessing=&c=70 - ImageProcessingRatio
- Querystring name: ra
- Value: double or string a standard ratio value eg. 16:9
- Description: The ratio of the scaled image i.e the relation between the image width and height.
- Usage:
/image.jpg?DoProcessing=&ra=1.7778 - ImageProcessingPixelRatio
- Querystring name: pr
- Value: double
- Description: Indicates the device pixel ratio.
- Usage:
/image.jpg?DoProcessing=&pr=2.4593845 - ImageProcessingSmartResize
- Querystring name: sr
- Value: Boolean (0 | 1))
- Description: Determines whether to use smart resizing.
- Usage:
/image.jpg?DoProcessing=&sr=1
Cropping parameters
By adding a combination of the cropping parameters a developer can adjust the visible area of the image. The ImageProcessingRatioCropPosition parameter can also be used to activate the automatic face detection functionality. Content Studio will then try to focus the image on a face or a group of faces in the image. You can use this functionality to improve uploaded portraits.
- ImageProcessingCropInfoQuery
- Querystring name: ci
- Value: Four comma separated integers representing the X, Y, Width and Height values.
- Description: Defines the crop area as a rectangle. This parameter overrides the ImageProcessingCropLeftQuery, ImageProcessingCropTopQuery , ImageProcessingCropRightQuery, ImageProcessingCropBottomQuery , ImageProcessingCropWidthQuery, ImageProcessingCropHeightQuery
- Usage:
/image.jpg?DoProcessing=&ci=0, 0, 100, 248 - ImageProcessingCropLeftQuery
- Querystring name: l
- Value: integer
- Description: Defines the left position of the crop area rectangle. ImageProcessingCropInfoQuery overrides this parameter.
- Usage:
/image.jpg?DoProcessing=&l=0 - ImageProcessingCropTopQuery
- Querystring name: t
- Value: integer
- Description: Defines the top position of the crop area rectangle ImageProcessingCropInfoQuery overrides this parameter.
- Usage:
/image.jpg?DoProcessing=&t=0 - ImageProcessingCropRightQuery
- Querystring name: r
- Value: integer
- Description: Defines the right position of the crop area rectangle ImageProcessingCropInfoQuery overrides this parameter.
- Usage:
/image.jpg?DoProcessing=&r=100 - ImageProcessingCropBottomQuery
- Querystring name: b
- Value: integer
- Description: Defines the bottom position of the crop area rectangle ImageProcessingCropInfoQuery overrides this parameter.
- Usage:
/image.jpg?DoProcessing=&b=248 - ImageProcessingCropWidthQuery
- Querystring name: cw
- Value: integer
- Description: Defines the width of the crop area rectangle. Overrides the ImageProcessingCropRightQuery ImageProcessingCropInfoQuery overrides this parameter.
- Usage:
/image.jpg?DoProcessing=&r=100 - ImageProcessingCropHeightQuery
- Querystring name: ch
- Value: integer
- Description: Defines the height of the crop area rectangle. Overrides the ImageProcessingCropBottomQuery ImageProcessingCropInfoQuery overrides this parameter.
- Usage:
/image.jpg?DoProcessing=&b=248 - ImageProcessingRatioCropPosition
- Querystring name: rp
- Value: Enum - one of None | Left | Right | Bottom | Center | Faces | SingleFace
- Description: Determines the ratio crop position
- Usage:
/image.jpg?DoProcessing=&rp=Bottom - ImageProcessingRatioCropPositionCenterPoint
- Querystring name: sr
- Value: Two comma separated integers representing the X and Y values
- Description: Determines the crop area center point
- Usage:
/image.jpg?DoProcessing=&sr=10, 24
Examples
/images/image.jpg?DoEditing=1&w=400&h=600amp;sr=1;pr=