Dynamic Image Resizer

This article is meant for developers, those with an understanding of HTML, and/or familiarity with New Spark application templates. The image resizer allows you to generate images of any size on the fly. You can try different widths and heights until you find a size that is compatible with your design. This simplifies the process of creating different size images for various devices.

 

The URL

 

https://api.newspark.ca/i/{MEDIA_ID}/w/{WIDTH}/h/{HEIGHT}/t/{BASE_TRANSCODER_PROFILE}
/f/{FILTER_TYPE}/x/{FILTER_PARAMETER}

 

Examples:

Make an image 400 pixels wide
https://api.newspark.ca/i/35630578/w/400

Make an image 400 pixels high
https://api.newspark.ca/i/35630578/h/400

Make a grey scale version of the image, 400 pixels wide
https://api.newspark.ca/i/35630578/h/400/f/IMG_FILTER_GRAYSCALE

Make an image 400 pixels wide, and increase the brightness by 150
https://api.newspark.ca/i/35630578/w/400/f/IMG_FILTER_BRIGHTNESS/x/150

 

Parameters

Name Required Description
i Required Media ID of the image to be resized
w  
Desired Width, if h is provided and w is not, width will be calculated
h  
Desired Height, if w is provided and h is not, height will be calculated
t  
Base transcoder profile to use, defaults to 15. If you require images larger than default 15 (560w), you can use profile 0 (zero) which uses the original upload
f  
Filter you would like to apply
x  
Filter argument

 

Filters

  • IMG_FILTER_NEGATE: Reverses all colors of the image.
  • IMG_FILTER_GRAYSCALE: Converts the image into grayscale.
  • IMG_FILTER_EDGEDETECT: Uses edge detection to highlight the edges in the image.
  • IMG_FILTER_EMBOSS: Embosses the image.
  • IMG_FILTER_GAUSSIAN_BLUR: Blurs the image using the Gaussian method.
  • IMG_FILTER_SELECTIVE_BLUR: Blurs the image.
  • IMG_FILTER_MEAN_REMOVAL: Uses mean removal to achieve a "sketchy" effect.
  • IMG_FILTER_BRIGHTNESS: Changes the brightness of the image. Use argument to set the level of brightness.
  • IMG_FILTER_CONTRAST: Changes the contrast of the image. Use argument to set the level of contrast.
  • IMG_FILTER_SMOOTH: Makes the image smoother. Use argument to set the level of smoothness.

 

Limitations

Hits are not currently logged against images displayed using the resizer - this can be worked around using the media.logHit web service, or the <fm:LogHit> template component.

Files from the image resizer can be served through a CDN. Simply configure api.newspark.ca as the origin server. However, the CDN URLs will need to be hard-coded into your pages, since the image resizer URL is not yet integrated into our API - ie. the URL is not properly formed in the thumbUrl tag in the media.getFiles payload.

Image types: bmp/pcm/tiff/tif/pct do not support Original File Type as base type = 0

0 comments

Be the first to comment on Dynamic Image Resizer.

Add a Comment

  • captcha