carousel banners - shetalksreallyfast...carousel banners (also referred to as carousel sets) enable...

L4082—CreatingMultimediaExperiencesusingAssetsandDynamicMedia

CAROUSELBANNERS

Carouselbanners(alsoreferredtoascarouselsets)enablemarketerstodriveconversionbyeasilycreatinginteractiverotatingpromotionalcontent,anddeliveringittoanyscreen.

Creatingandmodifyingcontentfeaturedinpromotionalbannerscanbetime-consuming,limitingyourabilitytoquicklypublishnewcontent,ormakeitmoretargeted.

CarouselBannersenableyoutoquicklycreateormodifyrotatingbanners,addinteractivitysuchashotspotsthatlinktoproductdetailandrelatedresources,anddeliverthemtoanyscreen—lettingyoubringnewpromotionalcontenttomarketfaster.

1. NAVIGATETOCAROUSELSAMPLEA. NavigatetoAssetsàFilesàSummit1

B. Clickontheassetcardtitled“Sports”topreviewtheexistingset

C. Explorethissamplebychangingslides,clickonthehotspotsandimagemaps

1http://localhost:4502/assets.html/content/dam/summit


2

2. EDITTHECAROUSELSETWe’llexploresomefeaturesbymodifyingthiscarouselset,andaddingsomenewcontent.

A. Click“Edit”inthetopleftofthescreentoopentheCarouselBannerEditor

Figure1:CarouselBannerEditor

3. THESLIDEBARA. Clickthevariousslidestobrowsetheexistingimagesinthisset

Figure2:SlideBar

B. Let’saddsomeimagesbyclickingthe“AddSlide”buttonontherightoftheslidebar

Figure3:AddSlidebutton

C. Selectsomeimagesusingtheassetpicker

i. NavigatetoSummitàDemoAssetsàActivitiesàRunning


3

ii. Selectthetoptwoimages“RunningCoupleMountain”and“RunningDesertWoman”byhoveringoverthetwothumbnailsandclickingonthem.

Figure4:Selectingassets

iii. Clicktheblue“Select”buttononthetoprightoftheassetpicker.

D. Tryre-arrangingtheorderoftheslidesbydraggingtheslidebar.

4. HOTSPOTSANDIMAGEMAPSCarouselsetssupportbothhotspotsandimagemapsallowingmarketerstolinkproductdetailtoregionsofinterest.

A. Observetheregionsofinterestdefinedonthevariousslides

Figure5:Hotspottarget

Figure6:Imagemapregion

B. Clickonahotspotorimagemaptoseethenameandconfiguredactioninthe“Actions”panel

Theactiontypecanbeaquickviewreferencingaproductinthesystem,oranexternalhyperlink.

C. Let’saddahotspot.Firstselectthe“RunningCoupleMountain”slidethatweaddedearlier.

D. Clickonthe“Hotspot”buttonlocatedintheactionbarabovetheslidebar

Figure7:Select“Hotspot”inactionbar

E. Placethehotspotbyclickingonthepurplegloveswithintheslide(picturedinfigure8)

F. Configureanactionfromthe“Actions”panelontheright

i. Typeadescriptivenameforthehotspot,suchas“purplegloves”

ii. Let’sassociatethishotspotwithanexistingproductbyselectingthe“Quickview”actiontype,andthenclickingonthesearchiconinthefieldbelowtoopentheproductpicker.


4

Figure8:Placinghotspotforgloves

iii. Selectthe“gloves”fromtheproductpicker.

Figure9:Productpicker

G. Placeanotherhotspotfortherunningpants

i. Clickthe“Hotspot”actionbarbuttonagaintoplaceahotspotfortherunningpants

ii. Inthe“Actions”panel,typeanameforthenewhotspot,suchas“runningpants”

iii. Opentheproductpicker,select“FabaRunningPants”.

H. Switchtothe“RunningDesertWoman”slide,andtoggletheimagemapcontrol

Figure10:Select“ImageMap”inactionbar


5

I. Draganimagemapregionoverthebluejacket

Figure11:Imagemapregion

J. ConfigureaHyperlinkaction

i. Typeanamefortheimagemap,suchas“bluejacket”

ii. Associatethisimagemapwithahyperlinkbyselecting“Hyperlink”astheactiontype

iii. EnteratestURLofyourchoice.

K. Clickthe“Preview”buttontoseewhatwehavesofar.

