Dynamic Media Journey: The Basics, del II dm-journey-part2

Välkommen till Dynamic Media Journey: The Basics, Part II, där du kan förvänta dig följande:

Se även Dynamic Media Journey; The Basics, Part I.

Anatomi av en Dynamic Media-URL och hur Dynamic Media levererar innehåll dm-journey-d

När dina Dynamic Media-resurser har överförts och publicerats kan du kopiera resursens genererade URL och klistra in den i webbläsaren för att se hur resursen kommer att se ut för kunden. Följande kopierade URL-adress för en bevakad bild bryts ned efter färg så att den blir lättare att läsa och förstå.

Anatomi av en Dynamic Media-URL.

Den första delen av URL:en i rött refererar till själva serverdomänen. I det här fallet körs Dynamic Media på en allmän serverdomän, som är https://s7d1.scene7.com/is/image/. Det är enkelt att ta en titt på en uppsättning bilder och förstå om de hanteras av Dynamic Media bara genom att titta på serverdomänen. URL:en kommer att vara ganska konsekvent. Det finns dock vissa Dynamic Media-kunder som har bytt till en dedikerad serverdomän där den kan vara name-of-your-company.scene7.com. En dedikerad serverdomän krävs för Smart Imaging.

Kontonamnet är delen i lila. I det här fallet kallas kontot jpearldemo.

Resurs-ID:t eller namnet AdobeStock_28563982 är grönt. Observera att resursen har filtillägget no som .png eller .jpg. När resurser hämtas till Dynamic Media tas filtillägget bort och en annan typ av fil skapas: en pyramid-TIFF-fil. Med Pyramic-TIFF kan Dynamic Media snabbt skapa renderingar direkt.

Slutligen finns det några bildbehandlingsparametrar, ?wid=1000&fmt=jpeg&qlt=85, som visas i gult på slutet.

Hela URL-sökvägen är aktiv. Prova.

Låt webbläsarfönstret fortfarande vara öppet för Dynamic Media URL och den bevakade bilden. Vi tittar närmare på hur du kan skapa återgivningar av bilden bara genom att ändra URL:en.

Återge den bevakade bilden via URL:en

Börja med att manuellt ta bort endast bildbearbetningsreglerna i URL-sökvägen. Lämna servernamnet, kontonamnet och resurs-ID:t eller bildnamnet. Prova.

Lägg nu till en bildbehandlingsparameter i slutet av URL:en. I URL-fältet skriver du ?wid=500 till höger om bildnamnet och trycker sedan på Enter. Prova.

Observera att en ny återgivning av bevakningen genereras. En viktig fördel med detta enkla arbete med att ändra bildens bredd är att bilden som visas genereras 100 % dynamiskt.

Ändra nu breddvärdet för 500 pixlar till 1000 pixlar och tryck sedan på Enter. Prova.
När du trycker på Enter återgår webbläsaren till Dynamic Media Image Server. Den genererar en helt ny återgivning av klockan, baserat på det nya breddvärdet du just angav, skickar sedan tillbaka den nya bilden till webbläsaren och cachelagrar den.

Dynamic Media har många bildbehandlingsparametrar som du kan använda för att finjustera bildresurser på webbsidor. Du kan se en lista över dem här.

Prova att lägga till en rotationsparameter till den bevakade bilden. Och slutet på URL-sökvägen, omedelbart efter wid=1000, skriv &rotate=90 och tryck sedan på Enter. Prova.

Klockan är fortfarande något skev till vänster. Ändra rotationsvärdet för 90 till 92 och tryck sedan på Enter. Prova.

När du trycker på Enter genereras en ny återgivning av klockan nästan omedelbart. Du kan se vilken typ av prestanda du får, vilket förklarar varför Dynamic Media kan leverera fler än 800 000 bildbegäranden, per sekund, under en hektisk helg eller en stor semester.

Även om det går att ändra bildbehandlingsparametrar i en URL-adress bild för bild är det inte en effektiv metod, särskilt om du har tiotusentals bilder som utgör webbplatsen. Ett mycket bättre sätt är att använda bildförinställningar.

Grundläggande om att skapa bildförinställningar för att återge resurser dm-journey-e

Det finns flera sätt och platser där du vill skapa en bild eller ha en bild tillgänglig. Traditionellt sett går en Creative-användare in i Adobe Photoshop och sparar alla dessa olika renderingar som statiska bilder.

Bra: statiska bilder som skapats manuellt.

Nu kan du föreställa dig att Creative Director tittar på bilderna och säger:

"Jag ville verkligen ha den här bilden så att den stora handen pekar på de fyra, och den lilla handen pekar på den första för att göra det lättare att se den."

Alla nya statiska bilder måste fotograferas igen.

