Using Panorama and Vertical Image Viewer with AEM Assets Dynamic Media using-panorama-and-vertical-image-viewer-with-aem-assets-dynamic-media

Transcript

Hey everyone. In this video - we discussed Dynamic Media Viewer Enhancements - introduced in AEM 6.4. Dynamic Media helps - deliver rich, wishful merchandising and - marketing Assets on demand, automatically scaled for - consumption on the web, mobile and - social sites. Using a set of - master Assets, Dynamic Media generates - and delivers multiple variations - of rich content in real time through - its global, scalable, performance - optimized network. Some of the capabilities introduced - in Dynamic Media with 6.4 includes, the new panoramic - viewer, virtual reality viewer and - Vertical Image Viewer. Panoramic viewer and - virtual reality viewer are available only with the - Dynamic Media scene 7 mode. The Vertical Image - Viewer is available with the dynamic - Scene 7 media mode or Dynamic Media - hybrid mode. Panoramic viewer and - virtual reality viewer provides users a more - engaging experience. A user can check out a hotel room, - even before he or she makes a booking, or check out a rental property without - having to schedule an appointment. A user can check out a location - and many more possibilities. The primary focus here, is to provide - a consumer a better experience when they visit your website and - eventually increase your conversion rate. Vertical Image Viewer helps - maximize product imagery, viewing experience - to give consumers the best representation - of the product, thereby driving conversion - and minimizing returns. Let’s see how we could provide - users with an engaging experience. Note that, my AEM - 6.4 instance is currently running in - Dynamic Media scene 7 mode. I’m using the We.Retail - sample site to update this key during - experience page. From your AEM homepage let’s - navigate to AEM Assets, Files and open the 360 Panorama - folder under We.Retail.

I have captured a set - of panoramic images from the We.Retail - snow adventure trip. Let’s click on the Create button - and upload the panoramic images. It might take a few seconds for the - Dynamic Media to process these images. Note that, the need to be upload has - an aspect ratio of two to one, which is one of the - criteria for Dynamic Media to process an image - as a panoramic image. In Card view, you can also notice - the Asset dimension metadata, displayed on - each image tile. Each image has a width and - height of six thousand pixel by three thousand pixels with - an aspect ratio of 2 to 1. Once that image - gets processed, let’s open to view its properties - and under the IP DC tab you can notice keywords, like - 360 degree and Spherical. Note that, for Dynamic Media to process - an image as a panoramic image, we need to keep this - Spherical Keyword. After reviewing the properties, - let’s open the image to view it. On your left hand side, you - can see a list of viewers. These list of viewers are available - out of the box for AEM 6.4 and doesn’t require any - additional settings to be done. Let’s select a - panoramic image viewer and you can get a 360 - viewing experience of the location, even - without visiting the place.

Let’s select a Panoramic - Image Virtual Reality Viewer and you can get a VR viewing - experience of your product. You can also get an embed code - for this Asset or opt in URL.

Now, I was able to get my panoramic - images uploaded to AEM Assets and was able to get a little preview - of my images in Panoramic Viewer and Panoramic Virtual - Reality Viewer. In a new tab, let’s - browse through AEM Assets to open a winter - sporting product. As a We.Retail - consumer, I’m very interested in - knowing the minute details of a product - before I buy it. Often consumers buy - a product online and end up returning it, as it - does not meet their expectations. So with AEM 6.4 - Dynamic Media we have a new image viewer in - place for Vertical Image viewing. Select the Vertical - Image Viewer and you can get a product - immediately viewing experience, which gives the best - representation of the product there by driving conversions - and minimizing returns. Let’s see how - we can use these snow adventure images - on our We.Retail site. Open a new tab and navigate - your AEM homepage, from the main page - navigate to AEM Sites, We.Retail and open the Ski Touring - experience page to edit it. From the component - finder, let’s search for Panoramic - Media Component under the Dynamic Media - component grouping. Note that, in order to use Dynamic - Media component on your site pages, you must enable the Dynamic Media - component on your template. Hover over the Information icon and - click to view Component Description. It’s an HTL based - Panoramic Media Component for Dynamic Media - Panoramic Images. Drag drop your component right - beneath the snowboarding title. I’m going to repeat the step - for ice cave and snowmobile.

Let’s add a Dynamic Media - Component to your page. Let’s click on the Settings option - for the Panoramic Media Component and select the viewer preset - that we would like to use. For this page, I’m going to - select the Panoramic Image Viewer and save my changes.

Now, let’s grab the snow adventure - image from the Asset finder and drag drop the panoramic - image to your component. Similarly, I’m going to add - two other panoramic images for snowmobile and - ice cave section. Let’s add this new adventure - product from the Asset finder to our Dynamic - Media component. Click on the Settings and - select the viewer preset as the Vertical - Image Viewer for the Dynamic - Media component.

As a consumer - of this page, I would be pleased to - see a panoramic view or virtual reality - view of this location, rather than take a look - at a static image. As an end user, I can also - click and rotate the image to get a 360 degree experience - of this location.

You could use Dynamic - Media Panoramic Viewers and Virtual Reality - Viewers to provide a more engaging experience - to your end users. With horizontal - spotters, depending upon the consumers - desktop screen size, sometimes the spotters - would not be visible until the user scrolls - down the page. By using Vertical Image Viewer - and placing vertical dispatches. It ensures that - dispatchers are visible no matter what the - screen size is. It also maximizes the - main image size. With the - horizontal slashes it was necessary to - reserve space on the page to ensure they have a high - likelihood of being visible and would decrease the - size of the main image. With the wording - layout, you do not need to worry - about allocating the space and therefore, can maximize - the main image size. Dynamic Media Viewer Enhancements - introduced and AEM 6.4 helps to provide a more engaging - experience to your end users. -