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 add components by entering Layout 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 components are smart - they know whether you are adding an image or a video and the configuration options available change accordingly.
You can add Dynamic Media assets directly to the page if you are using ÃÛ¶¹ÊÓƵ 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 web site, 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. The Dynamic Media components are described in the following sections.
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 panel on the left side of the page (if necessary, toggle the display of the side panel), select the Components icon.
-
Under the Components heading, in the drop-down list, select Dynamic Media.
If no list of Dynamic Media components is available, you must enable the Dynamic Media components that you want to use. See Enable Dynamic Media components.
-
Drag a Dynamic Media component that you want to use and drop it in the desired location on the page.
-
Hover the mouse 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 are finished, in the upper-right corner of the dialog box, select the checkmark 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 first enable the components that you want to use.
To enable Dynamic Media components:
-
In Experience Manager, open the page where you want to add the Dynamic Media component.
-
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.
-
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 so you can expand the list, then select the Dynamic Media components you want to enable.
-
Near the upper-right corner of the Layout Container page, select the Done (checkmark) icon.
-
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 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 available in the Language menu currently have tokens assigned.
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.
Dynamic Media component 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.
- 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:
- 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 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.
-
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,1that 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.
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 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 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.
Edit the following Dynamic Media Settings by selecting Edit in the component.
-
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 ÃÛ¶¹ÊÓƵ Viewers Reference Guide. An example of a viewer modifier is
posterimage=img.jpg&caption=text.vtt,1With 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 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.
Edit the following Dynamic Media Setting by selecting Edit in the component.
-
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.
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 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 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.
- 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 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
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
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 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.
Video 360 Media Component video-media-component
Use the Video 360 Media component to render equirectangular video on your web page for 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 menu. Use
Video360VRfor end users who use virtual reality glasses. It includes basic video playback controls and social media features. UseVideo360_socialthat 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 were looking for is not visible, check to ensure that it is published. Be sure you publish viewer presets before you use them. See Managing Viewer Presets.
Using HTTP/2 to deliver 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 that 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.