Enable Dynamic Media components

If no Dynamic Media components are available to add to a page, it likely means that you must first enable the components that you want to use.

To enable Dynamic Media components:

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

  2. On the left side of the toolbar near the top of the page, select the Page Information icon, then select Edit Template from the drop-down list.

    edit-template

  3. On the right side of the toolbar near the top of the page, from the drop-down list, select Structure.

    Policy

  4. Near the bottom of the page, select Layout Container to open its toolbar, then select the Policy icon.

  5. On the Layout Container page, under the Properties heading, make sure that the Allowed Components tab is selected.

    Allowed components

  6. Scroll until you see Dynamic Media.

  7. Select the > icon to the left of Dynamic Media so you can expand the list, then select the Dynamic Media components you want to enable.

    Dynamic Media components list

  8. Near the upper-right corner of the Layout Container page, select the Done (checkmark) icon.

  9. On the right side of the toolbar near the top of the page, from the drop-down list, select Initial Content, then add a Dynamic Media component to a page as usual.

Localize Dynamic Media components

You can localize Dynamic Media components in one of two ways:

  • Within a web page in Sites, open Properties and select the Advanced tab. Select the desired language for localization.

    chlimage_1-172

  • From the site selector, select the desired page or page group. Select Properties and select the Advanced tab. Select the desired language for localization.

    NOTE
    Not all languages available in the Language menu currently have tokens assigned.

Dynamic Media Components

Dynamic Media components are available when you select the Components icon, then filter on Dynamic Media.

The Dynamic Media components that are available include the following:

  • Dynamic Media - Use for such assets as images, video, eCatalogs, and spin sets.
  • Interactive Media - Use for any interactive assets such as interactive video, interactive images, or carousel sets.
  • Panoramic Media - Use for panoramic image or panoramic VR image assets.
  • Video 360 Media - Use for 360 video and 360 VR video assets.
NOTE
These components are not available by default; they must be made available by way of the template editor before you use them. After they are made available in the template editor, you can add the components to your page as you would any other Experience Manager component.

6_5_dynamicmediawcmcomponents

Dynamic Media component

The Dynamic Media component is smart. 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 - the size of the screen changes automatically based on-screen size. All viewers are HTML5 viewers.

NOTE
If your web page has the following:
  • Multiple instances of the Dynamic Media component being used on the same page.
  • Each instance uses the same asset type.
Assigning a different viewer preset to each Dynamic Media component on that page is not supported.
You can, however, use the same viewer preset for all Dynamic Media components that use assets of the same type, within the page.

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 that you import before you enable Dynamic Media 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.

Edit the following Dynamic Media Settings by selecting the Edit icon in the component and then Dynamic Media Settings.

dm-settings-image-preset

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.
  • 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 Manage viewer presets. You cannot select a viewer preset if you are using an image preset and conversely.

    This option is the only one available if you are viewing image sets, spin sets, or mixed media sets. The viewer presets displayed are smart - only relevant viewer presets appear.

  • Viewer modifiers - Viewer modifiers take the form of name=value pair with a & delimiter and let you change viewers as outlined in the Viewers Reference Guide. An example of a viewer modifier is posterimage=img.jpg&caption=text.vtt,1 that sets a different image for the video thumbnail and associates a closed caption file with the video.

  • 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 apply image effects by supplying additional image commands. These effects are described in Image Presets and the Image Serving 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 image 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 selecting Edit in the component.

  • Optimize for higher resolution devices - Select (default) the checkbox to allow DPR (Device Pixel Ratio) optimization.

    The Optimize for higher resolution devices option is only shown when the following is true:

    • Under Preset Type, Image Preset is selected, and RESS_IP is selected from the Image Preset drop-down list.

    device pixel ratio setting for image preset

    See also About device pixel ratio optimization. Any Adobe Experience Manager Dynamic Media Smart Imaging DPR values are ignored.

  • 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 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.

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

  • Width - Enter the value in pixels if you want the image to be a fixed size. Leaving this value blank makes the asset adaptive.

  • Height - Enter the value in pixels if you want the image to be a fixed size. Leaving this value 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-173

Edit the following Dynamic Media Settings by selecting 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 Manage viewer presets.

  • Viewer modifiers - Viewer modifiers take the form of name=value pair with a & delimiter and let you change viewers as outlined in the Adobe Viewers Reference Guide. An example of a viewer modifier is posterimage=img.jpg&caption=text.vtt,1

    With viewer modifiers, for example, you can do the following:

    • Associate a caption file with a video: caption

    • Associate a navigation file with a video: navigation

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

  • Title - Change the title of the video.

  • Width - Enter the value in pixels if you want the image to be a fixed size. Leaving this value blank makes the asset adaptive.

  • Height - Enter the value in pixels if you want the image to be a fixed size. Leaving this value blank makes the asset adaptive.

