DI Image Transformation UI Extension

This UI extension lets you create an image transformation to attach to an image in DI, including crops, rotation and image effects. Check out schema.json for the content schema to use with this extension. In future versions, you may need to update this schema to match any additions made to the functionality.

Key features:

• Transform and preview of any image on the linked DAM account. Image and transforms are made available via the content item, as a query string and image link.
• Shows DAM previews on the side that show real outputs of the transformations from DAM.
• Supports cropping, flips and HSL modification.
  • Crops support interactive dragging over the image, aspect ratio locks.
  • HSL modification uses a software image filter to mimic what DI generates.
• Extendable to support more types of transformation.
• Support for rotation and POI on cropped image segments. Disabled for now.
• Query parameters created within the transformer are included in the content item as a prebaked query string.
• Can draw unpublished images using a VSE. useVSE: boolean by itself attempts to use the DC VSE, but you can also provide your own with customVSE.
• Result is shown as a preview card on any future loads into the content item.

Parameters in Schema

Put the following in the params object to change features of the extension:

• useVSE: Set to true to use a VSE for fetching and rendering images. If this is false, images must be published to be seen.
• customVSE: Set to whatever your custom VSE's hostname is. Do not include http:// or a trailing slash. useVSE must be true.
• alwaysFullRes: When true, the main preview image is always fetched at full resolution.

Step by Step to run from Jenkins on DC:

This project is built on Jenkins and hosted on dev-artifacts to make QA and UAT a little easier.

• Go to any version of Amplience DC that supports UI extensions. (should be a given now)
• Log in, go to development and create a new schema. (if the schema is not already set up on that account)
• Paste the contents of schemajenkins.json.
  • If you want to choose a specific build, replace the branch name in the link to index.html with the branch you're interested in.
• Save it. Go back to development and create a content type for your new schema.
• Go to Production and make as many content items as your heart desires.

Step by Step to run locally on DC:

• npm install -g angular-cli (if it is not already installed)
• npm i
• ng serve
• Head to http://localhost:4200/ and accept the security risk.
• Go to any version of Amplience DC that supports UI extensions. (should be a given now)
• Log in, go to development and create a new schema. (if the schema is not already set up on that account)
• Paste the contents of schema.json
• Save it. Go back to development and create a content type for your new schema.
• Go to Production and make as many content items as your heart desires.

Angular CLI

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests (wip)

Karma tests are not yet set up, but the regular angular-cli setup for them is present: Run ng test to execute the unit tests via Karma.

Running end-to-end tests (wip)

End to end tests are not yet set up, but the regular angular-cli setup for them is present: Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.