Managing Viewer Presets

You are reading the AEM 6.1 version of Managing Viewer Presets.
This documentation is also available for the following versions:  AEM 6.3  AEM 6.2  AEM 6.0 

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 Scene7 HTML5 Viewer SDK available as a download from Adobe Developer Connection.

See also the Adobe Scene7 Viewers Reference Guide.

Note

Be aware that editing any predefined, out-of-the-box viewer presets is not a supported scenario. Any changes you make to the settings of such viewers are overwritten by upgrades to the system.

To work around this issue, you can export the CSS of a predefined, out-of-the-box viewer preset. Then, create a new viewer preset and assign the exported CSS file to it.

See the advanced topic Extending Dynamic Media.

Note

Viewers that are available in AEM 6.2 can be used in AEM 6.1 after you install the the CQ-DAM-Scene7-Viewers-Content Feature Pack available via the Package Share. To use these viewers, install the feature pack.

For more information on the viewers and what has changed, see the Scene7 Viewers 5.4.2 Release Notes

Managing Viewer Presets

You can add, edit, delete, publish, unpublish, and preview viewer presets in AEM by navigating through Tools > Assets > Dynamic Media Settings > Viewer Presets.

file

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 Static Image library in the Scene7 Image Serving API Help for more information on how to embed responsive viewers onto your web pages.

Viewer Preset system compatiblity

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

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 Scene7 Viewers Reference Library Examples.

For information about supported web browser and operating system versions for Viewers, you can review the Viewers Release Notes.

See Scene7 Viewers Reference Release Notes.

Viewer Preset Title Type CSS File name
Zoom_dark
Zoom
html5_basiczoomviewer_dark.css
Zoom_light
Zoom html5_basiczoomviewer_light.css
Flyout Flyout_Zoom
html5_flyoutviewer.css
ImageSet_dark Image Set html5_zoomviewer_dark.css
ImageSet_light Image Set html5_zoomviewer_light.css
SpinSet_dark Spin_Set html5_zoomviewer_dark.css
SpinSet_light Spin_Set html5_zoomviewer_dark.css

Video

(Includes support for closed captioning)

Video html5_videoviewer.css

Video_social

(Includes support for closed captioning and social media)

Video html5_videoviewersocial.css
MixedMedia_dark Mixed_Media html5_mixedmediaviewer_dark.css
MixedMedia_light Mixed_Media html5_mixedmediaviewer_light.css
InlineMixedMedia_dark Mixed_Media html5_inlinemixedmediaviewer_dark.css
InlineMixedMedia_light Mixed_Media html5_inlinemixedmediaviewer_light.css

Dynamic Media supports mobile video playback for MP4 H.264 video. You can find Blackberry devices that support this video format at the following:

Supported video formats on Blackberry

You can also find Windows devices that support this video format at the following:

Supported video formats on Windows Phone

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.

Gesture Flyout Zoom Zoom Spin

Drag

Pans

Pans

Pans

Tap

Shows flyout window

Shows or hides the user interface

Shows or hides the user interface

Double-tap

Does not apply

Zooms in or resets

Zooms in or resets

Pinch open

Does not apply

Zooms in (iOS and Android 3x only)

Zooms in (iOS and Android 3x only)

Pinch close

Does not apply

Zooms out (iOS and Android 3x only)

Zooms out (iOS and Android 3x only)

Swipe

Scrolls swatch bar

Scrolls images

Spins

Flick

Scrolls swatch bar

Scrolls images

Spins

Creating a New Viewer Preset

Creating viewer presets lets you apply these settings to any assets when you preview or publish.

Note

If you are using Windows 7, in certain instances, viewer presets do not appear in the list after you add them. To workaround this issue simply refresh the left rail.

See the advanced topic Extending Dynamic Media.

