Add Dynamic Media assets to pages

Last update: April 17, 2024

CREATED FOR:

  • User

To add the Dynamic Media functionality to assets you use on your websites, you can add the Dynamic Media or Interactive Media component directly on the page. Enter Design mode and enabling the Dynamic Media components. Then you can add these components to the page and add assets to the component. The Dynamic Media and interactive media components are smart - they know whether you are adding an image or a video and the options available change accordingly.

You add Dynamic Media assets directly to the page if you are using Adobe Experience Manager as your WCM.

NOTE
Image maps are available out of the box for carousel banners.

Add a Dynamic Media component to a page

Adding the Dynamic Media or Interactive Media component to a page is the same as adding a component to any page. The Dynamic Media and Interactive Media components are described in detail in the following sections.

To add a Dynamic Media component/viewer to a page:

  1. In Experience Manager, open the page where you want to add the Dynamic Media component.

  2. If no Dynamic Media component is available, select the ruler in the Sidekick to enter Design mode.

  3. Select Edit parsys.

  4. Select Dynamic Media so you can make the Dynamic Media components available.

    NOTE
    See Configuring Components in Design Mode for more information.

  5. Return to Edit mode by clicking the pencil icon in the Sidekick.

  6. Drag the Dynamic Media or Interactive Media component from the Other group in the sidekick onto the page in the desired location.

  7. Select Edit so the component opens.

  8. Edit the component as necessary.

  9. Select OK so your changes are saved.

Dynamic Media Components

Dynamic Media and Interactive Media are available in the Sidekick under Dynamic Media. You use the Interactive Media component for any interactive assets such as interactive video, interactive images, or carousel sets. For all other Dynamic Media components, use the Dynamic Media component.

chlimage_1-71

NOTE
These components are not available by default and must be selected in Design mode before using. After they are made available in Design mode, you can add the components to your page as you would any other Experience Manager component.

Dynamic Media component

The Dynamic Media component is smart—depending on whether you add an image or a video, you have various options. The component supports image presets, image-based viewers such as image sets, spin sets, mixed media sets, and video. In addition, the viewer is responsive. That is, the size of the screen changes automatically based on-screen size. All viewers are HTML5-based viewers.

NOTE
When you add the Dynamic Media component, and Dynamic Media Settings is blank or you cannot add an asset properly, check the following:
  • You have enabled Dynamic Media. Dynamic Media is disabled by default.
  • The image has a pyramid tiff file. Images imported before Dynamic Media are enabled do not have a pyramid tiff file.

When working with images

The Dynamic Media component lets you add dynamic images, including image sets, spin sets, and mixed media sets. You can zoom in, zoom out, and if applicable turn an image within a spin set or select an image from another type of set.

You can also configure the viewer preset, image preset, or image format directly in the component. To make an image responsive, you can either set the breakpoints or apply a responsive image preset.

chlimage_1-72

You can edit the following Dynamic Media settings by clicking Edit in the component and then clicking the Dynamic Media Settings tab.

chlimage_1-73

NOTE
By default, the Dynamic Media image component is adaptive. If you want to make it a fixed size, set it in the component in the Advanced tab with the Width and Height properties.

Viewer preset - Select an existing viewer preset from the drop-down menu. If the viewer preset you are looking for is not visible, you must make it visible. See Managing Viewer Presets. You cannot select a viewer preset if you are using an image preset and conversely.

This option is only available if you view image sets, spin sets, or mixed media sets. The viewer presets displayed are smart. That is, only relevant viewer presets appear.

Image preset - Select an existing image preset from the drop-down menu. If the image preset you are looking for is not visible, you must make it visible. See Managing Image Presets. You cannot select a viewer preset if you are using an image preset and conversely.

This option is not available if you are viewing image sets, spin sets, or mixed media sets.

Image Modifiers - You can change image effects by supplying additional image commands. These commands are described in Managing Image Presets and the Command reference.

This option is not available if you are viewing image sets, spin sets, or mixed media sets.

Breakpoints - If you are using this asset on a responsive site, you must add the page breakpoints. Image breakpoints are separated by commas (,). This option works when there is no height or width defined in an image preset.

This option is not available if you are viewing image sets, spin sets, or mixed media sets.

You can edit the following Advanced Settings by clicking Edit in the component.

Title - Change the title of the image.

Alt Text - Add a title to the image for those users who have graphics turned off.

This option is not available if you are viewing image sets, spin sets, or mixed media sets.

URL, Open in - You can set an asset from to open a link. Set the URL and Open in to indicate whether you want it to open in the same window or a new window.

This option is not available if you are viewing image sets, spin sets, or mixed media sets.

Width and Height - Enter value in pixels if you want the image to be a fixed size. Leaving these values blank makes the asset adaptive.

When working with video

Use the Dynamic Media component to add dynamic video to your web pages. When you edit the component, you can choose to use a predefined video viewer preset for playing the video on the page.

chlimage_1-74

You can edit the following Dynamic Media Settings by clicking Edit in the component.

NOTE
By default, the Dynamic Media video component is adaptive. If you want to make it a fixed size, set it in the component with the Width and Height in the Advanced tab.

Viewer preset - Select an existing video viewer preset from the drop-down menu. If the viewer preset you are looking for is not visible, you must make it visible. See Managing Viewer Presets.

You can edit the following Advanced settings by clicking Edit in the component.

Title - Change the title of the video.

Width and Height - Enter value in pixels if you want the video to be a fixed size. Leaving these values blank makes it adaptive.

Deliver secure video

In Experience Manager 6.2, when you install FP-13480, you can control whether a video is delivered over a secure SSL connection (HTTPS) or an insecure connection (HTTP). By default, the video delivery protocol is automatically inherited from the protocol of the embedding web page. If the web page is loaded over HTTPS, the video is also delivered over HTTPS. And conversely, if the web page is on HTTP, the video is delivered over HTTP. Usually, this default behavior is fine and there is no need to make any configuration changes. However, you can override this default behavior. Append VideoPlayer.ssl=on to either the end of a URL path or to the list of other viewer configuration parameters in an embed code snippet. Either action forces secure video delivery.

For more information about secure video delivery and using the VideoPlayer.ssl configuration attribute in your URL path, see Secure Video Delivery in the Viewers Reference Guide. Besides the Video viewer, secure video delivery is available for Mixed Media viewer and Interactive Video viewer.