5. CUSTOMIZINGAPPEARANCEThecarouseleditorenablesliveconfigurationandpreviewofappearancecustomizations

A. Selectthe“Appearance”tabtocustomizethehotspotappearance

i. Selectthe"ImageMapEffect"componentandexpandthe"Background"widget

toselectcustomart,orsimplyuseoneoftheoutoftheboxgalleryicons.

ii. Clickthegallerybutton(highlightedinfigure12)

iii. Selectanoutoftheboxhotspoticon

Figure12:BackgroundWidget

Figure13:Hotspotgallery


B. Openthe“Shadow”widget

i. SettheShadowtypeto“outset”andconfigurethedesiredeffect

Figure14:Livepreviewofhotspot

Figure15:ShadowWidget

C. Selectthe“SetIndicator”component

i. Insidethepositionwidget,adjustthebottomslidertoanydesiredvalue

ii. Underthe“DottedStyle”section,adjustthesliderswithinthesizewidget

iii. Exploresettingashadoworaborder

6. CUSTOMIZINGBEHAVIORInadditionto"Appearance"wecanadjustbehavioralmodifiersinthe"Behavior"tab.Thecarouselviewerisbuiltfromseveralcomponentsthatexposemodifiersthatcanbecustomized.

A. Selectthe"CarouselView"componentundertheBehaviortab

i. Openthe"SlideTransition"widgettorevealanimationoptions.

ii. Changethedefault"fade"animationto"side".

B. Selectthe“SetIndicator”componentundertheBehaviortab

i. Changethe“SetIndicatorMode”to“numeric”toobservetheeffect

7. PREVIEWTHESETANDSAVEOncesatisfiedwithourappearanceandbehaviorcustomizationswecansavethecarouselset.Thistutorialcoversjustasmallsampleofthemanyaspectsthatcanbeconfigured.

A. Click“Save”

B. Provideanewpresetnamesuchas“Demo”


7

Thecarouseleditormakesadistinctionbetweenthecarouselcontentandtheviewerconfigurationmadeinthe“Appearance”and“Behavior”tabs.

Viewerconfigurationissavedseparatelyinaviewerpreset.Thisprovidesalotofflexibilitysinceitallowsmanycarouselsetstosharecommonviewerappearanceandbehaviorconfiguration.

Note:Usercustomuserpresetscanbeoverwrittenwhileoutoftheboxpresetsareread-only.Customizationstooutoftheboxpresetsrequireustosaveasanewpreset.

Figure16:Savecarouseldialog

C. Clickthe“Confirm”buttontosaveandexittheCarouselBannerEditor.


INTERACTIVEVIDEO

Createinteractivevideosthatdriveconversion.Addproductdetailtodefinedsegmentsofvideotoallowcustomerstolinkdirectlytotheirshoppingcartforimmediatepurchase,aswellasotherservices.

1. NAVIGATETOINTERACTIVEVIDEOSAMPLEA. NavigatetoAssetsàFilesàSummitàShoppableVideo2

B. Clickontheassetcardtitled“KitchenVideo”topreviewthevideo

2. EXPLORINGTHEINTERACTIVEVIDEOEDITORWe’llexploresomefeaturesbymodifyinganexistinginteractivevideo,andaddingsomenewcontent.

A. Click“Edit”inthetopleftofthescreentoopentheInteractiveVideoEditor

B. First,let’spreviewtheexistingvideo,clickthe“Preview”buttoninthetoprightcorner

2http://localhost:4502/assets.html/content/dam/summit/adobe-axis-demo


9

Figure17:InteractiveVideoEditor

C. Adjustthe“TimelineScaleSlider”toscaleandexaminethetimelinecontentsmoreeasily

Figure18:TimelineScaleSlider

D. Clickonasegmentinthetimelinetoadjustandinspecttheassociatedproducts

Figure19:Selectsegmentandproduct


10

i. Tryadjustingsegmentdurationbydraggingthebluehandles

ii. Clickingonasegmenthandlemovestheplayheadtothatpositionanddisplaystheframeofvideoatthatposition.

3. ADDINGPRODUCTSTOOURCONTENTWORKSPACELet’scompletethisincompleteinteractivevideobyaddingsomemissingproducts.First,let’saddthedesiredproductstoourworkspace.

A. Clickthe“Content”tab,thenclick“SelectAssets”toopentheassetpicker.

