Dynamic Media Journey: De basis, deel II dm-journey-part2
-
Bent u nieuw aan Dynamische Media? Voor een snel, overzicht op hoog niveau van Dynamische Media, zie Werk met Dynamische Media .
-
Volg Dynamische Beste praktijken van Media om de meeste waarde te krijgen.
-
Probeer uit Dynamische het beeldmogelijkheden van Media met het hulpmiddel van de Momentopname .
-
Verzeker vlotte videoplayback met adaptieve video .
-
Automatiseer het bebouwen van beelden met het Slimme Gewas .
-
Automatiseer het bebouwen van video's met het Slimme Gewas .
-
Lever een interactieve 3D-Aangedreven ervaring .
Welkom bij Dynamic Media Journey: The Basics, Part II, waar u het volgende kunt verwachten:
- Anatomie van een URL voor dynamische media en hoe Dynamic Media inhoud levert.
- Grondbeginselen van het maken van voorinstellingen voor afbeeldingen om elementen te renderen.
- Afbeeldingssets, centrifuges en gemengde mediasets.
Zie ook Dynamische Reis van Media; De Grondbeginselen, Deel I .
Anatomie van een URL voor dynamische media en hoe Dynamic Media inhoud levert dm-journey-d
Nadat uw dynamische 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 Dynamische 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, namelijk https://s7d1.scene7.com/is/image/ . Het is gemakkelijk om naar een reeks beelden te kunnen kijken en te begrijpen of zij door Dynamische Media enkel door het serverdomein worden gediend. De URL zal redelijk consistent zijn. Er zijn echter enkele klanten van Dynamic Media die zijn overgeschakeld naar een specifiek serverdomein waar dit mogelijk name-of-your-company.scene7.com is. Een specifiek serverdomein is vereist voor Smart Imaging.
De accountnaam is het gedeelte in paars. In dit geval wordt het account jpearldemo genoemd.
De element-id of naam, AdobeStock_28563982 , is groen. Bericht dat de activa geen dossieruitbreiding zoals .png of .jpg heeft. 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.
En tenslotte, zijn er sommige beeldverwerkingsparameters, ?wid=1000&fmt=jpeg&qlt=85, die in geel op het eind worden getoond.
Het volledige URL-pad is live. probeer het .
Zorg dat uw browservenster nog steeds open is voor de URL van de dynamische media en de gecontroleerde afbeelding en kijk 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 ?wid=500 in het veld URL rechts van de naam van de afbeelding en druk 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 breedtewaarde van 500 pixels in 1000 pixels en druk op Enter . probeer het {target="_blank}.
Wanneer u op Enter drukt, gaat de browser terug naar de Dynamic Media Image Server. 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.
Dynamische media beschikt over een groot aantal parameters voor afbeeldingsverwerking waarmee u de elementen van de afbeelding op webpagina's kunt perfectioneren. U kunt een lijst van hen hier zien.
Voeg nu een rotatieparameter toe aan de gecontroleerde afbeelding. En het einde van het URL-pad, direct na wid=1000 , typt u &rotate=90 en drukt vervolgens op Enter . probeer het .
Het horloge wordt nog steeds enigszins schuingetrokken naar links. Wijzig de rotatiewaarde van 90 in 92 en druk op Enter . probeer het .
Wanneer u nogmaals op Enter drukt, wordt bijna onmiddellijk een nieuwe uitvoering van het horloge gegenereerd. U kunt het soort prestaties zien die u krijgt, die verklaart waarom de Dynamische Media meer dan 800.000 beeldverzoeken, per seconde, op een bezet weekend, of belangrijke vakantie kan leveren.
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 traditioneel naar Adobe Photoshop en slaat elk van deze verschillende vertoningen op als statische afbeeldingen.
Goed: statische beelden, manueel creeerde elk.
Stel je nu voor dat de Creative Director naar de beelden kijkt en zegt:
"Ik wilde echt dit schot zodat de grote hand naar vier richt, en de kleine hand richt bij 1 om de horlogewijzerplaat gemakkelijker te maken te zien."
De creatieve zou alle nieuwe statische beelden opnieuw moeten opnemen.
Maar als u met Dynamische media verschillende voorinstellingen voor afbeeldingen hebt, kunt u deze afbeeldingen op elk gewenst moment gebruiken. Met de voorinstellingen voor afbeeldingen worden standaarden afgedwongen.
Best: één dossier met veelvoudige die vertoningen op de vlucht worden gecreeerd gebruikend beeld vooraf instelt, zoals Search_Grid en Thumbnail.
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 kijken hoe een voorinstelling voor afbeeldingen wordt gemaakt in Dynamische media.
Creërend een beeld dat met het Basis lusje vooraf in wordt gesteld.
In het voorbeeld hierboven, kunt u zien dat een nieuw beeld vooraf ingesteld met de naam Medium werd gecreeerd. Dynamische media gebruikt een voorbeeld, een out-of-box afbeelding - de rugzak - om u te helpen kenmerken van de vooraf ingestelde afbeelding zien aangezien u het creeert.
Medium vooraf ingesteld beeld heeft een breedte van 500 pixel en een hoogte van 800 pixel. In Deel I van deze Reis leest u hoe u elementen in verschillende indelingen kunt leveren. In het keuzemenu Format kunt u ervoor kiezen elementen te leveren als JPEG, PNG, TIFF of verschillende andere indelingen. U hebt hier flexibiliteit.
Als u het tabblad Advanced selecteert, kunt u opties instellen voor de kleurruimte van het element. Afhankelijk van de indeling die u hebt geselecteerd op het tabblad Basic - in het bovenstaande voorbeeld is JPEG geselecteerd - kunt u elementen leveren in RGB, Grijswaarden of CMYK. In het keuzemenu Color Profile 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 is Unsharp Mask toegepast.
Creërend een beeld vooraf ingesteld door opties van het Geavanceerde lusje te selecteren.
U herinnert zich in Anatomie van een Dynamische Media URL vroeger, dat u over Dynamische Media URL leest en hoe dat wordt gebouwd. In het tekstvak Image Modifier 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 is de parameter bgc=451B15 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 Medium vooraf ingesteld beeld op een beeld van een kom van vloeibare chocolade toepassen.
Toepassend het beeld vooraf ingestelde Medium om een vertoning van een beeld te produceren.
U kopieert de URL en plakt deze in uw browser om de weergave van de afbeelding te controleren. probeer het .
In uw browser, merk de naam van het beeld vooraf ingesteld Medium in de volledige weg URL op.
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 dit gedeeltelijk omdat u met Dynamic Media grotere afbeeldingen kunt opslaan dan die welke naar 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 voor de afbeelding, een Grid voorinstelling, een Large voorinstelling, een PDP-page voorinstelling (Productdetailpagina) en verschillende andere voorinstellingen zijn.
Statische en Dynamische beeldvoorinstellingen. De gecontroleerde afbeelding is gerenderd met de voorinstelling voor de PDP-page -afbeelding.
Maar wat als u een beeld op uw website moet veranderen? Stel dat u bijvoorbeeld tests hebt uitgevoerd en hebt vastgesteld dat de afbeelding van 120 x 120 (de voorinstelling voor de afbeelding Cart ) niet op de gewenste wijze wordt ontvangen. 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 met Dynamische media kunt u de voorinstelling voor de afbeelding gewoon bewerken 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.
het uitgeven van de Breedte en de Hoogte van Cart vooraf ingesteld beeld.
Nadat u uw vooraf ingesteld beeld verandert, en het geheime voorgeheugen verwijdert, worden alle beelden bijgewerkt, en alle URLs die met die vooraf ingesteld worden gebruikt, niet veranderen overal. Dat betekent dat er geen verbroken koppelingen en geen omleidingen van webpagina's nodig zijn.
Afbeeldingssets, centrifuges en gemengde-mediasets dm-journey-f
Sommige populairdere toepassingen van Dynamische Media, is de capaciteit voor u om reeksen van het Beeld, Reeksen van de Draai, en Gemengde Reeksen van Media tot stand te brengen.
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. Mening een beeld plaatste genoemd "Lopend"die de kijker van de Flyout gebruikt.
Hier in Dynamic Media kunt u verschillende afbeeldingen van loopschoenen zien. Het is een serie van de productlijn die verkoop en marketing klanten als één enkele presentatie willen bekijken; een reeks van het Beeld.
het begin van het creëren van een Reeks van het Beeld.
Als u de afbeeldingsset wilt maken, kiest u Image Set in het keuzemenu Create . In het menu ziet u ook opties voor het maken van een Mixed Media Set , een Spin Set en een 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.
De Vastgestelde Redacteur van het Beeld laat u beeldactiva toevoegen en hun verschijning in de reeks opnieuw rangschikken.
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 Running genoemd. Als u klaar bent, slaat u de set op.
Hier is de Running -afbeelding ingesteld in Experience Manager Assets.
het Running Beeld dat in Experience Manager Assets, de Mening van de Kaart wordt geplaatst.
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. Dynamische media heeft talrijke ingebouwde viewers waarmee u dat kunt doen.
U begint met het selecteren van de samengestelde afbeeldingsset om deze te openen in een voorvertoning, zoals in het volgende voorbeeld wordt getoond.
het Running Beeld dat in voorproef met geselecteerde optie van Kijkers wordt geplaatst.
In het voorbeeld kunt u de actieve schoenstalen selecteren en in- en uitzoomen op de schoenen. Als u een viewer op de set wilt toepassen, selecteert u Viewers in het keuzemenu.
het Running Beeld plaatste met de Reclamer die op het wordt toegepast.
In dit geval is de viewer van Flyout 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 en kopieert de URL en plakt 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 gemerkt dat Embed rechts van de URL-knop staat. Door Embed te selecteren, kunt u de code voor deze beeldreeks/kijker kopiëren, en het toevoegen aan een Web-pagina of een component van Experience Manager Sites.
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 u de kracht van Dynamic Media kunt gebruiken in uw eigen werk en op de website van uw 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 in de linkerbenedenhoek.
ZoomVertical_dark-viewer toegepast op een afbeeldingselement. probeer het .Zoom_light-viewer toegepast op een afbeelding. 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 Journey voltooid!
Dynamische zelfstudies van Media
- Dynamische Media van het Gebruik met Experience Manager Assets
- de inhoudsbibliotheek van Adobe Experience Manager (onderzoek op Dynamische Media)
Dynamische kijkers van Media
- Levende Demo's van elke kijker