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

Welkom bij Dynamic Media Journey: The Basics, Part II, waar u het volgende kunt verwachten:

  • Anatomie van een Dynamic Media URL en hoe Dynamic Media inhoud levert
  • Basisprincipes van het maken van voorinstellingen voor afbeeldingen om elementen te renderen
  • Afbeeldingssets, centrifuges en gemengde mediasets

Zie ook Dynamic Media Journey; The Basics, Part I.

TIP
Voor de beste resultaten raadt Adobe u aan deze Dynamic Media-reis op een desktopcomputer te lezen en weer te geven.

Anatomie van een Dynamic Media URL en hoe Dynamic Media inhoud levert dm-journey-d

Nadat uw Dynamic Media-elementen zijn geüpload en gepubliceerd, kunt u de gegenereerde URL van een element kopiëren en deze in uw browser plakken om te zien hoe het element er voor een klant uitziet. De volgende gekopieerde URL voor een gecontroleerde afbeelding is gesplitst naar kleur, zodat u deze eenvoudiger kunt lezen en begrijpen.

Anatomie van een Dynamic Media-URL
Anatomie van een Dynamic Media-URL.

Het eerste deel van de rode URL verwijst naar het serverdomein zelf. In dit geval wordt Dynamic Media uitgevoerd op een algemeen serverdomein, dat https://s7d1.scene7.com/is/image/. Het is gemakkelijk om naar een reeks beelden te kunnen kijken en te begrijpen of zij door Dynamic Media enkel door het serverdomein worden gediend. De URL zal redelijk consistent zijn. Er zijn echter sommige Dynamic Media-klanten die zijn overgeschakeld naar een specifiek serverdomein waar dit mogelijk is name-of-your-company.scene7.com. Een specifiek serverdomein is vereist voor Smart Imaging.

De accountnaam is het gedeelte in paars. In dit geval wordt de account aangeroepen jpearldemo.

De ID of naam van het element AdobeStock_28563982 is groen. Merk op dat het element nee bestandsextensie zoals .png of .jpg. Wanneer elementen in Dynamic Media worden opgenomen, wordt de bestandsextensie verwijderd en wordt een ander type bestand gemaakt: een piramid-TIFF-bestand. Met de piramic-TIFF kan Dynamic Media snel uitvoeringen maken.

Tot slot zijn er enkele parameters voor beeldverwerking. ?wid=1000&fmt=jpeg&qlt=85geel aan het uiteinde.

Het volledige URL-pad is live. Probeer het.

Zorg dat uw browservenster nog steeds open is voor de Dynamic Media URL en de gecontroleerde afbeelding. Laten we nader kijken hoe u uitvoeringen van de afbeelding kunt maken door alleen de URL te wijzigen.

De gecontroleerde afbeelding renderen via de URL

Eerst verwijdert u alleen handmatig de regels voor afbeeldingsverwerking in het URL-pad. Laat de servernaam, accountnaam en de element-id of afbeeldingsnaam ongewijzigd. Probeer het.

Voeg nu een afbeeldingsverwerkingsparameter toe aan het einde van de URL. Typ rechts van de naam van de afbeelding in het veld URL het volgende. ?wid=500en vervolgens op Enter. Probeer het.

U ziet dat er een nieuwe uitvoering van het horloge wordt gegenereerd. Een belangrijke stap voorwaarts om te begrijpen dat u met deze eenvoudige oefening van het wijzigen van de afbeeldingsbreedte de afbeelding volledig dynamisch genereert.

Wijzig nu de breedte van 500 pixels naar 1000 pixels en druk vervolgens op Enter. Probeer het.
Het moment waarop u drukt Enter, gaat browser terug naar de Server van het Beeld van Dynamic Media. Het produceert een gloednieuwe vertoning van het horloge, die op de nieuwe breedtewaarde wordt gebaseerd u enkel inging, dan levert het nieuwe beeld terug aan browser, en caches het.

Dynamic Media beschikt over een groot aantal parameters voor beeldverwerking waarmee u uw afbeeldingselementen op webpagina's kunt perfectioneren. U kunt zie hier een lijst.

Voeg nu een rotatieparameter toe aan de gecontroleerde afbeelding. En het einde van het URL-pad, onmiddellijk na wid=1000, type &rotate=90en drukt u vervolgens op Enter. Probeer het.

Het horloge wordt nog steeds enigszins schuingetrokken naar links. De rotatiewaarde wijzigen van 90 tot 92en drukt u vervolgens op Enter. Probeer het.

Nogmaals, het moment waarop u drukt Enter Er wordt bijna onmiddellijk een nieuwe uitvoering van het horloge gegenereerd. U kunt zien wat voor prestaties u krijgt, wat verklaart waarom Dynamic Media meer dan 800.000 afbeeldingsverzoeken kan indienen, per seconde, op een druk weekend of een grote vakantie.