i. NavigatetoSummitàShoppableVideoàProducts

ii. Selectthefollowingimagesbyhoveringoverthethumbnailsandclickingonthem:Glass,WineBucket,CandleDish,Candles,WineDecanter,SmallGlass

Figure20:Selectingmultipleproductsforinteractivevideo

iii. Clicktheblue“Select”buttononthetoprightoftheassetpicker.

4. SEGMENTINGVIDEOTostartsegmentationofthevideo,wemustchooseapositionandclick“AddSegment”.

A. Firstseektoposition1:18

i. Todothis,dragtheredvideoseekthumbtoquicklyjumparoundthetimeline

B. Clickthe“AddSegment”button

i. Let’sadjustthisnewsegmentsothatitspansfromabout1:18to1:23onthetimeline.Thiswillrepresentthewinedecanterandglass.

C. Associatesegmentwithproducts

i. Makesureonlythesinglesegmentishighlightedbyclickingonitinthetimeline

ii. Scrollthroughthe“Content”tabandclickonWineDecanterandGlasstoaddthemtotheselectedsegment.

iii. Clickontherespectiveproductsinthesegmenttocustomizetheirnameandactiontype.ThisissimilartotheCarouselBannerexample.Inthiscase,wecanleavethedefaultsasis.

D. Seektoposition1:24

E. Click“AddSegment”toaddafinalsegment

i. Adjustthenewsegmenttospanfrom1:24to1:35


11

F. Associatesegmentwithproducts

i. FollowthesamestepsfrompartCabove,howeverthistimeclickonthefollowingproducts:Candles,CandleDish,WineBucket,SmallGlass.

5. PREVIEWANDSAVESHOPPABLEVIDEOA. Clickonthe“Preview”buttontoseethecompletedvideo

B. Clickonthe“Shoppable_Video_Dark”dropdownselectlisttochoosethe“Shoppable_Video_Light”viewerpreset.

Viewerpresetsconfiguretheappearanceandbehaviorofthevieweritself.ToconfiguretheappearanceandbehavioroftheinteractivevideoviewerwecanaccomplishthisusingtheViewerPresetEditor.3

Figure21:Previewbuttonandpresetselector

C. Oncesatisfiedwiththeinteractivevideo,wecanclicktheblue“Save”buttontosavechangesandexittheeditor.

3http://localhost:4502/mnt/overlay/dam/gui/content/s7dam/viewerpresets/viewerpresets.html


DYNAMICMEDIAVIEWERSSDK

TheDynamicMediaViewersSDK(alsoknownastheScene7HTML5ViewersSDK)providesasetofJavaScript-basedcomponentsforcustomviewerdevelopment.Theviewersareweb-basedapplicationsthatallowforrichmediacontentservedbyAEMandAdobeScene7tobeembeddedinwebpages.

ThecomponentsaredesignedtoworkonAndroid,AppleiOSdevices,anddesktopbrowsersincludingInternetExplorer9andlater.Thisenablesyoutoprovideasingleworkflowforallsupportedplatforms.

Figure22:Acustomzoomviewerthatallowsuserstobrowsevariousimagesinaset

1. LOCATEBASICZOOMVIEWEREXAMPLEOurgoalwillbetobuildtheviewerinfigure22above.Wewillbeginbyreviewingandaugmentingabasicexistingexample.

A. NavigatebrowsertoexampleinCRXDE

i. InChrome(onthelabcomputer),openthebookmark“CRXDE–basicviewer.jsp”

ii. Ifbookmarkisunavailable,manuallynavigatetoCRXDE:http://localhost:4502/crx/de/


13

• InsideCRXDE,makesuretonavigatetonode:/apps/summit-viewer/components/basicviewer/basicviewer.jsp4

Figure23:Customviewercodeforbasicviewer.jspinCRXDE

B. Run/openthecustomviewerinaseparatetabforpreviewpurposesduringdevelopment

i. InChrome(onthelabcomputer),openthebookmark“summit-viewer”inanewtab

ii. Ifbookmarkisunavailable,manuallynavigateto:

http://localhost:4502/summit-viewer.html/content/dam/summit/climbing

iii. Tryoutthebasiczoomviewer,doubleclickthemainviewerimagetozoominandout

