Adobe-Consulting-Services/acs-aem-commons — pull request #346 by dherges (2014-11-16 15:49:06+00:00)
Title: Feature: "Named Transform Image" Component

The screenshot should clarify the title:

![screen shot 2014-11-02 at 19 53 59](https://cloud.githubusercontent.com/assets/901354/4876366/a4f1b694-62c1-11e4-9420-dc5a549c1d1b.png)

Goal: authors are able to select a named transform config in an image component's edit dialog. Then, the image is delivered by the Named Transform Image Servlet.

In the Touch UI, we can leverage the datasource feature to get the list of available transforms and show them in the authoring dialog. Starting from there, it should be easy to build more complex components for project-specific requirements. I am thinking of features like a HTML5 Picture Component, letting authors choose a transform for different screen resolutions, i.e. edit dialog for [``srcset`` and ``media`` syntax][1].

I've scrambled together a quick proof-of-concept (see below).

Any ideas or feedback on that? If you like it, I'll write up the code and open a pull request.

``/apps/wip/components/image-transformed/_cq_dialog.xml``
```xml

```

``apps/wip/components/datasource/datasource.esp``
```javascript
<%
/* global sling */
var SimpleDataSource = Packages.com.adobe.granite.ui.components.ds.SimpleDataSource
, ArrayList = Packages.java.util.ArrayList
, HashMap = Packages.java.util.HashMap
, ValueMapResource = Packages.com.adobe.granite.ui.components.ds.ValueMapResource
, ResourceMetadata = Packages.org.apache.sling.api.resource.ResourceMetadata
, ValueMapDecorator = Packages.org.apache.sling.api.wrappers.ValueMapDecorator

var configAdmin = sling.getService(Packages.org.osgi.service.cm.ConfigurationAdmin)

var filterName = 'service.factoryPid'
var filterValue = 'com.adobe.acs.commons.images.impl.NamedImageTransformerImpl'
var configs = configAdmin.listConfigurations('(' + filterName + '=' + filterValue + ')')

var resourceList = new ArrayList()
for (var i = 0, len = configs.length; i < len; i++) {
var transformName = configs[i].getProperties().get('name')

var map = {
'value': transformName,
'text': transformName
}

var valMapResource = new ValueMapResource(resource.getResourceResolver(), new ResourceMetadata(), "", new ValueMapDecorator(map));
resourceList.add(valMapResource);
}

request.setAttribute('com.adobe.granite.ui.components.ds.DataSource', new SimpleDataSource(resourceList.iterator()));

%>
```

``/apps/wip/components/image-transformed/image-transformed.html``
```html

```

[1]: http://scottjehl.github.io/picturefill/#media-and-srcset "picturefill"