Add Dynamic Media Classic components to pages

Last update: May 3, 2023

Topics:
Dynamic Media Classic

CREATED FOR:

User

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.

Adobe Dynamic Media Classic is a hosted solution for managing, enhancing, publishing, and delivering rich media assets to Web, mobile, email, and Internet-connected displays and print.

You can view AEM assets published in Dynamic Media Classic in various viewers:

Zoom
Flyout
Video
Image Template
Image

You can publish digital assets directly from AEM to Dynamic Media Classic and you can publish digital assets from Dynamic Media Classic to AEM.

This document describes how to publish digital assets from AEM to Dynamic Media Classic and vice versa. Viewers are also described in detail. For information on configuring AEM for Dynamic Media Classic, see Integrating Dynamic Media Classic with AEM.

Manually publishing to Dynamic Media Classic from assets

You can publish digital assets to Dynamic Media Classic as follows:

NOTE

AEM publishes to Dynamic Media Classic asynchronously. After you click Publish, it may take several seconds for your asset to publish to Dynamic Media Classic.

Dynamic Media Classic components

The following Dynamic Media Classic components are available in AEM:

Zoom
Flyout (Zoom)
Image Template
Image
Video

NOTE

These components are not available by default and need to be selected in Design mode before using.

After they are made available in Design mode, you can add the components to your page like any other AEM component. Assets that have not yet been published to Dynamic Media Classic are published to Dynamic Media Classic if in a synchronized folder or on a page or with a Dynamic Media Classic cloud configuration.

NOTE

If you are creating and developing custom viewers and using the Content Finder, you need to explicity add the allowfullscreen parameter.

Flash Viewers End-of-Life Notice

Effective January 31, 2017, Adobe Dynamic Media Classic ended support for the Flash viewer platform.

Adding a Dynamic Media Classic component (Scene7) to a page

Adding a Dynamic Media Classic (Scene7) component to a page is the same as adding a component to any page. Dynamic Media Classic components are described in detail in the following sections.

To add a Dynamic Media Classic (Scene7) component to a page:

In AEM, open the page where you want to add the Dynamic Media Classic (Scene7) component.
If no Dynamic Media Classic components are available, click Design mode, tap any component with a blue border, tap the Parent icon, and then the Configuration icon. In Parsys (Design), select all the Dynamic Media Classic components to make them available and click OK.
Click Edit to return to Edit mode.
Drag a component from the Dynamic Media Classic group in the sidekick onto the page in the desired location.
Click the Configuration icon to open the component.
Edit the component as necessary and click OK to save changes.
Drag your image or video from the content browser onto the Dynamic Media Classic component you added to the page.

NOTE
In touch UI only, you must drag and drop the image or video onto the Dynamic Media Classic component you placed on the page. Selecting and editing the Dynamic Media Classic component and then choosing the asset is not supported.

Adding interactive viewing experiences to a responsive site

Responsive design for your assets means that your assets adapts depending on where it is displayed. With responsive design, the same assets can be effectively displayed on multiple devices.

To add an interactive viewing experience to a responsive site:

Log in to AEM, and ensure that you have configured Adobe Dynamic Media Classic Cloud Services and that Dynamic Media Classic components are available.

NOTE
If Dynamic Media Classic components are not available, be sure to enable them by way of Design mode.
In a website with the Dynamic Media Classic components enabled, drag an Image component to the page.
Select the component and tap the configuration icon.
In the Dynamic Media Classic Settings tab, adjust the breakpoints.
Confirm that the viewers are responsively resizing and that all interactions are optimized for desktop, tablet, and mobile.

Settings common to all Dynamic Media Classic components

Although configuration options vary, the following are common to all Dynamic Media Classic components:

File Reference
Browse to a file that you want to reference. File reference shows the asset URL and not necessarily the full Dynamic Media Classic URL including the URL commands and parameters. You cannot add Dynamic Media Classic URL commands and parameters in this field. They have to be added through the corresponding functionality in the component.
Width
Lets you set the width.
Height
Lets you set the height.

You set these configuration options by opening (double-clicking) a Dynamic Media Classic component, for example, when you open a Zoom component:

chlimage_1-226

Zoom

The HTML5 Zoom component displays a larger image when you press the + button.

The asset has zoom tools at the bottom. Tap + to enlarge. Tap - to reduce. Tapping the x or the reset zoom arrow brings the image back to the original size it was imported as. Tap the diagonal arrows to make it full screen. Tap Edit to configure the component. With this component, you can configure settings common to all Dynamic Media Classic components.

chlimage_1-227