2. CREATINGACUSTOMVIEWERCOMPONENTTheDynamicMediaViewersSDKwasdesignedtostandonitsown.ItworksbothinsideandoutsideAEMenvironments.WehavecreatedasimplecomponenttowrapandintegrateourcustomviewersothatitnaturallyhandlesAEMassetresourcesfromtheURL.

4http://localhost:4502/crx/de/index.jsp#/apps/summit-viewer/components/basicviewer/basicviewer.jsp

14

A. Nodestructure

ToworkgracefullywithinAEMwehavemodeledastandardcomponentandcontentnodestructure.

Figure24:Nodestructure

Figure25:Propertieson"viewer"contentnode

Thecontentnode“viewer”has“sling:resourceType”settoloadscriptswithinthe“basicviewer”componentfolder.

Inaddition,“sling:vanityPath”hasbeensetto“/summit-viewer”.ThisallowsustoaccesstheviewerusingasimplifiedURL.

B. Let’sopenandanalyzethecontentsof“basicviewer.jsp”inCRXDE

OurcustomviewercomponentisasimplescriptthatgeneratesanentireHTMLdocument.TheJSPreadstheresourceprovidedintheURLandpassesittotheSDK.Thiscanbeseenonline22andline90.TheremainderoftheJSPoutputsthestaticHTMLandJavaScriptcodeasisforourcustomviewer.

<% Resource currentResource = UIHelper.getCurrentSuffixResource(slingRequest); %>

Figure26:CodetoreadresourcefromURL

3. THESTRUCTUREOFAVIEWERA. IncludethecoreSDKscript“Utils.js”insidetheheadelement:

 <script language="javascript" type="text/javascript" src="/etc/dam/viewers/s7sdk/3.2/js/s7sdk/utils/Utils.js"></script>

Figure27:IncludingUtils.js

15

B. Importthenecessarycomponentmodulesforabasiczoomviewer:

 <script language="javascript" type="text/javascript"> s7sdk.Util.lib.include('s7sdk.common.Container'); s7sdk.Util.lib.include('s7sdk.image.ZoomView'); </script>

Figure28:Includerelatedcomponentmodules

C. Thecoreinitializationlogicofaviewerapplication