To create a new viewer preset:

  1. In the left rail, click/tap Tools > Assets > Dynamic Media Settings > Viewer Presets.

    file
  2. On the Viewer Presets page, on the toolbar, tap the Add icon (+).

    file
  3. 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 tap Create.

    When you save the preset later on, the name appears on the Viewer Presets page under the Preset Title column header.

  4. On the Rich Media Type drop-down menu, select the type of viewer preset you want to add.

    See Rich Media Types for Viewer Presets.

  5. Click/Tap Create.

  6. On the Viewer Editor page, on the Behavior tab, from the Selected Component drop-down menu, select the SDK component whose values you want to edit.

     

  7. For each parameter under the selected component, set the values you want.

    To read a detailed description of each parameter in the selected component, hover the pointer over the parameter name. When the round, black Information icon appears to the right of the name, hover the pointer over the icon.

    Note

    If you are using a mobille device, such as an iPad...

    After you type a value in the text field, tap elsewhere in the user interface to submit the change and close the virtrual keyboard. If you tap Enter, no action occurs.

  8. (Optional) Cliick/Tap the Appearance tab, then in the Add CSS file field, do one of the following:

    • Enter a path to a CSS file you want to use. For example, myfolder/css/genericSpinMoble.css.
    • Tap the Add icon (+) to navigate to the CSS file you want to use.

    You can also add CSS to customize the visual design or visual elements of the viewer. You can export the CSS file to make your changes by tapping the Download icon and saving the associated compressed zip file.

    See the advanced topic Extending Dynamic Media.

  9. Click/Tap Save.

Rich Media Types for Viewer Presets

Administrators can add and customize the following rich media types when creating new viewer presets:

Zoom Lets users zoom into the area by clicking it. Users can click controls to zoom in, zoom out, and reset the image to its default size.
Flyout Zoom

Displays a second image of the zoomed area next to the original image. There are no controls to use - users move the selection over the area they want to view.

When determining the complete bandwidth usage for this viewer, consider that both the main image and the flyout image are served in the viewer. The main image size (Stage Width and Height) and the Zoom Factor determine the flyout image size. To keep the flyout file size from becoming too large, balance these two values: if you have a large main image size, lower the Zoom Factor value. (The Flyout Width and Flyout Height determine the size of the flyout window, but not the size of the flyout image that is served into the viewer.)

For example, if your main image size is 350 by 350 pixels, with a Zoom Factor of 3, the resulting flyout image is 1050 by 1050 pixels. If your main image size is 300 by 300 pixels, with a Zoom Factor of 4, the flyout image is 1200 by 1200 pixels. Depending on the JPEG quality setting (recommended settings are between 80-90), you can decrease the file size significantly. Recommended zoom factors are 2.5 to 4, depending on the size of your main image.

Image Set In the Image Set viewer, users can see different views or color variations of an item by clicking a thumbnail image. This viewer also offers zooming tools for examining images closely.
Spin Set Provides multiple views of an image so users can turn the object to examine the different sides and angles.
Video

Displays videos using the resolution dimensions of the source file or a custom size.

Dynamic Media comes with many predefined Viewer Presets for playing video, and if you are an administrator, you can create custom Video Viewer presets. There are more than a dozen different settings for configuring the Video Viewer. You can configure its size, foreground and background color, video and audio controls, progress bar, user-interface skin, social features, and Help.

Mixed Media

Displays different types of media in one viewer. You can include spin sets, images, and videos.

You can set up tabs to contain different types of content, such as a tab for image sets and a tab for videos. Videos played back from a Mixed Media Set use a standard video viewer with a timeline and video controls, such as Stop, Pause, Rewind, and Play. When you set up a Mixed Media Set Viewer preset, you specify which viewers you want to use for the different types of assets in your Mixed Media Set. You can also use the Grid Viewer or Carousel Viewer to view a Mixed Media Set.

See the advanced topic Extending Dynamic Media for information on creating custom css files.

Exporting an existing Viewer Preset to use as the basis for creating a new Viewer Preset

You can export an existing HTML5 Viewer Preset to use as the basis for creating a new HTML5 Viewer Preset. This export option is useful because you do not have to create the viewer from scratch. Instead, you export a preset that looks and behaves close to what you want, then you can use that as a starting point to make design adjustments to the appearance and behavior of the preset skin. For example, you can change the font face of any text, or change the position and size of any player controls, all by editing its CSS file.

