Create and configure Asset Editor pages

Last update: May 3, 2023

Topics:
Developer Tools,Asset Management

CREATED FOR:

User
Admin

CAUTION

AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our technical support periods. Find the supported versions here.

This document describes the following:

Why you would create customized Asset Editor pages.
How to create and customize Asset Editor pages, which are WCM pages that let you view and edit metadata as well as perform actions on the asset.
How to edit multiple assets simultaneously.

NOTE

Asset Share is available as an open source reference implementation. See Asset Share Commons . It is not officially supported.

Why Create and Configure Asset Editor Pages?

Digital Asset Management is being used in more and more scenarios. When moving from a small-scale solution for a small user group of professionally trained users - for example photographers or taxonomists - to larger and more diverse user groups - for example business users, WCM authors, journalists, and so on - the powerful user interface of Adobe Experience Manager Assets for professional users can provide too much information and stakeholders start to request specific user interfaces or applications to access the digital assets that are of relevance to them.

These asset-centric applications can be simple photo galleries in an intranet where employees can upload photos from trade show visits or a press center in a public-facing website, such as the example provided with Geometrixx. Asset-centric applications can also extend to complete solutions including shopping carts, checkout, and verification processes.

Creating an asset-centric application becomes to a large extent a configuration process that does not require coding, only knowledge of user groups and their needs as well as knowledge of the metadata being used. Asset-centric applications created with Assets are extensible: with moderate coding effort reusable components for searching, viewing, and modifying assets can be created.

An asset-centric application in Experience Manager consists of an Asset Editor page, which can be used to get a detailed view of a specific asset. An Asset Editor page also allows for the editing of metadata, provided the user accessing the asset has the necessary permissions.

You customize the DAM Finder functionality and create pages that have all the functionality you require, which are called Asset Share pages. To create a new Asset Share page, you add the page using the Geometrixx Asset Share template and then you customize the actions users can perform on that page, determine how viewers see the assets, and decide how users can build their queries.

Here are some use cases for creating a customized Asset Share page:

Press Center for Journalists
Image Search Engine for internal business users
Image Database for website users
Media Tagging Interface for metadata editors

To create a new Asset Share page, you can either create it when you are working on web sites or from the digital asset manager.

NOTE

By default, when you create an Asset Share page from New in the digital asset manager, an Asset viewer and Asset editor are automatically created for you.

To create an new Asset Share page in the Websites console:

In the Websites tab, navigate to the place where you want to create an asset share page and click New.
Select the Asset Share page and click Create. The new page is created and the asset share page is listed in the Websites tab.

dam8

The basic page created using the Geometrixx DAM Asset Share template looks as follows:

screen_shot_2012-04-18at115456am

To customize your Asset Share page, you use elements from the sidekick and you also edit query builder properties. The page Geometrixx Press Center is a customized version of a page based on this template:

screen_shot_2012-04-19at123048pm

To create a new asset share page via the digital asset manager:

In the digital asset manager, in New, select New Asset Share.
In the Title, enter the name of the asset share page. If desired, enter a name for the URL.
Double-click the asset share page to open it and configure the page.

By default, when you create an Asset Share page from New, an Asset viewer and Asset editor are automatically created for you.

Customize actions

You can determine what actions users can perform on selected digital assets from a selection of predefined actions.

To add actions to the Asset Share page:

In the Asset Share page that you want to customize, click Actions in the sidekick.

The following actions are available:

Action

Description

Delete Action

Users can delete the selected assets.

Download Action

Lets users download selected assets to their computers.

Lightbox Action

Saves assets to a “lightbox” where you can perform other actions on them. This comes in handy when working with assets across multiple pages. The lightbox can also be used as a shopping cart for assets.

Move Action

Users can move the asset to another location

Tags Action

Lets users add tags to selected assets

View Asset Action

Opens the asset in the Asset editor for user manipulation.

Drag the appropriate action to the Actions area on the page. Doing so creates a button that is used to execute that action.

Determine how search results are presented

You determine how results are displayed from a predefined list of lenses.

To change how search results are viewed:

In the Asset Share page that you want to customize, click Search.
Drag the appropriate lens to the top center of the page. In the Press Center, the lenses are already available. Users press the appropriate lens icon to display search results as desired.

The following lenses are available:

Lens

Description

List Lens

Presents the assets in a list fashion with details.

Mosaic Lens

Presents assets in a mosaic fashion.

Mosaic Lens

chlimage_1-388

List Lens

chlimage_1-389

Customize the Query Builder

The query builder lets you enter search terms and create content for the Asset Share page. When you edit the query builder, you also get to determine how many search results are displayed per page, which asset editor opens when you double-click an asset, the path the query searches, and customizes nodetypes.

To customize the query builder:

In the Asset Share page that you want to customize, click Edit in the Query Builder. By default, the General tab opens.
Select the number of results per page, the path of the asset editor (if you have a customized asset editor) and the Actions title.
Click the Paths tab. Enter a path or multiple paths that the search will run. These paths are overwritten if the user uses the Paths predicate.
Enter another node type, if desired.
In the Query Builder URL field, you can override or wrap the query builder and enter the new servlet URLs with the existing query builder component. In the Feed URL field, you can override the Feed URL as well.
In the Text field, enter the text you want to appear for results and page numbers of results. Click OK when finished making changes.

Add predicates

Experience Manager Assets includes a number of predicates that you can add to the Asset Share page. These let your users further narrow searches. In some cases, they may override a query builder parameter (for example, the Path parameter).

To add predicates:

In the Asset Share page that you want to customize, click Search.
Drag the appropriate predicates to the Asset Share page underneath the query builder. Doing so creates the appropriate fields.

The following predicates are available:

Predicate

Description

Date Predicate

Lets users search for assets that were modified before and after certain dates.

Options Predicate

The site owner can specify a property to search for (as in the property predicate, for example cq:tags) and a content tree to populate the options from (for example the tag tree). Doing so generates a list of options where the users can select the values (tags) that the selected property (tag property) should have. This predicate lets you build list controls like the list of tags, file types, image orientations, and so on. It is great for a fixed set of options.

Path Predicate

Lets users define the path and subfolders, if desired.

Property Predicate

The site owner specifies a property to search for, e.g. tiff:ImageLength and the user can then enter a value, e.g. 800. This returns all images that are 800 pixels high. Useful predicate if your property can have arbitrary values.

For more information, see the predicate javadocs.

To configure the predicate further, double-click it. For example, when you open the Path Predicate, you need to assign the root path.

Create and configure an Asset Editor page

You customize the asset editor to determine how users can view and edit the digital assets. To do this, you create a new Asset Editor page and then customize the views and the actions users can perform on that page.

NOTE

If you want to add custom fields to the DAM asset editor, add new cq:Widget nodes to /apps/dam/content/asseteditors.

Creat the Asset Editor page

When creating the Asset Editor page, a good practice is to create the page directly below the Asset Share page.

To create an Asset Editor page:

In the Websites tab, navigate to the place where you want to create an asset editor page and click New.
Select Geometrixx Asset Editor and click Create. The new page is created and the page is listed in the Websites tab.

screen_shot_2012-04-23at15858pm

The basic page created using the Geometrixx Asset Editor template looks as follows:

assetshare5

To customize your Asset Editor page, use elements from the sidekick. The Asset Editor page that is accessed from the Geometrixx Press Center is a customized version of a page based on this template:

assetshare6

After you have created the customized Asset Editor page, you need to ensure that when you double-click assets that the customized Asset Share you created opens the assets in the customized Editor page.

To set the Asset Editor page:

In the Asset Share page, click Edit next to the Query Builder.
Click the General tab if it is not already selected.
In the Path of Asset Editor field, enter the path to the asset editor you want the Asset Share page to open assets in and click OK.

Add Asset Editor components

You determine what functionality an asset editor has by adding components to the page.

To add asset editor components:

In the Asset Editor page that you want to customize, select Asset Editor in the sidekick. All available asset editor components are displayed.

NOTE
What you can customize depends on what components are available. To enable components, go to Design mode and select the components you need enabled.
Drag the components from the sidekick to the asset editor and make any modifications in the component dialogs. The components are described in the following table and described in the detailed instructions that follow.

NOTE
When designing the asset editor page, you create components that are either read-only or editable. Users know a field can be edited if an image of a pencil appears in that component. By default, most components are set up as read-only.

Component
Description
Metadata Form and Metadata Text Field
Lets you add additional metadata to an asset and perform an action, such as submitting, on that asset.
Sub Assets
Lets you customize sub-assets.
Tags
Lets users select and add tags to an asset.
Thumbnail
Shows a thumbnail of the asset, its filename, and lets you add an alternate text. You can add asset editor actions here as well.
Title
Displays the asset title, which can be customized.

Metadata Form and Text Field - Configuring the View Metadata Component

The Metadata Form is a form that includes a start and end action. In between, you enter Text fields. See Forms for more information on working with forms.

Create a start action by clicking Edit in the Start area of the form. You can enter a Box title, if desired. By default, the Box title is Metadata. Select the Client Validation check box if you want the java-script client code for validation generated.
Create an End action by clicking Edit in the End area of the form. For example, you may want to create a Submit button to allow users to submit their metadata changes. Optionally, you can add a Reset button that resets the metadata to its original state.
In between the Form Start and the Form End, drag Metadata Text Fields to the form. Users populate metadata into these text fields, which they can submit or complete another action on.
Double-click the field name, for example, Title to open the metadata field and make changes. In the General tab of the Edit Component window, you define the namespace and the field label as well as type, for example, dc:title.

See Customizing and Extending Assets for information on modifying the namespaces available in the metadata form.
Click the Constraints tab. Here you can select whether a field is required and if necessary, add any constraints.
Click the Display tab. Here, you can enter a new width and number of rows for the metadata field. Select the Field is read only checkbox to allow users to edit the metadata.

The following is an example of a Metadata form with various fields:

