Understanding the Asset Viewer with AEM Dynamic Media understanding-the-asset-viewer-with-aem-dynamic-media

Transcript

In this video I would like - to show you the dynamic media viewer enhancements - introduced in AEM 6.3. Creating and editing a viewer - preset has been very complex, if you’re not familiar - with the viewer components and dont know on how to modify. Also customizing the UI - components within a viewer based on the requirement - was very limited. With AEM 6.3 Dynamic media - viewer enhancements, it makes it easy for - users to modify a dynamic media viewer - preset by providing easy tool tips for each - component settings and the ability to customize the viewer - based on your requirements.

Before we get started, make sure your AEM instance is - running in dynamic media mode. Let’s explore some - of the new dynamic media viewer enhancements. - From AEM homepage, click on tools, asset and then - select the viewer presets.

You should be able to see - a list of out of the box components our viewer - presets already listed. You can also create - a new preset by simply clicking on - the create option. For now, let’s pick an - existing viewer preset. Select the image set - like preset and open to edit it.

Sometimes it is difficult to - modify the viewer presets, if a user is not familiar - with the components used, or requires a good understanding - of what component is used and select - a component for customizing. To make it easier - with AEM 6.3, user can simply click on any of - the components in the viewer preset and it opens up components - settings under the appearance tab. Let’s click on zooming button - and you should be able to see zooming button selected - under component appearance. User can intuitively - tap to select a visual element on the viewer - preset directly without the need to know or - select the viewer component. Look on the zoom reset button - and let’s make some modification to the left position changes - to the zoom reset button. Slide the left - pixel value to 150. Notice the visual - changes to the zoom reset - button on your viewer. It is easy for a user to make - changes to a component settings and visually verify the changes without - having to make any code changes.

Another enhancement introduced - for advanced data modification is the ability to show or hide - the CSS for your component. To check your component in CSS Simply click on the show or - hide CSS option.

Scroll down to the bottom - of your CSS file and you should be able to see the - left position change that we have made in the previous - step for the zoom reset button.

You can also make direct - changes to the CSS file and it should reflect on - your viewer preset.

User also has an option to import - a CSS file for your component. In order to do that, click - on the import CSS option and you can select - your CSS file. Let’s click on the behavior - tab for viewer preset. You can modify the viewer preset to change its look and feel. But sometimes we are not sure of - what value or argument to be used. But with AEM 6.3 viewer enhancements, for each modifier option a useful tooltip is provided with - clear instructions or detail. It helps you to be less dependent on documentation for - modifying viewers. Save changes and navigate back - to the list of your presets. Set up to shopperble banner - preset and open to edit it. User can create their - own button artwork. In addition to that, - we provide a list of button artworks - that could be used. User also has an option - to provide high pixel density button artwork - for retina displays.

Out of the box, button - artwork minimizes the need to tablet - custom artwork. -