Manage Viewer Presets managing-viewer-presets
A Viewer Preset is a collection of settings that determine how users view rich-media assets on their computer screens and mobile devices. If you are an administrator, you can create Viewer Presets. Settings are available for an array of viewer configuration options. For example, you can change the viewer display size or zoom behavior.
For instructions on creating and customizing your own HTML5 viewer presets, see the Adobe Dynamic Media HTML5 Viewer SDK API Documentation. The SDK is available on the IS publish server embedded in the SDK itself. Each library version has its own SDK documentation included.
Path: <scene7_domain>/s7sdk/<library_version>/docs/jsdocs/index.html
.
For example, 3.10 SDK: https://s7d1.scene7.com/s7sdk/3.10/docs/jsdoc/index.html
See also the Adobe Dynamic Media Viewers Reference Guide.
This section describes how to create, edit, and manage viewer presets. You can apply a viewer preset to an asset anytime you preview it. See Applying Viewer Presets.
Keyboard accessibility for viewers keyboard-accessibility-for-viewers
All out-of-the-box viewers support keyboard accessibility.
See also Keyboard accessibility and navigation.
Manage Viewer Presets managing-viewer-presets-1
You can add, edit, delete, publish, unpublish, and preview viewer presets in Adobe Experience Manager by tapping Tools (hammer icon) > Assets > Viewer Presets.
Viewer support for responsive designed web pages viewer-support-for-responsive-designed-web-pages
Different web pages have different needs. For example, sometimes you want a web page that provides a link that opens the HTML5 Viewer in a separate browser window. In other cases, it may be necessary to embed the HTML5 Viewer directly on the hosting page. In the latter case, the web page may have a static layout. Or, it may be “responsive” and display differently on different devices or for different browser window sizes. To accommodate these needs, all the pre-defined, out-of-the-box HTML5 Viewers that come with Dynamic Media support both static web pages and responsive designed web pages.
See Responsive Image library for more information on how to embed responsive viewers onto your web pages.
See [Publishing Viewer Presets].(#publishing-viewer-presets)
Viewer Preset system compatibility viewer-preset-system-compatibility
All out-of-the-box Viewer Presets that come with Dynamic Media are fully compatible with the following systems:
- Desktops
- Apple iPhone
- Apple iPad
- Android™ Smartphone
- Android™ Tablet
- For video, additional support for MP4 playback is provided for BlackBerry® and Windows Phone.
Rich media types for Viewer Presets rich-media-types-for-viewer-presets
Administrators can add and customize the following rich media types when creating viewer presets.
List of out-of-the-box Viewer Presets list-of-out-of-the-box-viewer-presets
The following table identifies all pre-defined, out-of-box Viewer Presets that come with Dynamic Media.
See also Live Demos.
For information about supported web browser and operating system versions for Viewers, you can review the Viewers Release Notes.
See “Viewers release notes” in the table of contents of the Viewers Reference Guide.
See Publishing Viewer Presets.
See Activating or Deactivating Viewer Presets and Publishing Viewer Presets.
Supported mobile viewers gestures matrix supported-mobile-viewers-gestures-matrix
The following table identifies the mobile viewer gestures that are supported on iOS, Android™ 2.x, and Android™ 3.x devices.
Increase the number of Viewer Presets that are displayed increasing-the-number-of-viewer-presets-that-display
Experience Manager shows a wide variety viewer presets when viewing an asset from Detail View > Viewers. You can increase or decrease the number of viewers that display.
Increase the number of Viewer Presets that are displayed:
-
Navigate to CRXDE Lite (https://localhost:4502/crx/de).
-
Navigate to the viewer preset listing node at the following location:
/libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist
-
In the limit property, change the Value, which is set to 15 by default, to the desired number.
-
Navigate to the viewer preset datasource at
/libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist/datasource
-
In the limit property, change the number to the desired number, for example,
{empty requestPathInfo.selectors[1] ? "20" : requestPathInfo.selectors[1]}
-
Select Save All.
Create a Viewer Preset creating-a-new-viewer-preset
Creating viewer presets lets you apply various settings to view and interact with assets. However, you do not need to create viewer presets. If you prefer, you can use the default, out-of-the-box viewer presets that already come with AEM Assets.
If you choose to create a viewer preset, after you save it, the viewer’s state is automatically activated (set to On) in the Viewer Presets page. This state means that it is visible in the Dynamic Media component and the Interactive Media component and whenever you preview an image or video.
Some viewer presets have exclusive settings that can affect the use and overall behavior of the viewer. Depending on the viewer preset you create, you may want to be aware of these special considerations.
See Special considerations for creating an Interactive Viewer preset.
See Special considerations for creating a Carousel Banner Viewer preset.
To create a Viewer Preset:
-
In the upper-left corner of Experience Manager, select the Experience Manager logo, then in the left rail, select Tools (hammer icon) > Assets > Viewer Presets.
-
On the Viewer Presets page, on the toolbar, select Create.
-
In the New Viewer Preset dialog box, in the Preset Name field, enter the name of the new preset. Choose a name carefully—they are not editable after you select Create.
When you save the preset later in these steps, the name appears on the Viewer Presets page under the Preset Title column header.
-
On the Rich Media Type drop-down menu, select the type of viewer preset you want to create, then in the upper-right corner of the page, select Create.
-
On the Viewer Preset Editor page, select the Appearance tab.
-
Do one of the following:
-
In the Selected Type pull-down menu, select a component whose visual design you want to customize. Alternatively, you can select any visual element in the viewer to select it for configuration.
The visual editor lets you see what effect a certain property has on a style. Set or adjust any property to instantly see what effect it has on the viewer using the sample to the left of the editor.
The CSS styling properties for each type of viewer preset are described in the “Customizing
<viewer name>
Viewer” Help topic in the Viewers Reference Guide. For example, if you are creating a viewer preset of the typeMixed_Media
, see Customizing Mixed Media Viewer for a list and description of each property. -
If you have defined style settings in a separate CSS file, you can upload the CSS file to AEM Assets. Select Import CSS below the Selected Type pull-down menu (if necessary, scroll the visual editor up to see it) so you can find the uploaded CSS file and associate it with the viewer preset.
When you import a CSS file, the visual editor checks to see if the CSS uses the correct viewer markers. For example, if you are creating a Zoom viewer, all the CSS rules you import must be defined using its viewer class name
.s7mixedmediaviewer
defined on a parent viewer element.You can import arbitrary, handmade CSS as long as it properly defines the CSS markers for a given viewer. (CSS markers are described in any “Customzing <viewer name> Viewer” Help topic in the Viewers Reference Guide. For example, if you want to read about CSS markers for the Zoom Viewer, see Customizing Zoom Viewer.) It is possible, however, that the visual editor may not understand some CSS values. In such cases, the visual editor attempts to override the errors so that the CSS can still work.
note note NOTE If you prefer to edit the CSS directly in its raw form, select Show/Hide CSS below the Selected Type pull-down menu (if necessary, scroll the visual editor up to see it).
Like the visual editor, when you change a property directly in the CSS, you instantly see what effect it has on the viewer sample. And, that same property is automatically updated at the same time in the visual editor. As such, you can use the raw CSS editor, or the visual editor, or use both interchangeably.note note NOTE For button artwork, choose the 2x image and upload high-resolution art work. When working with interactive images and shoppable banners, you can also select from various out-of-the-box hotspot buttons. -
-
(Optional) Near the top of the Edit Viewer Preset page, select Desktop, Tablet, or Phone to uniquely define visual styles for different device and screen types.
-
On the Viewer Preset Editor page, select the Behavior tab. Alternatively, you can select any visual element in the viewer to select it for configuration.
For example, for the VideoPlayer type, under Modifiers > Playback, you can select from one of three adaptive bitrate streaming options:-
dash - Videos stream as dash only. However, on Safari/iOS devices, you must select hls as the type, instead.
-
hls - Videos stream as hls only.
-
auto - Best practice. The creation of DASH and HLS streams is storage optimized. Therefore, Adobe recommends that you always select auto as the playback type. Videos stream as dash, hls, or progressive, as in the following playback order:
- If the browser supports DASH, then DASH streaming is used, first.
- If the browser does not support DASH, then HLS streaming is used, second.
- If the browser does not support either DASH or HLS, then progressive playback is used, lastly.
note note NOTE To see and use the dash option, it must first be enabled by Adobe Technical Support on your account. See Enable DASH on your account. -
-
From the Selected Type pull-down menu, select a component whose behaviors you want to change.
Many components in the visual editor have a detailed description associated with it. These descriptions appear within blue boxes when you expand a component to reveal its associated parameters.
Some Viewer types have components that let you specify Image Serving commands in an IS Command text field. For a list of commands you can use, see the Image Serving API Reference.
note note NOTE If you are using a touch device, such as a phone or tablet… After you type a value in the text field, select elsewhere in the user interface to submit the change and close the virtual keyboard. If you select Enter, no action occurs. -
Near the upper-right corner of the page, select Save.
-
Publish your new viewer preset so you can use it on your website.
See Publishing Viewer Presets.
note important IMPORTANT For old videos that use an adaptive bitrate streaming profile, the URL continues to play as usual – with HLS streaming – until you reprocess the video assets. After reprocessing, the same URL continues to work, but now with both DASH and HLS streaming enabled.
Special considerations for creating an Interactive Viewer preset special-considerations-for-creating-an-interactive-viewer-preset
About Display Modes for image thumbnails in the panel
When you create or edit an Interactive Video viewer preset, you have the choice of which Display Mode setting to use when you select InteractiveSwatches
from the Selected Component menu under the Behavior tab. The display mode that you choose affects how and when thumbnails appear while the video is playing. You can choose either a segment
display mode (default) or a continuous
display mode.
About auto scrolling behavior in the Interactive Video viewer
The auto scroll behavior of thumbnails in the Interactive Video viewer functions independently of the display mode that you chose.
When you create or edit an interactive video viewer preset, you access Auto Scroll from the Behavior tab. In the Behavior tab, from the Selected Components drop-down menu, select InteractiveSwatches. The Auto Scroll check box is listed below the IS Command text field.
If you disable Auto Scroll (clear the check box) in the viewer preset, during video playback by the user, the panel only displays the first thumbnail image for the entire length of the video. However, a user can manually scroll through the thumbnails using the up and down arrow icons, if desired.
When you enable (select) Auto Scroll in the viewer preset, during video playback, thumbnail images assigned to a video segment scroll into view at the start of a segment. There are instances, however, where certain thumbnails within a segment display twice as long as other thumbnails before or after it. This behavior occurs because the number of thumbnails in a segment is greater than the number that are visible in the panel, and are not evenly divisible.
To illustrate, suppose you have one 30-second video segment. And, there are a total of nine thumbnails to display over the 30 seconds. Your browser is sized in such a way that there are four visible thumbnail positions in the display panel. The 30-second video time segment is divided into three subsegments. The following table shows the breakdown of which thumbnails are displayed for a given time subsegment:
Video subsegment 3 does not extend beyond the thumbnails that are assigned to it. Notice also that thumbnails 4, 6, and 7 are visible in the panel twice as long as the other thumbnails.
The logic that the viewer uses for how many thumbnails are displayed in the panel based on the number of available positions is as follows:
-
Number of subsegments = round up to next subsegment (number of thumbnails / number of visible slots in the thumbnail panel, based on browser window size).
Using the example in the table above, 9 thumbnails / 4 slots = 2.25; the viewer logic rounds it up to three subsegments. -
Number of thumbnails = round up to next thumbnail (number of thumbnails / number of video subsegments).
Using the example in the table above, 9 thumbnails / 3 video subsegments = 3 thumbnails. -
Duration of subsegment = total video duration / number of video subsegments.
Using the example in the table above, 30 seconds / 3 video subsegments = 10-second display of each video subsegment.
Special considerations for creating a Carousel Banner Viewer Presets special-considerations-for-creating-a-carousel-banner-viewer-preset
When creating Carousel Banner viewer presets, changing the style of hotspots can be accessed as follows:
Activate or deactivate Viewer Presets activating-or-deactivating-viewer-presets
The Viewer Presets that are available in the user interface depends on which ones are active in Author mode. By default, a viewer preset is “On” after you create it. If you toggle off the preset, you do not see it in Author mode. If the preset is published, it is always published regardless of whether it is toggled on or off. You may want to deactivate viewer presets if the list becomes too unwieldy or you do not want a viewer preset made available to use.
To activate or deactivate Viewer Presets:
-
In the upper-left corner of Experience Manager, select the Experience Manager logo, then in the left rail, select Tools (hammer icon) > Assets > Viewer Presets.
-
On the Viewer Preset page, under the State column header, select the toggle to activate or deactivate a viewer preset.
Viewer presets that are activated have the toggle appear on the right, inside a blue box; deactivated viewer presets have the toggle appear on the left, inside a light gray box.
Publish Viewer Presets publishing-viewer-presets
Activating (or turning “On”) the state of a viewer preset means that it is visible in the Dynamic Media component, the Interactive Media component, and whenever you view an asset.
However, to deliver an asset with a viewer preset, the viewer preset must be published as well. All viewer presets must be activated and published to obtain URL or embed code for an asset. Be sure you activate and publish all out-of-the-box viewer presets that come with Dynamic Media. Custom viewer presets that you create and add are auto-activated, but must also be published.
See Activating or Deactivating Viewer Presets.
See also Previewing Assets.
To publish Viewer Presets:
- In the upper-left corner of Experience Manager, select the Experience Manager logo, then in the left rail, select Tools (hammer icon) > Assets > Viewer Presets.
- Select one or more viewer presets that you want to publish.
- On the toolbar, select the Publish icon.
Sort Viewer Presets sorting-viewer-presets
- In the upper-left corner of Experience Manager, select the Experience Manager logo, then in the left rail, select Tools (hammer icon) > Assets > Viewer Presets.
- Select Preset Title, Type, Published, or State to sort by that column heading. For example, select Type to sort the viewer preset types in alphabetical or reverse-alphabetical order.
Edit Viewer Presets editing-viewer-presets
Editing any predefined, out-of-the-box viewer presets is not a supported scenario. If you edit an out-of-the-box viewer preset, you are prompted to save it with a new name.
To edit Viewer Presets:
-
In the upper-left corner of Experience Manager, select the Experience Manager logo, then in the left rail, select Tools (hammer icon) > Asset > Viewer Presets.
-
Select a preset by checking the box to the left of the viewer preset title.
-
On the toolbar, select Edit.
-
On the Viewer Preset Editor page, make the changes you want to the viewer preset, using the options found on the Appearance and Behavior tabs.
From the Appearance tab, near the upper-left corner of the Viewer Preset Editor page, select Desktop, Tablet, or Phone to change the asset’s presentation mode.
-
Near the upper-right corner of the page, do one of the following:
- Select Save to save your changes and return to the Viewer Preset page.
- Select Cancel to void any changes you made and return to the Viewer Preset page.
Delete custom Viewer Presets deleting-custom-viewer-presets
You can delete Viewer Presets that you have created and added to Dynamic Media.
To delete custom Viewer Presets:
- In the upper-left corner of Experience Manager, select the Experience Manager logo, then in the left rail, select Tools (hammer icon) Assets > Viewer Presets.
- On the Viewer Presets page, check a Preset Title, and then select the Trash icon.
- Select Delete.
Apply a Viewer Preset to an asset applying-a-viewer-preset-to-an-asset
If you have already published both the asset and the selected viewer, the URL and Embed buttons appear after you select a viewer preset.
To apply a Viewer Preset to an asset:
-
Open the asset and near the upper-left corner of the page, select the drop-down menu, then select Viewers.
note note NOTE If you have already published both the asset and the selected viewer, the URL and Embed buttons appear after you select a viewer preset. -
Select a viewer preset from the left pane so you can apply it to the asset.
You can copy the URL to share with other users.
Deliver assets with Viewer Presets delivering-assets-with-viewer-presets
To get the URLs for Viewer Presets, see Linking URLs to your Web application. See also Embedding the Video Viewer on a Web Page.
If you are using Experience Manager as your WCM, you can add assets using the viewer presets directly on the page. See Adding Dynamic Media Assets to Pages.