On the Asset Editor page, users can then enter values into the metadata fields (if they are editable) and perform the end action (for example, submitting the changes).

Sub Assets

The Sub Assets component is where you can view and select sub-assets. You can determine what names appear under the main asset and sub-assets.

screen_shot_2012-04-23at24025pm

Double-click the Sub Assets component to open the sub assets dialog where you can change the titles for the main asset and any sub assets. The default values appear below the corresponding field.

screen_shot_2012-04-23at23907pm

The following is an example of a populated Sub Assets component:

screen_shot_2012-04-23at24442pm

For example, if you select a sub asset, note how the component displays the appropriate page and the Box title changes from Sub Assets to Siblings.

screen_shot_2012-04-23at24552pm

Thumbnail

The Thumbnail component is where the asset displays the selected thumbnail (for many of the formats the thumbnail is extracted automatically). In addition, the component displays the filename, and actions that you can modify.

screen_shot_2012-04-23at25452pm

Double-click the thumbnail component to open the thumbnail dialog where you can change the alt text. By default, the thumbnail alt text defaults to Click to download asset.

screen_shot_2012-04-23at25604pm

The following is an example of a populated Thumbnail component:

screen_shot_2012-04-23at34815pm

Title

The Title component displays the title of the asset and a description.

chlimage_1-391

By default, it is in read-only mode so users cannot edit it. To make it editable, double-click the component and clear the Hide edit button checkbox. In addition, enter a title for multiple assets.

screen_shot_2012-04-23at35100pm

If the Title can be edited, you can add a title and description by clicking the Pencil to open the Asset Properties window. In addition, you can turn the asset on and off by selecting the date and time.

When users edit the Title by clicking the Pencil icon, they can change the Title, Description, and enter On and Off Times to turn the asset on and off.

screen_shot_2012-04-23at35241pm

The following is an example of a populated Title component:

chlimage_1-392

Add Asset Editor actions

You can determine what actions users can perform on selected digital assets from a selection of predefined actions.

To add actions to the Asset Editor page:

In the Asset Editor page that you want to customize, click Asset Editor in the sidekick.

The following actions are available:

Action
Description
Download
Lets users download selected assets to their computers.
Editors
Lets users edit an image (interactive editing)
Lightbox
Saves assets to a “lightbox” where you can perform other actions on them. This comes in handy when working with assets across multiple pages.
Locking
Lets users lock an asset. This functionality is not enabled by default and needs to be enabled in the list of components.
References
Click this to show on what pages the asset is being used.
Versioning
Lets you create and restore versions of an asset.
Drag the appropriate action to the Actions area on the page. Doing so creates a button that is used to execute that action.

chlimage_1-393

Edit multiple assets with the Asset Editor page

With Assets you can make changes to several assets at once. After having selected assets, you can simultaneously change their:

Tags
Metadata

To multi-edit assets with the Asset Editor page:

Open the Geometrixx Press Center page at http://localhost:4502/content/geometrixx/en/company/press.html.
Select the assets:
- on Windows: Ctrl + click each asset.
- on Mac: Cmd + click each asset.
To select a range of assets: click the first asset then Shift + click the last asset.
Click Edit Metadata in the Actions field (left part of the page).
The Geometrixx Press Center Asset Editor page opens in a new tab. The metadata of the assets are displayed as follows:
- A tag, that does not apply to all the assets but only to a few ones, is displayed in italics.
- A tag that applies to all the assets is displayed with a normal font.
- Metadata other than tags: the value of the field is only displayed if it is the same for all the selected assets.
Click Download to download a ZIP file containing the assets original renditions.
Click the pencil icon beside the Tags field to edit the tags:
- A tag that does not apply to all the assets, but only to a few ones has a grey background.
- A tag that applies to all the assets has a white background.
You can:
- Click the x icon to remove the tag for all the assets.
- Click the + icon to add the tag to all the assets.
- Click the arrow and select a tag to add a new tag to all the assets.
Click OK to write the changes to the form. The box beside the Tags field is automatically checked.
Edit the Description field. For example set it to: This is a common description. When a field is edited, its value overwrites the existing values of the selected assets when the form is submitted. The box beside the field is automatically checked when the field is edited.

This is a common description

When a field is edited, its value overwrites the existing values of the selected assets when the form is submitted.

Note: the box beside the field is automatically checked when the field is edited.
Click Update Metadata to submit the form and save the changes for all the assets. Only the checked metadata are modified.

recommendation-more-help

Create and configure Asset Editor pages

Why Create and Configure Asset Editor Pages?

Create and configure an Asset Share page

Create an Asset Share page

Customize actions

Determine how search results are presented

Mosaic Lens

List Lens

Customize the Query Builder

Add predicates

Create and configure an Asset Editor page

Creat the Asset Editor page

Set which Asset Editor opens from an Asset Share page

Add Asset Editor components

Metadata Form and Text Field - Configuring the View Metadata Component

Sub Assets

Tags

Thumbnail

Title

Add Asset Editor actions

Edit multiple assets with the Asset Editor page