Dynamic Media-assets aan pagina's toevoegen

Als u de functionaliteit voor dynamische media wilt toevoegen aan elementen die u op uw websites gebruikt, kunt u de component Dynamic Media of Interactive Media rechtstreeks op de pagina toevoegen. U doet dit door de modus Lay-out in te voeren en de dynamische mediacomponenten in te schakelen. Vervolgens kunt u deze componenten aan de pagina toevoegen en assets aan de component toevoegen. De dynamische media en interactieve mediacomponenten zijn slim: ze weten of u een afbeelding of video toevoegt en de beschikbare opties veranderen dienovereenkomstig.

U voegt dynamische media-elementen rechtstreeks aan de pagina toe als u AEM gebruikt als uw WCM. Als u een oplossing van derden gebruikt voor uw WCM, moet u uw assets koppelen of insluiten. Voor een responsieve website van derden raadpleegt u het leveren van geoptimaliseerde afbeeldingen op een responsieve site.

OPMERKING

U moet elementen publiceren voordat u deze aan pagina's in AEM toevoegt. Zie Dynamic Media-middelen publiceren.

Een Dynamic Media-component aan een pagina toevoegen

Het toevoegen van een Dynamic Media-component aan een pagina is hetzelfde als het toevoegen van een component aan een pagina. De Dynamic Media-componenten worden in de volgende secties uitgebreid beschreven.

OPMERKING

Als er een Dynamic Media-component op een webpagina staat die wordt benaderd door een gebruiker met de machtiging Alleen-lezen, worden de pagina-einden en de componenten niet correct weergegeven. De reden hiervoor is dat de pagina opnieuw wordt samengesteld om ervoor te zorgen dat de eigenschappen van de componenten goed zijn en dat de bestanden en configuraties waarnaar wordt verwezen toegankelijk zijn. De pagina wordt vervolgens opnieuw gerenderd, waardoor de componenten worden verbroken. de respectievelijke componentcode op de pagina kan niet opnieuw worden weergegeven vanwege de alleen-lezen toegang van de gebruiker.

Om dit probleem te voorkomen, moet u ervoor zorgen dat AEM Sites-gebruikers de benodigde machtigingen hebben om toegang te krijgen tot de middelen.

  1. Open in AEM de pagina waaraan u de Dynamic Media-component wilt toevoegen.

  2. Klik op het pictogram Components in het deelvenster aan de linkerkant van de pagina (mogelijk moet u de weergave van het zijpaneel in- of uitschakelen).

  3. Selecteer Dynamic Media onder de kop Components in de vervolgkeuzelijst. Als er geen lijst met Dynamic Media-componenten beschikbaar is, moet u waarschijnlijk de Dynamic Media-componenten inschakelen die u wilt gebruiken. Zie Dynamic Media-componenten inschakelen.

    chlimage_1-537

  4. Sleep een Dynamic Media-component die u wilt gebruiken naar de pagina op de gewenste locatie.

  5. Houd de muisaanwijzer rechtstreeks boven de component. Tik eenmaal om de werkbalk van de component weer te geven wanneer de component is omringd door een blauw vak. Tik op het pictogram Configuration (moersleutel).

  6. Bewerk indien nodig de componenten en klik op het vinkje om de wijzigingen op te slaan.

Dynamic Media-componenten inschakelen

Als er geen Dynamic Media-componenten beschikbaar zijn om aan een pagina toe te voegen, betekent dit waarschijnlijk dat u eerst de componenten moet inschakelen die u wilt gebruiken.

  1. Open in AEM de pagina waaraan u de Dynamic Media-component wilt toevoegen.

  2. Tik links op de werkbalk naast de pagina op het pictogram Pagina-informatie en tik vervolgens op Edit Template in de vervolgkeuzelijst.

    edit-template

  3. Tik in de vervolgkeuzelijst rechts van de werkbalk naast de pagina op Structure.

    Beleid

  4. Tik onder aan de pagina op Layout Container om de werkbalk te openen en tik vervolgens op het pictogram Beleid.

  5. Controleer of op de pagina Layout Container onder de kop Properties het tabblad Allowed Components is geselecteerd.

    Toegestane componenten

  6. Schuif totdat u Dynamic Media ziet.

  7. Tik op het pictogram > links van Dynamic Media om de lijst uit te vouwen, selecteer de Dynamic Media-componenten die u wilt inschakelen.

    Lijst met Dynamic Media-componenten

  8. Tik in de rechterbovenhoek van de pagina Layout Container op het pictogram Gereed (vinkje).

  9. Tik in de vervolgkeuzelijst rechts op de werkbalk boven aan de pagina op Initial Content en voeg vervolgens zoals gewoonlijk een Dynamic Media-component toe aan een pagina.

