Manage Viewer Presets

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.

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.

See Rich Media Types for Viewer Presets.

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 type Mixed_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

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

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.

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

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.

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.

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.