See the advanced topic Extending Dynamic Media.

Activating or Deactivating Viewer Presets

The Viewer Presets that are available depends on what viewer presets are active (and on the asset type). For example, all active Video Viewer presets appear on the Presets pane when a user previews a video.

By default, a viewer preset is "On" after you create it. You may want to deactivate viewer presets if the list becomes too crowded or you do not want a viewer preset made available to use.

Note

Turning a viewer preset On or Off means that it is visible in the Dynamic Media component and whenever you view an asset. However, to preview an asset with a viewer preset, you must publish the viewer preset as well. 

All out-of-the-box viewer presets in Dynamic Media come already activated and published for you. However, any new viewer presets that you create and add must be activated and published to preview an asset.

To activate or deactivate viewer presets:

  1. Click/Tap Tools > Assets > Dynamic Media Settings > Viewer Presets.

  2. Each viewer preset has an On button next to it. Click On to turn it off. The button displays Off. To re-activate the viewer preset, click Off. The button now displays On.

    file

Publishing Viewer Presets That You Have Added

Activating (or turning "On") the state of a viewer preset means that it is visible in the Dynamic Media component and whenever you view an asset. However, to preview an asset with a viewer preset, you must publish the viewer preset as well. 

All out-of-the-box viewer presets in Dynamic Media come already activated (turned "On") and published for you. However, any new viewer presets that you create and add must be activated and published to preview an asset.

See Activating or Deactivating Viewer Presets.

See also Previewing Assets.

To publish viewer presets that you have added:

  1. Click/Tap ToolsAssets > Dynamic Media Settings > Viewer Presets.

  2. Check any custom viewer presets that you have added and want to publish.

  3. On the toolbar, click/tap the Publish icon.

Previewing a Viewer Preset

To preview a Viewer Preset:

  1. Click/Tap Tools > Assets > Dynamic Media Settings > Viewer Presets.

  2. Check a single Preset Title that you want to preview.

  3. On the toolbar, click/tap the Preview icon.

  4. (Optional) In the Preview Viewer Preset page, near the upper-right corner, tap Browse to select a different asset to preview.

Editing Viewer Presets

See the advanced topic Extending Dynamic Media for information on creating custom css files.

Note

Be aware that editing any predefined, out-of-the-box viewer presets is not a supported scenario. Any changes you make to the settings of such viewers will be overwritten by upgrades to the system.

To work around this issue, you can export the CSS of a predefined, out-of-the-box viewer preset. Then, create a new viewer preset and assign the exported CSS file to it.

See the advanced topic Extending Dynamic Media.

To edit Viewer Presets:

  1. Click/Tap Tools > Assets > Dynamic Media Settings > Viewer Presets.

  2. Select a preset by checking the box to the left of the viewer preset title.

    file
  3. On the toolbar, tap the Edit icon (pencil).

  4. On the Edit Viewer Preset page make the changes you want to the viewer preset.

  5. Do one of the following:

    • Click/Tap Save to save your changes and return to the Viewer Preset page.
    • Click/Tap Cancel to void any changes you made and return to the Viewer Preset page.

Deleting Viewer Presets

To delete Viewer Presets:

  1. Click/Tap Tools > Assets > Dynamic Media Settings > Viewer Presets.

  2. On the Viewer Presets page, check a Preset Title, and then click the Trash icon.

  3. Click/Tap Delete.

Applying a Viewer Preset to an asset

To apply a Viewer Preset to an asset:

  1. Open the asset and near the upper-right corner of the page, click/tap the Eye icon and select Viewer Presets.

    file

    Note

    The URL and Embed buttons appear after you select a viewer preset.

  2. Select a Viewer Preset from the left pane to apply it to the asset. A separate popup window with the viewer preset is displayed.

    You can also copy the URL to share with other users.

Obtaining Viewer Preset URLs

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 AEM as your WCM, you can add assets using the viewer presets directly on the page. See Adding Dynamic Media Assets to Pages.

​