Dynamic Media-componenten lokaliseren

U kunt Dynamic Media-componenten op twee manieren lokaliseren:

  • Open Properties en selecteer het tabblad Advanced op een webpagina in Sites. Selecteer de gewenste taal voor lokalisatie.

    chlimage_1-538

  • Selecteer de gewenste pagina of paginagroep in de sitekiezer. Tik Properties en selecteer het tabblad Advanced. Selecteer de gewenste taal voor lokalisatie.

    OPMERKING

    Niet alle talen in het menu Language hebben tokens toegewezen.

Dynamic Media-componenten

Dynamic Media en Interactieve media zijn beschikbaar onder het tabblad Dynamic Media in Components. U gebruikt de component Interactive Media voor alle interactieve elementen, zoals interactieve video, interactieve afbeeldingen of carrouselsets. Gebruik de Dynamic Media-component voor alle andere dynamische mediacomponenten.

OPMERKING

Deze componenten zijn niet standaard beschikbaar en moeten via de sjablooneditor beschikbaar worden gemaakt voordat ze kunnen worden gebruikt. Nadat ze in de sjablooneditor beschikbaar zijn gesteld, kunt u de componenten aan de pagina toevoegen, net als elke andere AEM.

chlimage_1-539

Dynamic Media-component

De Dynamic Media-component is slim. Afhankelijk van het feit of u een afbeelding of video toevoegt, hebt u verschillende opties. De component ondersteunt voorinstellingen voor afbeeldingen, op afbeeldingen gebaseerde viewers, zoals afbeeldingssets, centrifuges, gemengde mediasets en video. Bovendien reageert de viewer snel. De grootte van het scherm verandert dus automatisch op basis van de schermgrootte. Alle viewers zijn HTML5-viewers.

OPMERKING

Als er een Dynamic Media-component, een interactieve mediacomponent of beide aanwezig zijn op een webpagina die wordt geopend door een gebruiker met de machtiging Alleen-lezen, worden de pagina-einden en de componenten niet correct weergegeven. De reden hiervoor is dat de pagina opnieuw wordt samengesteld om ervoor te zorgen dat de eigenschappen van de componenten goed zijn en dat de bestanden en configuraties waarnaar wordt verwezen toegankelijk zijn. De pagina wordt vervolgens opnieuw gerenderd, waardoor de componenten worden verbroken. de respectievelijke componentcode op de pagina kan niet opnieuw worden weergegeven vanwege de alleen-lezen toegang van de gebruiker.

Om dit probleem te voorkomen, moet u ervoor zorgen dat AEM Sites-gebruikers de benodigde machtigingen hebben om toegang te krijgen tot de middelen.

OPMERKING

Wanneer u de Dynamic Media-component toevoegt en Dynamic Media Settings leeg is of wanneer u een element niet correct kunt toevoegen, controleert u het volgende:

  • U hebt ingeschakelde Dynamic Media. Dynamic Media is standaard uitgeschakeld.
  • De afbeelding heeft een piramideTIFF-bestand. Afbeeldingen die zijn geïmporteerd voordat dynamische media is ingeschakeld, hebben geen TIFF-bestand met piramide.

Wanneer u met afbeeldingen werkt

Met de Dynamic Media-component kunt u dynamische afbeeldingen toevoegen, zoals afbeeldingssets, centrifuges en gemengde mediasets. U kunt inzoomen, uitzoomen en, indien van toepassing, een afbeelding binnen een centrifugeset draaien of een afbeelding van een ander type set selecteren.