Men om du har olika bildförinställningar i Dynamic Media kan du använda dessa bilder var du vill. Bildförinställningarna följer standarder.

Bäst: en fil med flera återgivningar skapade i farten med hjälp av bildförinställningar, som Search_Grid och Thumbnail .

Alla ställen där du behöver en viss typ av bild, till exempel

Du vill att den bilden ska levereras med samma parametrar oavsett var de kommer att användas.

Låt oss nu titta på hur en bildförinställning skapas i Dynamic Media.

Skapa en bildförinställning som börjar med fliken Grundläggande.

I exemplet ovan ser du att en ny bildförinställning skapades med namnet Medium. Dynamic Media använder ett exempel, en färdig bild - ryggsäcken - som hjälper dig att se egenskaper för bildförinställningen när du skapar den.

Bildförinställningen Medium har en bredd på 500 pixlar och en höjd på 800 pixlar. I del I av den här resan läser du om hur du levererar resurser i olika format. I listrutan Format kan du välja att leverera resurser i JPEG, PNG, TIFF eller flera andra format. Här har du flexibilitet.

Om du väljer fliken Advanced får du alternativ för resursens färgrymd. Beroende på vilket format du valde på fliken Basic - i exemplet ovan markerades JPEG - kan du leverera resurser i RGB, gråskala eller CMYK. I listrutan Color Profile kan du välja hur en CMYK-bildresurs ska levereras för utskrift. Observera också att det finns ytterligare parametrar som du kan använda för att göra bilderna skarpare. I det här fallet tillämpades Unsharp Mask.

Skapa en bildförinställning genom att välja alternativ på fliken Avancerat.

Du kommer ihåg i Anatomi av en Dynamic Media URL tidigare att du läste om Dynamic Media URL och hur den skapades. I textrutan Image Modifier kan du ange ytterligare bildbehandlingsparametrar som du vill använda. Parametrarna tas med i förinställningsnamnet för URL:en när bilderna levereras med hjälp av förinställningen. I skärmbilden ovan lades parametern bgc=451B15 till. Det vill säga, en mörkbrun bakgrundsfärg lades till.

Du kan tänka dig en bildförinställning som ett recept för dina bilder. Den kommer att leverera alla bilder som använder förinställningen, konsekvent, varje gång; den kommer att vara densamma. Parametern &op_brightness=+10 lades också till för att öka intensiteten något.

När du är klar sparar du förinställningen och nu är den tillgänglig för alla bilder som du har. I det här fallet vill du använda bildförinställningen Medium på en bild av en skål flytande choklad.

Använda bildförinställningen Medium för att generera en återgivning av en bild.

Du kopierar URL-adressen och klistrar sedan in den i webbläsaren för att kontrollera bildens utseende. Prova.

Lägg märke till namnet på bildförinställningen Medium i den fullständiga URL-sökvägen i webbläsaren.

Du kan se vilken typ av skärpa som visas i bilden. Kvaliteten beror delvis på hur chokladskålen filmades. Dessutom beror det delvis på att du med Dynamic Media kan lagra större bilder än vad som levereras till de digitala kanalerna.

Om allt ser bra ut för chokladskålen, klistrar du in URL-adressen på webbsidorna där du vill att bilden ska visas på webbplatsen.

Om du tittar igen på den bevakade bilden nedan kan du se att det finns en Cart-bildförinställning, en Grid-förinställning, en Large-förinställning, en PDP-page-förinställning (produktinformationssida) och flera andra.

Statiska och dynamiska bildförinställningar. Den bevakade bilden återgavs med bildförinställningen PDP-page.

Men tänk om du måste ändra en bild på din webbplats? Anta till exempel att du har utfört några tester och funnit att bilden på 120 x 120 (bildförinställningen Cart) inte tas emot som du trodde. Du måste göra bilden större genom att öka bredden till 175 pixlar och öka höjden till 175 pixlar. Traditionellt sett måste du bege dig till Adobe Photoshop och återskapa alla kundvagnsbilderna. Men med Dynamic Media redigerar du bara bildförinställningen genom att uppdatera värdena för Bredd och Höjd till 175 och spara förinställningen enligt exemplet nedan.

Redigera bredd och höjd för bildförinställningen i Cart .

När du har ändrat bildförinställningen och tömt cacheminnet uppdateras alla bilder och alla URL:er som används med den förinställningen ändras inte någonstans. Det innebär att inga brutna länkar och att inga omdirigeringar av webbsidor behövs.

Bilduppsättningar, snurra uppsättningar och blandade medieuppsättningar dm-journey-f

En del av de vanligaste användningsområdena för Dynamic Media är möjligheten att skapa bilduppsättningar, snurra och blandade medieuppsättningar.

