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.
- 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.
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 includehttp://or a trailing slash.useVSEmust be true.alwaysFullRes: When true, the main preview image is always fetched at full resolution.
The extension has been fully integrated with Image Studio. This allows the user to launch Image Studio and utilise its powerful tools to modify the base image.
You can find more information about using Image Studio in the Amplience Studios docs
In addition to the transform parameters and prebaked query, the extension writes the following read-only fields into the content item so that a frontend can reserve the correct layout space up front and avoid Cumulative Layout Shift (CLS) — without making a second call to the DAM/DI metadata endpoint:
All three describe the delivered image — the crop rectangle when a crop is active, otherwise the source image:
width/height: the intrinsic width and height (in pixels) of the delivered image. Usable asnext/image-style intrinsic dimensions, and as an upper bound so the frontend doesn't request (and upscale) beyond the real resolution.aspectRatio:width / height, rounded to 4 dp. Bind this straight to CSSaspect-ratiofor CLS-free rendering in both the cropped and uncropped cases.
These values are populated automatically once the base image loads and are refreshed when the crop changes. They are optional in the schema, so content saved by earlier versions of the extension continues to load unchanged.
Note
Rotation is not currently reflected in these fields (e.g. a 90°/270° rotation would swap width and height), but rotation is currently disabled in this extension anyway, so it's just noting here in case it is enabled in the future.
This extension needs to be registered against a Hub with in the Dynamic Content application (Developer -> Extensions), for it to load within that Hub.
- Category: Content Field
- Label: DI Image Transformation (this will appear as the tab title in the Dashboard)
- Name: di-image-transformation (needs to be unique with the Hub)
- URL: https://di-transform.extensions.content.amplience.net
- Description: DI Image Transformation (can be left blank, if you wish)
- Initial height: 500
Note: You can use our deployed version of this extension (builds from the "production" branch) -
di-transform.extensions.content.amplience.net
As this is an open source project you're welcome to host your own "fork" of this project. You can use any standard static hosting service (Netlify, Amplify, Vercel, etc.) if you wish.
API Permissions:
- Read access
- Modify access
Sandbox permissions:
- Allow same origin
- Allow pop-ups
- Allow pop-ups to escape sandbox
- Log in, go to development and create a new schema.
- Enter "https://github.com/amplience/dc-extension-di-transform/blob/master/schema.json" as your ID (feel free to use another ID)
- Paste the contents of
schema.json(if you entered a custom schema id, ensure you update the "$id" property to match) - 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.
This project requires Node 16.x to build.
npm install -g angular-cli(if it is not already installed)npm ing 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-localhost.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.
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.
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.
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.
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.
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.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.