U kunt de viewervoorinstelling, afbeeldingsvoorinstelling of afbeeldingsindeling ook rechtstreeks in de component configureren. Als u een afbeelding responsief wilt maken, kunt u de onderbrekingspunten instellen of een responsieve voorinstelling voor de afbeelding toepassen.

U moet de volgende Dynamic Media-instellingen bewerken door op het pictogram Edit in de component te klikken en vervolgens Dynamic Media Settings.

dm-settings-image-preset

OPMERKING

Standaard is de afbeeldingscomponent voor dynamische media adaptief. Als u van het een vaste grootte wilt maken, plaats het in de component op het Advanced lusje met Width en Height montages.

  • Viewer preset
    Selecteer een bestaande viewervoorinstelling in het keuzemenu. Als de viewervoorinstelling die u zoekt niet zichtbaar is, moet u deze mogelijk zichtbaar maken. Zie Viewer-voorinstellingen beheren. U kunt geen viewervoorinstelling selecteren als u een voorinstelling voor afbeeldingen gebruikt en andersom.
    Dit is de enige beschikbare optie als u beeldreeksen, spin reeksen, of gemengde media reeksen bekijkt. De weergegeven viewervoorinstellingen zijn ook slim. Alleen relevante viewervoorinstellingen worden weergegeven.

  • Viewer modifiers
    Viewer-modifiers hebben de vorm van name=value pair met een &-scheidingsteken en laten u viewers wijzigen zoals wordt beschreven in de Viewer Reference Guide. Een voorbeeld van een viewermodifier is posterimage=img.jpg&caption=text.vtt,1, die een andere afbeelding instelt voor de videominiatuur en een bestand met een gesloten bijschrift/subtitel koppelt aan de video.

  • Image preset
    Selecteer een bestaande voorinstelling voor afbeeldingen in het keuzemenu. Als de voorinstelling die u zoekt niet zichtbaar is, moet u deze mogelijk zichtbaar maken. Zie Voorinstellingen afbeelding beheren. U kunt geen viewervoorinstelling selecteren als u een voorinstelling voor afbeeldingen gebruikt en andersom.
    Deze optie is niet beschikbaar als u afbeeldingssets, centrifuges of gemengde mediasets bekijkt.

  • Image Modifiers
    U kunt afbeeldingseffecten toepassen door extra opdrachten voor afbeeldingen te geven. Deze worden beschreven in Voorinstellingen afbeelding en de verwijzing Opdracht Beeldserver.
    Deze optie is niet beschikbaar als u afbeeldingssets, centrifuges of gemengde mediasets bekijkt.

  • Breakpoints
    Als u dit middel op een ontvankelijke plaats gebruikt, moet u de beeldbreekpunten toevoegen. Afbeeldingsonderbrekingspunten moeten door komma's (,) worden gescheiden. Deze optie werkt wanneer er geen hoogte of breedte is gedefinieerd in een voorinstelling voor afbeeldingen.
    Deze optie is niet beschikbaar als u afbeeldingssets, centrifuges of gemengde mediasets bekijkt.
    U kunt de volgende Geavanceerde Montages uitgeven door Edit in de component te klikken.

  • Title
    Wijzig de titel van de afbeelding.

  • Alt Text
    Voeg een titel toe aan de afbeelding voor gebruikers die afbeeldingen hebben uitgeschakeld.
    Deze optie is niet beschikbaar als u afbeeldingssets, centrifuges of gemengde mediasets bekijkt.

  • URL, Open in
    U kunt een element zo instellen dat een koppeling wordt geopend. Stel de URL in en kies Openen in om aan te geven of deze in hetzelfde venster of in een nieuw venster moet worden geopend.
    Deze optie is niet beschikbaar als u afbeeldingssets, centrifuges of gemengde mediasets bekijkt.

  • Width en Height
    Voer een waarde in pixels in als u wilt dat de afbeelding een vaste grootte heeft. Als u deze waarden niet invult, wordt het element adaptief.

Wanneer u werkt met video