<script language="javascript" type="text/javascript"> /* We create a self-running anonymous function to encapsulate variable scope. Placing code inside such a function is optional, but this prevents variables from polluting the global object. */ (function () { // Initialize the SDK s7sdk.Util.init(); /* Create an instance of the ParameterManager component to collect viewer configuration. Configuration can come from a viewer preset, URL, or the HTML page itself. The ParameterManager component also sends an event once all of the needed files are loaded and the configuration parameters have been processed. */ var params = new s7sdk.ParameterManager(); /* Event handler for the s7sdk.Event.SDK_READY event that is dispatched by ParameterManager. Within this handler we can instantiate the various viewer components. All components (except the ParameterManager) must be instantiated within this handler. */ function initViewer() { /* Default modifiers can be defined directly on the ParameterManager instance. Here we configure the viewer to operate using AEM resource paths by default. */ params.push("aemmode", "1"); params.push("asset", "<%= xssAPI.getValidHref(currentResource.getPath()) %>"); // Instantiate viewer components ... } /* Register the event handler for the s7sdk.Event.SDK_READY event that is dispatched by the ParameterManager. This event is dispatched once modifiers have been processed and it is safe to initialize the viewer. */ params.addEventListener(s7sdk.Event.SDK_READY, initViewer, false); /* After registering the handler for the s7sdk.Event.SDK_READY event we can invoke ParameterManager.init() to continue viewer initialization and configuration. */ params.init(); }()); </script>

Figure29:Coreinitializationofviewerapplication


16

4. CREATINGANIMAGESETVIEWERLet’saugmenttheprovided“basicviewer.jsp”exampletogiveuserstheabilitytoselectimagesfromaset.TodothiswewillneedtoaddtheMediaSetandSwatchescomponents.

A. AddthefollowingSDKincludesunderneaththeexistingonesonline61:

s7sdk.Util.lib.include('s7sdk.set.MediaSet'); s7sdk.Util.lib.include('s7sdk.set.Swatches');

Figure30:IncludemodulesfortheMediaSetandSwatchescomponents

B. Updatethevariablelistwiththefollowing:

var mediaSet, container, zoomView, swatches;

Figure31:Add"mediaSet"and"swatches"variables

C. InstantiatetheMediaSetandSwatchescomponentsinsidetheinitViewerfunction.AddthefollowingcodeunderneaththeinstantiationoftheZoomViewcomponent.

BesuretoinstantiatetheSwatchesinstanceaftertheZoomViewandContainercomponents,otherwisethestackingorderwillcoverandhidetheSwatches.

// Create MediaSet component to retrieve and parse set information mediaSet = new s7sdk.set.MediaSet(null, params, "mediaSet"); // Register an event handler to determine when the set has been parsed mediaSet.addEventListener(s7sdk.event.AssetEvent.NOTF_SET_PARSED, onSetParsed, false); // Create Swatches component and register an event handler for swatch selection swatches = new s7sdk.set.Swatches("s7container", params, "mySwatches"); swatches.addEventListener(s7sdk.event.AssetEvent.SWATCH_SELECTED_EVENT, onSwatchSelected, false);

Figure32:InstantiationofMediaSetandSwatches

D. AddtheeventhandlerforMediaSetdirectlyunderneaththecodeabove

/* Event handler for the s7sdk.event.AssetEvent.NOTF_SET_PARSED event dispatched by MediaSet to assign the asset to the Swatches once parsing is complete. */ function onSetParsed(event) { // set media set for Swatches to display var mediasetDesc = event.s7event.asset; swatches.setMediaSet(mediasetDesc); // select the first swatch by default swatches.selectSwatch(0, true); }

Figure33:MediaSeteventhandler


17

E. AddtheeventhandlerforSwatchestodeterminewhentheuserhasmadeaselection

/* Event handler for s7sdk.event.AssetEvent.SWATCH_SELECTED_EVENT events dispatched by Swatches so that we can switch the image in the ZoomView when a different swatch is selected. */ function onSwatchSelected(event) { zoomView.setItem(event.s7event.asset); }

Figure34:Swatchselectionhandler

F. Let’shavetheswatchesresizetotaketheentireviewerwidth.AddacallintheresizeViewerfunctiontoresizetheswatcheswhenevertheuserresizestheirbrowser.

swatches.resize(width, swatches.getHeight());

Figure35:Resizeswatchestocontainerwidth

G. Finally,let’saddsomeCSStodefinetheappearanceoftheSwatchescomponent.Addthefollowingwithinthestyleelementnearthetopofthepage:

.s7swatches { /* Align swatches to bottom of viewer */ bottom: 0; left: 0; right: 0; height: 150px; }

Figure36:AddingCSSforSwatchescomponent

H. Let’sadjustthesizeoftheSwatchescomponent

i. Changetheheightdefinedfor“.s7swatches”inthestyleelementfrom150pxto250px

ii. Addthefollowingruletomakethethumbslarger.TheSwatchescomponentwillautomaticallyrequestthehigherresolutionthumbstocompensate.

.s7swatches .s7thumb { width: 150px; height: 150px; }

Figure37:Increasesizeofthumbs

5. SAVEANDPREVIEWYOURVIEWERA. Savebasicviewer.jspinCRXDE


18

B. Openthe“summit-viewer”tab

i. Refreshthepagetopreviewourenhancements

Figure38:Finalpreviewofourcustomviewer

C. TrychangingtheassetresourceintheURLtothe“Sports”carousel

i. ChangetheassetintheURLfrom“climbing”to“sports”

http://localhost:4502/summit-viewer.html/content/dam/summit/sports

Ourcustomviewerisabletorenderthecarouselset!However,thehotspotandimagemapregionsdonotshowupsinceourcustomviewerdoesnotimplementthem.


RESOURCES

A. DynamicMedia(GeneralInformation)http://www.adobe.com/marketing-cloud/enterprise-content-management/dynamic-media.html

B. SamplesofDynamicMediaViewershttps://marketing.adobe.com/resources/help/en_US/s7/vlist/vlist.html

C. WorkingwithDynamicMedia(AEM6.2specific)https://docs.adobe.com/docs/en/aem/6-2/author/assets/dynamic-media.html

D. ViewersReferenceGuidehttps://marketing.adobe.com/resources/help/en_US/s7/viewers_ref/

E. IntroductiontotheScene7HTML5ViewerSDKTutorialhttps://marketing.adobe.com/resources/help/en_US/s7/viewers_ref/c_tutorial.html

carousel banners - shetalksreallyfast...carousel banners (also referred to as carousel sets) enable...

Documents