Bilduppsättningar består vanligtvis av en serie bildresurser som presenteras som en enda enhet. Den här typen av uppsättningar ger användarna en integrerad visningsupplevelse, där användarna kan se olika vyer av ett objekt genom att klicka på en miniatyrbild. Med bilduppsättningar kan du presentera alternativa vyer av något och visningsprogrammet har zoomverktyg som gör att du kan granska bilder noggrant. Visa en bilduppsättning med namnet"Körs" som använder visningsprogrammet.

Här i Dynamic Media ser du flera bilder på skor. Det är en produktserie som försäljning och marknadsföring vill att kunderna ska se som en enda presentation, en Image-uppsättning.

Början av att skapa en bilduppsättning.

Om du vill skapa bilduppsättningen väljer du Image Set i den nedrullningsbara menyn Create. Observera på menyn att det också finns alternativ för att skapa en Mixed Media Set, en Spin Set och en Carousel Set. Du skapar uppsättningarna på ungefär samma sätt som en bilduppsättning.

En uppsättning med blandade media kan innehålla bilder, färgruteuppsättningar, snurruppsättningar, videor och adaptiva videouppsättningar. Prova. En snurra simulerar hur det verkliga händer att ett objekt testas. Med snurruppsättningar kan du visa viktiga visuella detaljer från alla vinklar. Prova.

Det är enkelt att skapa en bilduppsättning. Du lägger bara till de bildresurser som du vill inkludera i uppsättningen.

Med bilduppsättningsredigeraren kan du lägga till bildresurser och ändra ordningen på deras utseende i uppsättningen.

Du måste ge uppsättningen ett namn. Välj namnet noggrant eftersom du inte kan redigera det senare! I exemplet ovan kallas uppsättningen Running. När du är klar sparar du uppsättningen.

Här är Running-bilden i Experience Manager Assets.

Running Bilduppsättningen i Experience Manager Assets, kortvyn.

Vare sig du har skapat en uppsättning med bilder, en uppsättning med blandade media, en snurra eller något annat interaktivt medium vill du se hur den ser ut och fungerar för en kund när du har skapat den. Dynamic Media har många inbyggda visningsprogram som du kan använda för att göra just det.

Du börjar med att välja den inbyggda bilduppsättningen för att öppna den i en förhandsvisning som i följande exempel.

Alternativet Running Bilduppsättningen i förhandsvisning med visningsprogram är markerat.

Observera i förhandsgranskningen att du kan välja de körbara färgrutorna och zooma in och ut på skorna. Om du vill använda ett visningsprogram för uppsättningen väljer du Viewers i listrutan.

Running Bilden med visningsprogrammet för utfällbara bilder.

I det här fallet har visningsprogrammet Flyout valts. Nu kan du förhandsvisa bilduppsättningen i visningsprogrammet. Men det är bäst att se det i webbläsaren, precis som kunden ser det. Du väljer URL i det nedre vänstra hörnet, kopierar URL-adressen och klistrar in den i webbläsaren. Prova.

Med den enda URL:en kan du använda bilduppsättningen och visningsprogrammet där du behöver dem på webbplatsen. I det föregående exemplet kan du ha lagt märke till att Embed är till höger om URL-knappen. Genom att välja Embed kan du kopiera koden för den här bilduppsättningen/visningsprogrammet och lägga till den på en webbsida eller i en Experience Manager Sites-komponent.

Utfällbara visningsprogram är ett standardvisningsprogram som inte kan öppnas och vars egenskaper du kan redigera. Eller, precis som när du skapar en bildförinställning, kan du skapa ett eget anpassat visningsprogram.

Anta att ert sälj- och marknadsföringsteam inte gillar visningsprogrammet. De gillar zoomfunktionen men vill att kunderna ska se zoomeffekten direkt över skorna. I så fall tillämpar du bara InlineZoom-visningsprogrammet på bilduppsättningen och kopierar och klistrar in URL-adressen i webbläsaren för att se hur den fungerar. Prova.

När du flyttar muspekaren över skon zoomar du in i den bilden och du ser fler detaljer när du flyttar pekaren. Orsaken till det är bara storleken på bilden som ursprungligen överfördes till Dynamic Media.

När du funderar på att bo som konsument eller arbeta i din dagliga roll och när du besöker olika webbplatser ser du saker som detta. Fundera på hur det går till och hur du kan använda Dynamic Media i ditt eget arbete och på företagets webbplats.

Du läser bara om bilduppsättningar och visningsprogram. Låt oss titta på ett par andra tittare och testa dem på enstaka resurser. Om du vill återställa visningsprogrammet klickar du på knappen Refresh i det nedre vänstra hörnet.

Valfritt - Läs mer

Om du vill veta mer om vad du just läste kan du använda materialet nedan för att utforska koncept i detalj. Annars är din Dynamic Media Journey klar!

Dynamic Media självstudiekurser

Dynamic Media-visningsprogram