Met de Dynamic Media-component kunt u dynamische video toevoegen aan uw webpagina's. Wanneer u de component bewerkt, kunt u een vooraf gedefinieerde videoviewer gebruiken om de video op de pagina af te spelen.

chlimage_1-541

U moet de volgende Dynamic Media-instellingen bewerken door in de component op Edit te klikken.

OPMERKING

De Dynamic Media-videocomponent is standaard adaptief. Als u van het een vaste grootte wilt maken, plaats het in de component met Width en Height in Advanced tabel.

  • Viewer preset
    Selecteer een bestaande voorinstelling voor een videoviewer in het keuzemenu. Als de viewervoorinstelling die u zoekt niet zichtbaar is, moet u deze mogelijk zichtbaar maken. Zie Viewer-voorinstellingen beheren.

  • Viewer modifiers
    Viewer-modifiers hebben de vorm van name=value pair met een &-scheidingsteken en laten u viewers wijzigen zoals beschreven in de Adobe Viewers Reference Guide. Een voorbeeld van een viewermodifier is posterimage=img.jpg&caption=text.vtt,1

    Met viewermodifiers kunt u bijvoorbeeld het volgende doen:

    • Een bijschriftbestand koppelen aan een video bijschrift.
    • Koppel een navigatiebestand aan een video navigatie.

U kunt de volgende Advanced Settings uitgeven door Edit in de component te klikken.

  • Title
    Wijzig de titel van de video.

  • Width en Height
    Voer een waarde in pixels in als u wilt dat de video een vaste grootte heeft. Als u deze waarden niet invult, wordt het adaptief.

Wanneer u werkt met Slim uitsnijden

Met de Dynamic Media-component kunt u SmartCrop-afbeeldingselementen toevoegen aan uw webpagina's. Wanneer u de component bewerkt, kunt u een vooraf gedefinieerde videoviewer gebruiken om de video op de pagina af te spelen.

Zie ook Afbeeldingsprofielen.

dm-settings-smart-crop

U kunt de volgende Dynamic Media Settings uitgeven door Edit in de component te klikken.

OPMERKING

Standaard is de afbeeldingscomponent voor dynamische media adaptief. Als u een vaste grootte wilt instellen, stelt u dit in de component op het tabblad Advanced met Width en Height in.

  • Image Modifiers
    U kunt afbeeldingseffecten toepassen door extra opdrachten voor afbeeldingen te geven. Deze worden beschreven in Voorinstellingen afbeelding en de verwijzing Opdracht Beeldserver.
    Deze optie is niet beschikbaar als u afbeeldingssets, centrifuges of gemengde mediasets bekijkt.

U kunt de volgende Advanced montages uitgeven door Edit in de component te klikken.

  • Title
    Wijzig de titel van de afbeelding voor slim uitsnijden.

  • Alt Text
    Voeg een titel toe aan de slimme-uitsnijdafbeelding voor gebruikers die afbeeldingen hebben uitgeschakeld.
    Deze optie is niet beschikbaar als u afbeeldingssets, centrifuges of gemengde mediasets bekijkt.

  • URL, Open in
    U kunt een element zo instellen dat een koppeling wordt geopend. Stel de URL in en kies Openen in om aan te geven of deze in hetzelfde venster of in een nieuw venster moet worden geopend.
    Deze optie is niet beschikbaar als u afbeeldingssets, centrifuges of gemengde mediasets bekijkt.

  • Height en Width
    Voer een waarde in pixels in als u wilt dat de slimme uitsnijdafbeelding een vaste grootte heeft. Als u deze waarden niet invult, wordt het adaptief.

Interactieve mediacomponent

De interactieve component van Media is voor die activa die interactiviteit op hen zoals hotspots of beeldkaarten hebben. Als u een interactieve afbeelding, interactieve video of carrouselbanner hebt, gebruikt u de component Interactieve media.

De component Interactieve media is slim. Afhankelijk van het feit of u een afbeelding of video toevoegt, hebt u verschillende opties. Bovendien reageert de viewer snel - de grootte van het scherm verandert automatisch op basis van de schermgrootte. Alle viewers zijn HTML5-viewers.

OPMERKING

