Add Dynamic Media Assets to pages adding-dynamic-media-assets-to-pages
To add the Dynamic Media functionality to assets that you use on your websites, you can add the Dynamic Media, Interactive Media, Panoramic Media, or Video 360 Media component directly on the page. You enter Layout mode and enable the Dynamic Media components. Then you add these components to the page and add assets to the component. The Dynamic Media components are smart - they know whether you are adding an image or a video and the configuration options available change accordingly.
You add Dynamic Media assets directly to the page if you are using Adobe Experience Manager as your WCM. If you are using a third-party for your WCM, either link or embed your assets. For a responsive third-party website, see delivering optimized images to a responsive site.
Add a Dynamic Media component to a page adding-a-dynamic-media-component-to-a-page
Adding a 3D Media, Dynamic Media, Interactive Media, Panoramic Media, Smart Crop Video, or Video 360 Media component to a page is the same as adding a component to any page.
To add a Dynamic Media component to a page:
-
In Experience Manager, open the page where you want to add the Dynamic Media component.
-
In the left pane, select the Components icon, then filter for Dynamic Media.
If no list of Dynamic Media components is available, you likely must enable the Dynamic Media components that you want to use. See Enable Dynamic Media components.
-
Drag a Dynamic Media component and drop it in the desired location on the page.
-
Hover the pointer directly on the component. When the component is surrounded by a blue box, select once to display the component’s toolbar. Select the Configuration (wrench) icon.
-
Depending on the Dynamic Media component you dropped onto the page, a configuration dialog box opens. Set the component’s options as necessary.
The example below shows the Dynamic Media Video 360 Media component dialog box and the options available from the Viewer Preset drop-down list.
The Dynamic Media Video 360 Media component.
-
When you have finish, in the upper-right corner of the dialog box, select the check mark to save your changes.
Enable Dynamic Media components enabling-dynamic-media-components
If no Dynamic Media components are available to add to a page, it likely means that you must enable the components that you want to use.
-
In Experience Manager, open the page where you want to add the Dynamic Media component.
-
To the left of the toolbar near the top of the page, select the Page Information icon, then select Edit Template from the drop-down list.
-
On the right side of the toolbar near the top of the page, from the drop-down list, select Structure.
-
Near the bottom of the page, select Layout Container to open its toolbar, then select the Policy icon.
-
On the Layout Container page, under the Properties heading, make sure that the Allowed Components tab is selected.
-
Scroll until you see Dynamic Media.
-
Select the > icon to the left of Dynamic Media, then select the Dynamic Media components you want to enable.
-
Near the upper-right corner of the Layout Container page, select the Done (check mark) icon.
-
On the right side of the toolbar near the top of the page, from the drop-down list, select Initial Content.
-
Add a Dynamic Media component to a page as usual.
Localize Dynamic Media Components localizing-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.
-
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 note NOTE Not all languages that are available in the Language menu have tokens currently assigned.
Available Dynamic Media Components 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.
Component: Dynamic Media 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 onscreen size. All viewers are HTML5 viewers.
- Multiple instances of the Dynamic Media component being used on the same page.
- Each instance uses the same asset type.
When you add the Dynamic Media component, and Dynamic Media Settings is blank or you cannot add an asset properly, check the following:
- The image has a pyramid tiff file. Images that are imported before you enable Dynamic Media do not have a pyramid tiff file.
When working with images 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.
You can edit the following Dynamic Media Settings by selecting the Edit icon in the component and then Dynamic Media Settings.
-
Viewer preset - Select an existing viewer preset from the drop-down list. 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 the only one available if you are viewing image sets, spin sets, or mixed media sets. The viewer presets displayed are also 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,1which 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 list. If the image preset you are looking for is not visible, you must make it visible. See Manage 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 more image commands. These commands 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 must be 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.
See also About device pixel ratio optimization.
Any 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 value in pixels if you want the image to be a fixed size. Leaving this value blank makes the asset adaptive.
-
Height - Enter 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 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.
You can edit the following Dynamic Media Settings by selecting Edit in the component.
-
Viewer preset - Select an existing video viewer preset from the drop-down list. If the viewer preset you are looking for is not visible, you must make it visible. See Managing Viewer Presets.
-
Viewer modifiers - Viewer modifiers take the form of
name=valuepair with a&delimiter. They let you change viewers as outlined in the Adobe Viewers Reference Guide. An example of a viewer modifier isposterimage=img.jpg&caption=text.vtt,1With viewer modifiers you can, for example, 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 value in pixels if you want the image to be a fixed size. Leaving this value blank makes the asset adaptive.
-
Height - Enter 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 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 Use Smart Crop with Experience Manager Assets Dynamic Media
See also Image Profiles.
You can edit the following Dynamic Media Setting by selecting Edit in the component.
-
Image Modifiers - You can apply image effects by supplying more image commands. These commands 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, Smart Crop option is selected.
See also About device pixel ratio optimization.
Any 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 value in pixels if you want the image to be a fixed size. Leaving this value blank makes the asset adaptive.
-
Height - Enter value in pixels if you want the image to be a fixed size. Leaving this value blank makes the asset adaptive.
Component: Interactive Media interactive-media-component
Interactive Media component is for those assets that have interactivity on them such 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 onscreen size. All viewers are HTML5 viewers.
- Multiple instances of the Interactive Media component being used on the same page.
- Each instance uses the same asset type.
You can edit the following General settings by selecting Edit in the component.
-
Viewer preset - Select an existing viewer preset from the drop-down list. 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 value in pixels if you want the image to be a fixed size. Leaving this value blank makes the asset adaptive.
-
Height - Enter 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 to not show the product asset.
-
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 to not show the product price.
-
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 to not show the product variants.
Component: Panoramic Media panoramic-media-component
Panoramic Media component is for those assets that are spherical panoramic images. Such images provide a 360° 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
equirectangularor (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.
- Multiple instances of the Panoramic Media component being used on the same page.
- Each instance uses the same asset type.
You can edit the following setting by selecting Configure in the component.
- Viewer Preset - Select an existing viewer from the Viewer preset drop-down list.
If the viewer preset you are looking for is not visible, check to ensure that it is published. Publish viewer presets before you use them. See Manage Viewer Presets.
Component: Video 360 Media video-media-component
Use the Video 360 Media component to render equirectangular video on your web page. Doing so ensures an immersive viewing experience of a room, property, location, landscape, or medical procedure.
During playback on a flat display, the user has control of the viewing angle; playback on mobile devices usually uses their built-in gyroscopic controls.
The viewer includes native support for the delivery of 360 video assets. By default, no additional configuration is necessary for viewing or playback. You deliver 360 Video using standard video extensions such as .mp4, .mkv, and .mov. The most common codec is H.264.
You can edit the following setting by selecting Configure in the component.
- Viewer Preset - Select an existing viewer from the Viewer preset drop-down list. Use Video360VR for end users who use virtual reality glasses. Includes basic video playback controls and social media features. Use Video360_social which includes basic video playback controls. Video rendering is done in stereo mode. Manual point-of-view control is off but gyroscopic control is on. There are no social media features.
If the viewer preset you are looking for is not visible, check to ensure that it is published. Publish viewer presets before you use them. See Manage Viewer Presets.
Use HTTP/2 to delivery Dynamic Media assets using-http-to-delivery-dynamic-media-assets
HTTP/2 is the new, updated web protocol that improves the way browsers and servers communicate. It provides faster transfer of information and reduces the amount of processing power that is needed. Delivery of Dynamic Media assets can now be over HTTP/2 which provides better response and load times.
See HTTP2 Delivery of Content for complete details on getting started using HTTP/2 with your Dynamic Media account.