Asset Modification

getting started with XIN Mods dynamic image modification extensions

Hero background

A common use-case for a CMS is to store images and be able to serve out multiple renditions of that image. Bloomreach XM has this functionality built-in, but is rather cumbersome to use and difficult to change once you've made up your mind.

To get around this XIN Mods include the /assetmod extension. A simple image operations interpreter that can help: scale, crop and apply other types of filters.

Watch the video below to get an understand of how to load Images from Bloomreach XM into your NodeJS projects.

Simply prefix any /binaries URLs with the /assetmod/<operations>/... construct. For example:

  • /binaries/content/gallery/myimage.jpg

turns into

  • http://localhost:8080/site/assetmod/scale=_,600/crop=600,600/binaries/content/gallery/myimage.jpg

As you may have noticed, you can specify multiple operations. They are structured like this to make it easier for caches to cache them.

Available operations are:

  • scale=_,<new-height>; scale the image to a new height (keeping aspect ratio intact)
  • scale=<new-width>,_; scale the image to a new width (keeping aspect ratio intact)
  • crop=<max-width>,<max-height>; crop zoom the image to max-width and max-height
  • filter=brighter; turn up the brightness of the image a little
  • filter=darker; the image becomes a little bit darker
  • filter=greyscale; the image because black and white