Als er een Dynamic Media-component, een interactieve mediacomponent of beide aanwezig zijn op een webpagina die wordt geopend door een gebruiker met de machtiging Alleen-lezen, worden de pagina-einden en de componenten niet correct weergegeven. De reden hiervoor is dat de pagina opnieuw wordt samengesteld om ervoor te zorgen dat de eigenschappen van de componenten goed zijn en dat de bestanden en configuraties waarnaar wordt verwezen toegankelijk zijn. De pagina wordt vervolgens opnieuw gerenderd, waardoor de componenten worden verbroken. de respectievelijke componentcode op de pagina kan niet opnieuw worden weergegeven vanwege de alleen-lezen toegang van de gebruiker.

Om dit probleem te voorkomen, moet u ervoor zorgen dat AEM Sites-gebruikers de benodigde machtigingen hebben om toegang te krijgen tot de middelen.

chlimage_1-541

U kunt de volgende General montages uitgeven door Edit in de component te klikken.

  • Viewer preset
    Selecteer een bestaande viewervoorinstelling in het keuzemenu. Als de viewervoorinstelling die u zoekt niet zichtbaar is, moet u deze mogelijk zichtbaar maken. Voorinstellingen voor viewers moeten worden gepubliceerd voordat ze kunnen worden gebruikt. Zie Viewer-voorinstellingen beheren.

  • Title
    Wijzig de titel van de video.

  • Width en Height
    Voer een waarde in pixels in als u wilt dat de video een vaste grootte heeft. Als u deze waarden niet invult, wordt het adaptief.

U kunt de volgende Add To Cart montages uitgeven door Edit in de component te klikken.

  • Show Product Asset
    Deze waarde is standaard geselecteerd. Het productelement toont een afbeelding van het product zoals gedefinieerd in de module Handel. Schakel het vinkje uit om het productelement niet weer te geven.

  • Show Product Price
    Deze waarde is standaard geselecteerd. De prijs van het product is de prijs van het object zoals gedefinieerd in de module Handel. Schakel het vinkje uit om de productprijs niet weer te geven.

  • Show Product Form
    Deze waarde is standaard niet geselecteerd. Het productformulier bevat alle productvarianten zoals grootte en kleur. Schakel het vinkje uit om de productvarianten niet weer te geven.

Panoramische mediacomponent

Panoramische media-component is bedoeld voor die elementen die bolvormige panoramische afbeeldingen zijn. Dergelijke afbeeldingen bieden een kijkervaring van 360° voor een ruimte, eigenschap, locatie of landschap. Een afbeelding kan alleen als bolvormig panorama worden beschouwd als de afbeelding een van de volgende opties of beide heeft:

  • Een hoogte-breedteverhouding van 2:1.
  • Gelabeld met de trefwoorden "equirechthoekig" of ("bolvormig" + "panorama") of ("bolvormig" + "panoramisch"). Zie Tags gebruiken.

Zowel zijn de aspectverhouding als de sleutelwoordcriteria van toepassing op panoramische activa voor de de detailpagina van activa en de component van "Panoramische Media" WCM.

panoramisch-media-viewer-voorinstelling

U kunt de volgende instelling bewerken door te tikken op Configure in de component.

  • Viewer Preset
    Selecteer een bestaande viewer in het vervolgkeuzemenu met voorinstellingen voor viewer.

Als de viewervoorinstelling die u zoekt niet zichtbaar is, controleert u of deze is gepubliceerd. U moet viewervoorinstellingen publiceren voordat u deze kunt gebruiken. Zie Viewer-voorinstellingen beheren.

HTTP/2 gebruiken om Dynamic Media-elementen te leveren

HTTP/2 is het nieuwe, bijgewerkte webprotocol dat de manier verbetert waarop browsers en servers communiceren. Het zorgt voor een snellere overdracht van informatie en vermindert de hoeveelheid verwerkingskracht die nodig is. De levering van Dynamic Media-middelen kan nu plaatsvinden via HTTP/2, wat betere responstijd en laadtijden biedt.

Zie HTTP2 Levering van Inhoud voor volledige informatie over het gaan gebruiken van HTTP/2 met uw Dynamic Media-account.

Op deze pagina