Hoewel het mogelijk is de parameters voor afbeeldingsverwerking in een URL per afbeelding te wijzigen, is dit geen efficiënte methode, vooral niet als u tienduizenden afbeeldingen op uw website hebt staan. Een veel betere aanpak is het gebruik van voorinstellingen voor afbeeldingen.

Basisprincipes van het maken van voorinstellingen voor afbeeldingen om elementen te renderen dm-journey-e

Er zijn meerdere manieren en plaatsen waarop u een afbeelding wilt maken of waarop een afbeelding beschikbaar is. Een Creative gaat gewoonlijk naar Adobe Photoshop en slaat elk van deze verschillende vertoningen op als statische afbeeldingen.

Statische afbeeldingen
Goed: statische afbeeldingen, elk handmatig gemaakt.

Stel je nu voor dat de Creative Director naar de beelden kijkt en zegt:

"Ik wilde deze opname echt, zodat de grote hand naar de vier wijst, en de kleine hand naar de 1 wijst om de horlogewijzerplaat makkelijker te zien te maken."

De creatieve zou alle nieuwe statische beelden opnieuw moeten opnemen.

Als u echter verschillende voorinstellingen voor afbeeldingen hebt in Dynamic Media, kunt u deze afbeeldingen op elk gewenst moment gebruiken. Met de voorinstellingen voor afbeeldingen worden standaarden afgedwongen.

Primaire bestandenbenadering
Best: één bestand met meerdere uitvoeringen die direct worden gemaakt met behulp van voorinstellingen voor afbeeldingen, zoals Search_Grid en Thumbnail.

Waarom voorinstellingen voor afbeeldingen gebruiken?
Normen
Met voorinstellingen voor afbeeldingen wordt een standaardbehandeling voor afbeeldingsverwerking toegepast op elke afbeelding waarmee de voorinstelling wordt gemaakt.
Wijzigingsbeheer
Als u de afbeeldingsverwerking moet wijzigen, bewerkt u gewoon de parameter van de bestaande voorinstelling. De bijgewerkte definitie wordt automatisch doorgegeven aan alle aanvragen.

Elke plaats die u een bepaald type beeld nodig hebt, bijvoorbeeld,

  • een pagina met productdetails,
  • zoekraster,
  • miniatuur,
  • boodschappenkaart, of
  • hoofdafbeelding

U wilt dat de afbeelding met dezelfde parameters wordt geleverd, waar deze ook worden gebruikt.

Laten we even bekijken hoe een voorinstelling voor afbeeldingen in Dynamic Media is gemaakt.

Een voorinstelling voor afbeeldingen maken die begint met het tabblad Standaard
Een voorinstelling voor afbeeldingen maken die begint met het tabblad Standaard.

In het bovenstaande voorbeeld ziet u dat er een nieuwe voorinstelling voor de afbeelding met de naam is gemaakt Normaal. Dynamic Media gebruikt een voorbeeld, een out-of-box afbeelding - de rugzak - om u te helpen kenmerken van de voorinstelling van de afbeelding zien terwijl u deze maakt.

De Normaal de vooraf ingestelde afbeelding heeft een breedte van 500 pixels en een hoogte van 800 pixels. In Deel I van deze Reis leest u hoe u elementen in verschillende indelingen kunt leveren. Van de Format keuzemenu, kunt u ervoor kiezen elementen te leveren als JPEG, PNG, TIFF of diverse andere indelingen. U hebt hier flexibiliteit.

De Advanced bevat opties voor de kleurruimte van het element. Afhankelijk van de indeling die u hebt geselecteerd in het dialoogvenster Basic -tab - in het bovenstaande voorbeeld is JPEG geselecteerd - kunt u elementen leveren in RGB, Grijswaarden of CMYK. Van de Color Profile vervolgkeuzemenu, kunt u opgeven hoe u een CMYK-afbeeldingselement wilt leveren dat u wilt afdrukken. Er zijn ook extra parameters die u kunt toepassen voor het verscherpen van afbeeldingen. In dit geval: Unsharp Mask is toegepast.

Een afbeeldingsvoorinstelling maken door opties te selecteren op het tabblad Geavanceerd
Een voorinstelling voor afbeeldingen maken door opties te selecteren op het tabblad Geavanceerd.

U herinnert zich in Anatomie van een Dynamic Media-URL eerder, dat u over Dynamic Media URL leest en hoe dat wordt gebouwd. De Image Modifier In dit tekstvak kunt u eventueel extra gewenste parameters voor de afbeeldingsverwerking invoeren. De parameters worden opgenomen in de naam van de voorinstelling van de URL wanneer uw afbeeldingen worden geleverd, met behulp van de voorinstelling. In de bovenstaande schermafbeelding, de parameter bgc=451B15 is toegevoegd. Er is dus een donkerbruine achtergrondkleur toegevoegd.

