Named Transform Image Servlet: A Quick Review

05287_Named-Transform-Image-Servlet
We did a podcast about the Named Transform Image Servlet a while ago in which we talked about the usefulness of this feature. Here is a written breakdown of that podcast for this specific ACS AEM Commons feature.

What is it?
From the ACS GitHub page about Named Transform Image Servlet: “Many website designs demands consistency of images based on their use within components. For example, a panoramic spotlight may demand the image be 960 × 400, and bio picture must be 100 × 100 and greyscale.

The ACS AEM Commons Named Transform Image Servlet allows specific image transforms to be defined centrally via OSGi configurations. These image transforms can be easily invoked via parameterized HTTP GET requests to image resources in AEM.”

How it works
You create an OSGi configuration that has a name and a set of predetermined image transformations; examples might include resizing, cropping, rotating, making grayscales, etc. At the time the image is referenced, you can append this named transform to the image just by using the correct Sling selector syntax. The GitHub page gives a lot of default transform options.

Audience impact (authors, devs)

  • Devs – set up the transforms
  • Authors – choose them in the way they do their asset references

Example application
Let’s imagine a site where each article has a “Featured Image”; these images fit well-defined parameters, but the original source images will be uploaded in 4k resolution. Every time a new article is published, we want it to get an equal share to appear in the main page’s carousel. We could require the authors to go in directly and crop the image to the desired dimensions, but since we decided that we’ll have rules around the kinds of images that can be uploaded, we might just want Adobe Experience Manager to do that work for us. In this case, we might define a new transform called “carousel”, and the appropriate component could then reference the article’s “Featured Image” with this transform applied; we now have a usable carousel image for every article, without requiring a human to perform the desired crops and resizes.