Transformations are dynamically generated variations of an origin asset
Unlike versions or edited images, transformations do not create separate files in the DAM.
Transformations are generated via URL query parameters and can be created graphically via the Filerobot Image Editor for single assets or programmatically in bulk.
There are 2 ways to use transformations once created:
Download them to your local computer for further re-use. Various formats are available when downloading a transformation.
Deliver over optimized (JPEG, WebP or AVIF) CDN URLs
When you are using Filerobot DAM, you will notice that we introduce the concept of File Version vs. File Transformation.
In order to create a new image transformation, you can open the transformation panel within the Asset Management modal:
Here the user has the option to create a new transformation by clicking on + Add transformation box. The Image Editor pops up and allows the user to create and save a transformation graphically:
Once the transformation is saved, you can hover over it to either download it directly or copy an optimized CDN link to your clipboard for further distribution:
For example, the optimized CDN link to the feed portrait transformation for Instagram looks like:
The query parameters suffixed to the image CDN URL trigger Filerobot to generate the transformation on-the-fly and cache it in the CDN.
Unlike single transformations which are created using the Image Editor for each asset, custom presets are the way to go when it comes to generating transformations automatically in bulk.
Navigate to the Settings / Project / Process / Delivery URLs page and scroll to the Dynamic asset transformation presets section to create a preset:
To create the new Preset, click the "+ Add preset" button and pick a file to work on. Then, an Image Editor will pop up, letting you crop the test image as you like, add a watermark, or apply a certain effect.
When you are ready, save the changes. Filerobot will generate a Preset, containing the chosen operations and filters. You can always review the exact configuration and rewrite it using the "..." menu -> Edit or Edit in Image Editor.
For each Preset, you can set the "Autogenerate" option and the transformation will apply automatically whenever you upload new images.
Additionally, you can select only specific Presets (image transformations) to be generated during image upload.
The custom preset created above can be used with the query parameter p (for "preset") to generate the transformation:
Leverage the Filerobot Image Editor to edit images directly in the browser
In Filerobot you can crop, resize, apply different filters and add watermarks to your images. You can save the results as a variant of the main image or an entirely new asset.
The Edit image button opens the Image Editor.
The Image Editor is a feature-rich inline image editor that supports the most commonly used image editing function of image editing software:
When you are ready with the Editing, click on "Save".
Feature | Available options: |
---|---|
Adjust
Custom - contains predefined width&height cropping values, including standard sizes for the most popular Social media banners, logos, stories, etc
Rotate - option to rotate the image per 90 degrees
Flip X - flip the image horizontally
Flip Y - flip the image vertically
Resize
An option to specify the cropping values for width&height manually. You can drag and resize the cropping area with the mouse.
Finetune
Brightness - control the overall lightness or darkness of your photo. Slide right for lighter images and left for darker tones.
Contrast - determine the distinction between light and dark areas in your image. Higher contrast can evoke energy and intensity, while lower contrast might create a more subdued or nostalgic atmosphere.
HSV - it stays for "Hue, Saturation, Value". Hue determines the color like green, red, blue, etc. Moving the slider left or right will shift the colors along the color wheel. Saturation controls the intensity or purity of a color. Higher saturation makes colors more vibrant, while lower saturation makes them more muted. Value (also known as brightness) affects the lightness or darkness of a color. Adjusting HSV can dramatically influence the emotional tone of your photo.
Blur - reduce the sharpness and clarity of the entire image.
Warmth - control the balance between warm tones (such as reds, oranges, and yellows) and cool tones (such as blues and greens) in your photos. Warmth adjustments can evoke feelings of coziness, nostalgia, or vibrancy, depending on the desired outcome.
Filters
Select from more than 40 filters to enhance your images.
Watermark
Add watermark - add an already uploaded watermark image to your asset
Upload watermark - choose an image that to be applied as a watermark
Add as text - create a watermark of your choice, applying it as a free text to your image
Draw
Sketching tool
The asset management modal is the go-to place to manage and collaborate on an asset. You can access it in 3 ways:
Double-click on an asset
via the Manage menu in the contextual (right-click) menu
via the Manage menu in the action bar
4 tabs are available for managing the asset:
If #products are enabled, the Product reference and Product position can be set and viewed here.
Custom metadata fields can be edited and viewed here. See Metadata for details on how to create the metadata structure.
Embedded Metadata
Embedded IPTC/XMP metadata are displayed here. Requires the Extract embedded metadata post process to be enabled under Automations for this section to display.
This tab shows details about various activities performed on an asset:
Rename
Move
Ownership change
Visibility changes
Metadata changes
Tags change
Labels change
New comment
Sharing & permissions change
Based on the versioning behavior configured on your token (see #duplicate-check setting), this tab will show the version history of an asset and allows to restore a previous version.
This tab allows users to view and add written comments or graphical annotations on assets for better collaboration. Various features such as liking, answering, quoting another user or team are available.
Furthermore, users can Edit images or Create transformations.
The Details tab displays all descriptive information of the asset such as technical details, product-related information, metadata and embedded metadata. The fields can be edited by clicking on the icon.
Field | Description |
---|---|
Name
The file name
Title
Multi-lingual title of the asset
Description
Multi-lingual description of the asset
Tags
Multi-lingual tags associated to the asset. Tags can be added manually (free input or from tag dictionnary) or automatically via AI. See Tags.
Labels
Labels are advanced tags with a dedicated page to view labeled assets. See Labels.
Orientation
Portrait or landscape
Main colors
Image's main colors. Requires the Dominant color extraction post process to be activated.