Magnolia 5.7 reached extended end of life on May 31, 2022. Support for this branch is limited, see End-of-life policy. Please note that to cover the extra maintenance effort, this EEoL period is a paid extension in the life of the branch. Customers who opt for the extended maintenance will need a new license key to run future versions of Magnolia 5.7. If you have any questions or to subscribe to the extended maintenance, please get in touch with your local contact at Magnolia.
See Digital asset management on how to use the app. The Assets app is installed by the DAM App module.
The Assets app allows you to manage media assets in Magnolia's digital asset management system (DAM).
You can upload original assets into the system, organize them, perform basic image manipulation operations such as cropping. The assets can be used on the website.
Configuration
The app is based on the content app framework so its configuration is typical of any content app.
The app is configured at /modules/dam-app/apps/assets
.
Node name |
---|
modules |
dam-app |
apps |
assets |
Turning the image thumbnails off in the Browser subapp
By default image thumbnails are displayed next to the asset names in the workbench of the Browser subapp:
This behavior can be changed by setting the thumbnails
property to false
under the /modules/dam-app/apps/assets/subApps/browser/workbench/contentViews/list/columns/asset
node. An icon is then displayed next to the asset name instead of the thumbnail:
The default value is set to true
in the definition class. This means that if you do not set the value to false
in the app configuration, the value is true
and the thumbnails are displayed.
Workspace
The Assets app operates on the dam
workspace. The dam
workspace stores the uploaded original assets and variations created with image operations such as cropping.
Node types
The DAM App module registers a custom mgnl:asset
node type. The Assets app operates on nodes of this type and on folders.
Editing and upload configuration
Icons, thumbnail images, preview images and supported media types are configured in /dam-app/config/editAssetAppConfigurations
. The configurations define the supported media types and asset preview configurations for each asset category. For images, the edit configuration is also configured.
Based on the SupportedMediaType
related to the Asset
, the corresponding
EditAssetAppConfiguration
is retrieved during the rendering of the detail
subapp. Only appropriate actions are displayed and can be executed in the detail
subapp. For example, users have the option to open the image editor and edit images, but this is not possible for other media types.
Here's the configuration for images:
Node name | Value |
---|---|
modules | |
dam-app | |
config | |
editAssetAppConfigurations | |
imageUploadConfig | |
previewConfig | |
iconStyleName | icon-search |
previewComponentProviderClass | info.magnolia.dam.app.ui.field.configuration.image.ImagePreviewComponentProvider |
editConfig | |
iconStyleName | icon-edit |
mediaEditorId | image |
supportedMediaTypes | |
image | image/* |
thumbnailComponentProviderClass | info.magnolia.dam.app.ui.field.configuration.image.ImageThumbnailComponentProvider |
Nodes and properties:
imageUploadConfiguration | |
| Defines the action configuration to execute if a preview of the asset is required. Previews are only configured for images. |
| icon-search displays search icon below the preview image on the left. The icon opens the image in the lightbox. |
|
ImagePreviewComponentProvider
is the image implementation of the
PreviewComponentProvider
interface. This implementation open a OverlayCloser containing an image. |
| Defines the action configuration to call the image editor configured in /modules/ui-mediaeditor/mediaEditors/image . |
| icon-edit displays edit icon below the preview image on the right. The icon opens the image image editor. |
| Media editor ID. |
| Media types are configured as a list of String properties that are a representation of the corresponding MediaType (see below). |
| By default all image formats are supported. |
|
ImageThumbnailComponentProvider
creates a thumbnail image. You can extend this for other media types by installing the Dam Preview module. |
Here's an image in the Asset dialog.
For other assets only the supportedMediaTypes
and thumbnailComponentProviderClass
nodes are configured. With one exception, they all use the same thumbnail provider class that displays an icon, and all media types are supported by default. SVG images use the image thumbnail component provider class. An image thumbnail displays but these images cannot be edited in Magnolia.
Here are the configurations in /modules/dam-app/config/editAssetAppConfigurations
.
Node name | Value |
---|---|
modules | |
dam-app | |
config | |
editAssetAppConfigurations | |
imageUploadConfig | |
audioUploadConfig | |
videoUploadConfig | |
supportedMediaTypes | |
video | video/* |
thumbnailComponentProviderClass | info.magnolia.dam.app.ui.field.configuration.icon.IconThumbnailComponentProvider |
flashUploadConfig | |
applicationUploadConfig | |
documentUploadConfig | |
svgUploadConfig | |
supportedMediaTypes | |
image | image/svg+xml |
thumbnailComponentProviderClass | info.magnolia.dam.app.ui.field.configuration.image.ImageThumbnailComponentProvider |
Nodes and properties:
<upload configuration name> | |
| Media types are configured as a list of String properties that are a representation of the corresponding MediaType (see below). |
| By default all asset formats are supported. |
|
IconThumbnailComponentProvider
creates an icon's thumbnail related to the file media type. |
Here's a video in the Asset dialog.
MediaTypes
in the SupportedMediaTypes
node are configured as a list of String
properties. These String
properties are a representation of the corresponding MediaType
:
String incommingMimeType = "image/png"; // 'image/*' is the string to be put in configuration if the config has to support all images MediaType allImage = MediaType.parse("image/*"); // 'image/Jpeg' is the string to be put in configuration if the config has to support only jpeg MediaType onlyJpeg = MediaType.parse("image/jpeg"); // RETURN TRUE boolean isImage = MediaType.parse(incommingMimeType).is(allImage); // RETURN FALSE boolean isJpeg = MediaType.parse(incommingMimeType).is(onlyJpeg);
Using the app
See Digital asset management for how to use the Assets app to store and use your media files.
The DAM can handle a very large amounts of assets. However, if you have 20'000 or more assets you should organize them into folders. Avoid too many assets in the same folder. Instead, create subfolders and organize your assets. Too many assets within the same folder may lead to performance issues. If you need a very big unstructured, flat list, disable the thumbnail and list views.