U kunt een voorinstelling voor afbeeldingen zien als een recept voor uw afbeeldingen. Het zal om het even welke beelden leveren die de vooraf ingestelde, constant, elke keer gebruiken; het zal het zelfde zijn. De parameter &op_brightness=+10 is ook toegevoegd om de helderheid iets te verhogen.

Als u klaar bent, slaat u de voorinstelling op en is deze nu beschikbaar voor alle afbeeldingen die u hebt. In dit geval wilt u de opdracht Normaal een voorinstelling voor een afbeelding van een kom met vloeibare chocolade.

De voorinstelling voor afbeeldingen toepassen Normaal om een uitvoering van een afbeelding te genereren
Door de voorinstelling Medium van de afbeelding toe te passen, genereert u een uitvoering van een afbeelding.

U kopieert de URL en plakt deze in uw browser om de weergave van de afbeelding te controleren. Probeer het.

Let op de naam van de voorinstelling voor de afbeelding in uw browser Normaal in het volledige URL-pad.

U kunt zien wat voor helderheid in de afbeelding wordt weergegeven. Deze kwaliteit is deels te wijten aan de manier waarop de kom chocolade is neergeschoten. Bovendien is het gedeeltelijk omdat u met Dynamic Media grotere afbeeldingen kunt opslaan dan die welke via digitale kanalen worden geleverd.

Als alles er goed uitziet voor uw kom chocolade, plakt u de URL in uw webpagina's waar u de afbeelding op uw website wilt weergeven.

Als u nogmaals kijkt naar de onderstaande afbeelding, ziet u dat er een Cart voorinstelling afbeelding, een Grid voorinstelling, Large voorinstelling, PDP-page (Productdetailpagina) en diverse andere voorinstellingen.

Statische en dynamische voorinstellingen voor afbeeldingen
Statische en dynamische voorinstellingen voor afbeeldingen. De gecontroleerde afbeelding is gerenderd met de PDP-page voorinstelling afbeelding.