In the HTML5 Flyout component, the asset is shown as split screen; left the asset in the specified size; right the zoom portion is displayed. Tap Edit to configure the component. With this component, you can configure settings common to all Dynamic Media Classic components.

NOTE

If your Flyout component uses a custom size, then that custom size is used and responsive setup of the component is disabled.

If your Flyout component uses the default size, as set in the Design View, then the default size is used and the component stretches to accomodate the page layout size with responsive setup of the component enabled. Be aware, however, that there is a limitation on responsive setup of the component. When the you use the Flyout component with responsive setup, you should not use it with full page stretch. Otherwise, the Flyout may extend beyond the page’s right border.

chlimage_1-228

Image

The Dynamic Media Classic Image component lets you add Dynamic Media Classic functionality to your images, such as Dynamic Media Classic modifiers, image or viewer presets, and sharpening. The Dynamic Media Classic Image component is similar to other image components in AEM with special Dynamic Media Classic functionality. In this example, the image has the Dynamic Media Classic URL modifier, &op_invert=1 applied.

chlimage_1-229

Title, Alt Text
In the Advanced tab, add a title to the image and alt text for those users who have graphics turned off.
URL, Open in
You can set an asset from to open a link. Set the URL and in Open in indicate whether you want it to open in the same window or a new window.

chlimage_1-230

Viewer preset
Select an existing viewer preset from the drop-down menu. If the viewer preset you are looking for is not visible, you may need to make it visible. See Managing Viewer Presets. You cannot select a viewer preset if you are using an image preset and vice versa.
Dynamic Media Classic Configuration
Select the Dynamic Media Classic configuration you want to use to fetch active image presets from SPS.
Image preset
Select an existing image preset from the drop-down menu. If the image preset you are looking for is not visible, you may need to make it visible. See Managing Image Presets. You cannot select a viewer preset if you are using an image preset and vice versa.
Output Format
Select the output format of the image, for example jpeg. Depending on the output format you select, you may have additional configuration options. See Image Preset best practices.
Sharpening
Select how you want to sharpen the image. Sharpening is explained in detail in Image Preset best practices and Sharpening best practices.
URL Modifiers
You can change image effects by supplying additional Dynamic Media Classic image commands. These are described in Image Presets and the Command reference.
Breakpoints
If your website is responsive, you want to adjust the breakpoints. Breakpoints must be separated by commas ( , ).

Image Template

Dynamic Media Classic Image Templates are layered Photoshop content that was imported to Dynamic Media Classic, where content and properties were parameterized for variability. The Image template component lets you import images and change the text dynamically in AEM. In addition, you can configure the Image template component to use values from client context, so that each user experiences the image in a personalized way.

Tap Edit to configure the component. You can configure settings common to all Dynamic Media Classic components as well as other settings described in this section.

chlimage_1-231

File Reference, Width, Height
See settings common to all Dynamic Media Classic components.

NOTE
Dynamic Media Classic URL commands and parameters cannot be added to the File Reference URL directly. They can only be defined in the component UI in the Parameter panel.
Title, Alt Text
In the Dynamic Media Classic Image Template tab, add a title to the image and alt text for those users who have graphics turned off.
URL, Open in
You can set an asset from to open a link. Set the URL and in Open in indicate whether you want it to open in the same window or a new window.

chlimage_1-232

Parameter Panel
When importing an image, the parameters are pre-populated with information from the image. If there is no content that can be dynamically changed, this window is empty.

chlimage_1-233

Changing text dynamically

To change the text dynamically, enter new text in the fields and click OK. In this example, the Price is now $50 and shipping is 99 cents.

chlimage_1-234

The text in the image changes. You can reset the text back to the original value by tapping Reset next to the field.

chlimage_1-235

Changing text to reflect the value of a client context value

To link a field to a client context value, tap Select to open the client-context menu, select the client context, and tap OK. In this example, the name changes based on linking the Name with the formatted name in the profile.

chlimage_1-236

The text reflects the name of the currently logged in user. You can reset the text back to the original value by clicking Reset next to the field.

chlimage_1-237

Making the Dynamic Media Classic Image Template a link

On the page with the Dynamic Media Classic Image Template component, tap Edit.
In the URL field, enter the URL that users go to when the image is tapped. In the Open in field, select whether you want the target to open (a new window or same window).
Tap OK.

Video component

The Dynamic Media Classic Video component (available from the Dynamic Media Classic section of the sidekick) uses device and bandwidth detection to serve the right video to each screen. This component is an HTML5 video player; it is a single viewer that can be used cross channel.

It can be used for adaptive video sets, a single MP4 video, or a single F4V video.

See Video for more information on how videos work with Dynamic Media Classic integration. In addition, see the Dynamic Media Classic Video component versus the Foundation Video component.

chlimage_1-239

Known limitations for the video component

Adobe DAM and WCM shows if a master video is uploaded. They do not show these proxy assets:

Dynamic Media Classic encoded renditions
Dynamic Media Classic adaptive video sets

When using an adaptive video set with the Dynamic Media Classic video component, you need to resize the component to fit the dimensions of the video.

Dynamic Media Classic content browser

The Dynamic Media Classic content browser lets you view content from Dynamic Media Classic directly in AEM. To access the content browser, in the Content Finder, select Dynamic Media Classic in the touch-optimized user interface or the S7 icon in the classic user interface. Functionality is identical between both user interfaces.

If you have multiple configurations, AEM by default displays the default configuration. You can select different configurations directly in the Dynamic Media Classic content browser in the drop-down menu.

NOTE

Assets located in the ad-hoc folder will not appear in the Dynamic Media Classic content browser.
When Secure Preview is enabled, both published and unpublished assets on Dynamic Media Classic do appear in the Dynamic Media Classic content browser.
If you do not see Dynamic Media Classic or the S7 icon as an option in the content browser, you need to configure Dynamic Media Classic to work with AEM.
For video, the Dynamic Media Classic content browser supports:
- Adaptive Video Sets: container of all video renditions needed for seamless playback across multiple screens
- Single MP4 video
- Single F4V video

Browsing content in the touch-optimized UI

You can access the content browser either in the touch-optimized or classic UI. Currently the touch-optimized has the following limitation:

FXG and Flash assets from Dynamic Media Classic are not supported.

Browse Dynamic Media Classic assets by selecting Dynamic Media Classic from the third drop-down menu. Dynamic Media Classic does not appear in the list if you have not configured Dynamic Media Classic/AEM integration.

NOTE

The Dynamic Media Classic content browser loads about 100 assets and sorts them by name.
If you have a secure preview server set, the browser will use that preview server to render thumbnails and assets.

chlimage_1-240

In addition, you can browse resolution information, size, days since modification, and file name by hovering over the asset in the browser.

chlimage_1-241

For Adaptive Video Sets and Templates, no size information is generated for thumbnails.
For Adaptive Video Sets, no resolution is generated for thumbnails.

Searching for Dynamic Media Classic assets with the content browser

Searching for Dynamic Media Classic assets is similar to searching AEM assets except that when you search you are actually seeing a remote view of the assets in the Dynamic Media Classic system, rather than importing them directly into AEM.

You can use either the classic UI or the touch-optimized UI to both view and search for assets. Depending on the interface, how you search is slightly different.

When searching in either UI, you can filter by the following criteria (shown here in the touch-optimized UI):

Enter keywords
You can search assets by name. When searching the keywords you enter is what the file name starts with. For example, typing the word “swimming” would look for any asset file names that start with those letters in that order. Be sure to tap enter after you type the term to find the asset.

chlimage_1-242

Folder/path
The name of the folder that appears is based on the configuration you have selected. You can drill down to lower levels by tapping the folder icon and selecting a sub-folder, then tapping the checkmark to select it.

If you enter a keyword and select a folder, AEM searches that folder and any sub-folders. However, if you do not enter any keywords when searching, selecting the folder will only show the assets in that folder and will not include any subfolders.

By default, AEM searches the folder selected and all sub-folders.

chlimage_1-243

Type of Asset
Select Dynamic Media Classic to browse Dynamic Media Classic content. This option is only available if Dynamic Media Classic has been configured.

chlimage_1-244

Configuration
If you have more than one Dynamic Media Classic configuration defined in Cloud Services, you can select it here. As a result the folder will change based on the configuration you have chosen.

chlimage_1-245

Asset type
Within the Dynamic Media Classic browser, you can filter results to include any of the following: images, templates, videos, and adaptive video sets. If you do not select any asset type, AEM by default searches all asset types.

chlimage_1-246

NOTE

In the classic UI, you can also search for Flash and FXG. Filtering for these in the touch-optimized UI is currently not supported.
When searching video, you are searching a single rendition. Results return the original rendition (only *.mp4) and the encoded rendition.
When searching an adaptive video set, you are searching the folder and all sub-folders but only if you have added a keyword to the search. If you have not added a keyword, AEM does not search the sub-folders.

Publish Status
You can filter for assets based on publication status: Unpublished or Published. If you do not select any Publish Status, AEM by default searches all publish statuses.

chlimage_1-247

recommendation-more-help