When working with Smart Crop

Use the Dynamic Media component to add Smart Crop image assets 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.

See also Image Profiles.

dm-settings-smart-crop

Edit the following Dynamic Media Setting by selecting Edit in the component.

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.
  • Image Modifiers - You can apply image effects by supplying additional image commands. These effects are described in Image Presets and the Image Serving Command reference.

    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 selecting Edit in the component.

  • Enable Aspect Ratio match - To let Dynamic Media pick a smart crop rendition with an aspect ratio that best matches the aspect ratio of the original image, select this option.

  • Optimize for higher resolution devices - Select (default) the checkbox to allow DPR (Device Pixel Ratio) optimization.

    The Optimize for higher resolution devices option is only shown when the following is true:

    • Under Preset Type, the Smart Crop option is selected.

    device pixel ratio setting for smart crop

    See also About device pixel ratio optimization. Any Adobe Experience Manager Dynamic Media Smart Imaging DPR values are ignored.

  • Title - Change the title of the Smart Crop image.

  • Alt Text - Add a title to the smart crop 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 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.

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

  • Width - Enter the value in pixels if you want the image to be a fixed size. Leaving this value blank makes the asset adaptive.

  • Height - Enter the value in pixels if you want the image to be a fixed size. Leaving this value blank makes the asset adaptive.

Interactive Media Component

The Interactive Media component is for those assets that have interactivity on them, such as hotspots or image maps. If you have an interactive image, interactive video, or carousel banner, use the Interactive Media component.

The Interactive Media component is smart. Whether you add an image or a video, you have various options. In addition, the viewer is responsive - the size of the screen changes automatically based on-screen size. All viewers are HTML5 viewers.

NOTE
If your web page has the following:
  • Multiple instances of the Interactive Media component being used on the same page.
  • Each instance uses the same asset type.
Assigning a different viewer preset to each Interactive Media component on that page is not supported.
You can, however, use the same viewer preset for all Interactive Media components that use assets of the same type, within the page.

chlimage_1-174

You can edit the following General settings by selecting Edit in the component.

  • 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. Viewer Presets must be published before they can be used. See Managing Viewer Presets.

  • Title - Change the title of the video.

  • Width - Enter the value in pixels if you want the image to be a fixed size. Leaving this value blank makes the asset adaptive.

  • Height - Enter the value in pixels if you want the image to be a fixed size. Leaving this value blank makes the asset adaptive.

    You can edit the following Add To Cart settings by selecting Edit in the component.

  • Show Product Asset - By default, this value is selected. The product asset shows an image of the product as defined in the Commerce module. Clear the check mark so the product asset is not shown.

  • Show Product Price - By default, this value is selected. Product price shows the price of the item as defined in the Commerce module. Clear the check mark so the product price is not shown.

  • Show Product Form - By default, this value is not selected. The Product Form includes any product variants such as size and color. Clear the check mark so the product variants are not shown.

Panoramic Media Component

Panoramic Media component is for those assets that are spherical panoramic images. Such images provide a 360-degree viewing experience of a room, property, location, or landscape. For an image to qualify as a spherical panorama, it must have either one OR both of the following:

  • An aspect ratio of 2:1.
  • Tagged with the keywords equirectangular or (spherical + panorama) or (spherical + panoramic). See Using Tags.

Both the aspect ratio and keyword criteria apply to panoramic assets for the asset details page and the Panoramic Media WCM component.

NOTE
If your web page has the following:
  • Multiple instances of the Panoramic Media component being used on the same page.
  • Each instance uses the same asset type.
Assigning a different viewer preset to each Panoramic Media component on that page is not supported.
You can, however, use the same viewer preset for all Panoramic Media components that use assets of the same type, within the page.

panoramic-media-viewer-preset

You can edit the following setting by selecting Configure in the component.

  • Viewer Preset - Select an existing viewer from the Viewer preset drop-down menu.

If the viewer preset you were looking for is not visible, check to ensure that it is published. Publish viewer presets before you use them. See Managing Viewer Presets.

Experience Manager


Connect with Experience League at Summit!

Get front-row access to top sessions, hands-on activities, and networking—wherever you are!

Learn more