Maar wat als u een beeld op uw website moet veranderen? Stel dat u een aantal tests hebt uitgevoerd en dat de afbeelding van 120 x 120 (de Cart (voorinstelling afbeelding) niet ontvangen zoals u dacht. U moet de afbeelding groter maken door de breedte te verhogen tot 175 pixels en de hoogte te verhogen tot 175 pixels. Traditioneel zou je naar Adobe Photoshop moeten gaan om al die kartonafbeeldingen opnieuw te maken. Maar in Dynamic Media bewerkt u gewoon de voorinstelling van de afbeelding door de waarden voor Breedte en Hoogte bij te werken naar 175 en de voorinstelling op te slaan, zoals in het onderstaande voorbeeld wordt getoond.

Een voorinstelling voor afbeeldingen bewerken
De breedte en hoogte van het dialoogvenster Cart voorinstelling afbeelding.

Nadat u de voorinstelling van de afbeelding hebt gewijzigd en de cache hebt verwijderd, worden alle afbeeldingen bijgewerkt en worden alle URL's die met die voorinstelling worden gebruikt, ook niet overal wijzigen. Dat betekent dat er geen verbroken koppelingen en geen omleidingen van webpagina's nodig zijn.

Afbeeldingssets, centrifuges en gemengde-mediasets dm-journey-f

Een van de populairste toepassingen van Dynamic Media is de mogelijkheid voor u om afbeeldingssets, centrifuges en gemengde-mediasets te maken.

Afbeeldingssets bestaan doorgaans uit een reeks afbeeldingselementen die als één entiteit worden gepresenteerd. Deze sets bieden gebruikers een geïntegreerde weergave, waarbij gebruikers verschillende weergaven van een item kunnen zien door op een miniatuurafbeelding te klikken. Met afbeeldingssets kunt u andere weergaven van iets weergeven en de viewer beschikt over zoomgereedschappen waarmee u afbeeldingen op de juiste wijze kunt bekijken. Een afbeeldingsset met de naam "Running" weergeven die de Flyout-viewer gebruikt.

Hier in Dynamic Media kun je verschillende beelden zien van loopschoenen. Het is een serie van de productlijn die verkoop en marketing klanten als één enkele presentatie willen bekijken; een reeks van het Beeld.

Een afbeeldingsset maken
Het begin van het maken van een Afbeeldingsset.

Als u de afbeeldingsset wilt maken, kiest u Image Set van de Create keuzelijst. In het menu ziet u dat er ook opties zijn om een Mixed Media Set, Spin Set en Carousel Set. U maakt deze sets op ongeveer dezelfde manier als een afbeeldingsset.

Een gemengde mediaset kan afbeeldingen, stalensets, centrifuges, video's en adaptieve videosets bevatten. Probeer het. Een reeks van de Draai simuleert de echte handeling van het draaien van een voorwerp om het te onderzoeken. Met centrifuges kunt u de belangrijkste visuele details vanuit elke hoek bekijken. Probeer het.

Het maken van een afbeeldingsset is eenvoudig. U voegt gewoon de afbeeldingselementen toe die u in de set wilt opnemen.

Een afbeeldingsset maken
Met de Editor voor het instellen van afbeeldingen kunt u afbeeldingselementen toevoegen en de weergave ervan in de set opnieuw ordenen.

U moet de set een naam geven. Kies de naam zorgvuldig omdat u deze later niet kunt bewerken. In het bovenstaande voorbeeld wordt de set aangeroepen Running. Als u klaar bent, slaat u de set op.

En hier is het Running Afbeelding ingesteld in Experience Manager Assets.

De actieve afbeelding is ingesteld in Experience Manager Assets, Kaartweergave
De Running Afbeelding ingesteld in Experience Manager Assets, Kaartweergave.

Of u een reeks van het Beeld, een Gemengde reeks van Media, een reeks van de Draai, of een andere interactieve media hebt gecreeerd, nadat u de reeks creeert, wilt u zien hoe het verschijnt en voor een klant gedraagt. Dynamic Media heeft vele ingebouwde kijkers die u dat laten doen.

U begint met het selecteren van de samengestelde afbeeldingsset om deze te openen in een voorvertoning, zoals in het volgende voorbeeld wordt getoond.

De actieve afbeelding die in de voorvertoning is ingesteld en de optie Viewers is geselecteerd
De Running Afbeelding ingesteld in voorvertoning terwijl de optie Viewers is geselecteerd.

In het voorbeeld kunt u de actieve schoenstalen selecteren en in- en uitzoomen op de schoenen. Als u een viewer wilt toepassen op de set, selecteert u Viewers in het keuzemenu.

De uitvoerafbeelding die is ingesteld met de Flyout-viewer erop is toegepast
De Running Afbeelding die is ingesteld terwijl de Flyout-viewer erop is toegepast.

In dit geval worden de Flyout viewer is geselecteerd. Op dit punt kunt u een voorvertoning van de afbeeldingsset weergeven in de viewer. Maar het is beter om het in uw browser te zien, enkel hoe een klant het ziet. U selecteert URL linksonder, kopieert u de URL en plakt u deze in uw browser. Probeer het.

Met de enkele URL kunt u de afbeeldingsset en de viewer gebruiken waar u deze nodig hebt op uw website. In het vorige voorbeeld hebt u wellicht opgemerkt dat: Embed rechts van de URL-knop. Door Embed kunt u de code voor deze afbeeldingsset/viewer kopiëren en toevoegen aan een webpagina of een Experience Manager Sites-component.

De Flyout-viewer is een standaardviewer zonder vak waarvan u de eigenschappen kunt bewerken. U kunt ook, net als bij het maken van een voorinstelling voor afbeeldingen, uw eigen aangepaste viewer maken.

Vermeend dat uw verkoop- en marketingteam de Flyout-viewer niet bevalt. Ze houden van de zoomfunctie, maar ze willen dat klanten het zoomeffect direct boven de schoenen zien. In dat geval past u gewoon de InlineZoom-viewer toe op de afbeeldingsset en kopieert en plakt u de URL in uw browser om te zien hoe deze zich gedraagt. Probeer het.

Wanneer u de muisaanwijzer over de schoen beweegt, zoomt u in op die afbeelding en ziet u meer details wanneer u de aanwijzer verplaatst. En de reden daarvoor is gewoon de grootte van de afbeelding die aanvankelijk in Dynamic Media werd geüpload.

Als je denkt dat je als consument leeft, of als je je dagelijkse rol vervult, en als je naar verschillende websites gaat, zie je dit soort dingen. Denk na over hoe dat gebeurt en hoe je de kracht van Dynamic Media kunt gebruiken in je eigen werk en op de website van je bedrijf.

U leest alleen over afbeeldingssets en viewers. Laten we naar een paar andere kijkers kijken en ze uitproberen op één manier. Als u de viewer opnieuw wilt instellen, klikt u op de knop Refresh linksonder.

  • ZoomVertical_dark viewer toegepast op een afbeeldingselement. Probeer het.
  • Zoom_light viewer die op een afbeelding is toegepast. Probeer het.

Optioneel - Meer informatie

Als u meer wilt weten over wat u zojuist leest, gebruikt u de onderstaande materialen om concepten in detail te verkennen. Anders is de Dynamic Media-reis voltooid!

Dynamic Media Help-onderwerpen

Dynamic Media-zelfstudies

Dynamic Media-viewers

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab