Lägga till Dynamic Media Assets på sidor

Om du vill lägga till funktionen för dynamiska medier i resurser som du använder på dina webbplatser kan du lägga till Dynamic Media eller Interaktiva media direkt på sidan. Det gör du genom att öppna layoutläget och aktivera de dynamiska mediekomponenterna. Sedan kan du lägga till komponenterna på sidan och lägga till resurser i komponenterna. Komponenterna för dynamiska media och interaktiva media är smarta - de vet om du lägger till en bild eller en video och de tillgängliga alternativen ändras i enlighet med detta.

Du lägger till dynamiska medieresurser direkt på sidan om du använder AEM som WCM-fil. Om ni använder en annan leverantör för innehållshanteringssystemet kan ni antingen länka eller bädda in resurserna. Om du har en responsiv webbplats hos en extern leverantör läser du Leverera optimerade bilder till en responsiv webbplats.

OBSERVERA

Du måste publicera resurser innan du lägger till dem på sidor i AEM. Se Publicera Dynamic Media Assets.

Lägga till en Dynamic Media-komponent på en sida

Att lägga till en Dynamic Media-komponent på en sida är detsamma som att lägga till en komponent på en sida. Dynamic Media-komponenterna beskrivs i detalj i följande avsnitt.

OBSERVERA

Om det finns en Dynamic Media-komponent på en webbsida som en användare med skrivskyddad behörighet kommer åt, bryts sidan och komponenterna återges inte korrekt. Orsaken är att sidan har rekonstruerats för att komponenterna ska bli bra och att alla refererade resurser och konfigurationer är tillgängliga. Sidan återges sedan igen så att komponenterna bryts. respektive komponentkod på sidan kan inte återges på nytt på grund av användarens skrivskyddade åtkomst.

För att undvika det här problemet måste AEM Sites-användare ha de behörigheter som krävs för att få åtkomst till resurserna.

  1. Öppna AEM sidan där du vill lägga till Dynamic Media-komponenten.

  2. Klicka på panelen till vänster på sidan (du kan behöva växla visningen av sidopanelen) Components ikon.

  3. Under Components rubrik, i listrutan, välja Dynamic Media. Om det inte finns någon lista över Dynamic Media-komponenter behöver du troligen aktivera de Dynamic Media-komponenter som du vill använda. Se Aktivera Dynamic Media-komponenter.

    chlimage_1-537

  4. Dra en Dynamic Media-komponent som du vill använda till önskad plats på sidan.

  5. Håll muspekaren direkt på komponenten. När komponenten är omgiven av en blå ruta trycker du en gång för att visa komponentens verktygsfält. Tryck på Configuration (skiftnyckel) ikon.

  6. Redigera komponenterna vid behov och klicka på bockmarkeringen för att spara ändringarna.

Aktivera Dynamic Media-komponenter

Om det inte finns några Dynamic Media-komponenter att lägga till på en sida betyder det troligtvis att du först måste aktivera de komponenter som du vill använda.

  1. Öppna AEM sidan där du vill lägga till Dynamic Media-komponenten.

  2. Till vänster i verktygsfältet uppe på sidan trycker du på ikonen Sidinformation och sedan på Edit Template i listrutan.

    edit-template

  3. Tryck på i listrutan till höger om verktygsfältet uppe på sidan. Structure.

    Policy

  4. I närheten av sidans nederkant trycker du på Layout Container för att öppna verktygsfältet och sedan trycka på ikonen Policy.

  5. Layout Container sida, under Properties rubrik, kontrollera att Allowed Components -fliken är markerad.

    Tillåtna komponenter

  6. Rulla tills du ser Dynamic Media.

  7. Tryck på ikonen > till vänster om Dynamic Media Om du vill expandera listan markerar du de Dynamic Media-komponenter som du vill aktivera.

    Lista över komponenter i Dynamic Media

  8. Nära det övre högra hörnet av Layout Container trycker du på ikonen Klar (bockmarkering).

  9. Tryck på i listrutan till höger om verktygsfältet uppe på sidan. Initial Content sedan lägga till en Dynamic Media-komponent på en sida som vanligt.

Lokalisera Dynamic Media-komponenter

Du kan lokalisera Dynamic Media-komponenter på ett av två sätt:

  • Från en webbsida i Sites öppnar du Properties och väljer fliken Advanced. Välj språk för lokalisering.

    chlimage_1-538

  • Välj önskad sida eller sidgrupp i platsväljaren. Tryck Properties och väljer Advanced -fliken. Välj språk för lokalisering.

    OBSERVERA

    Observera att inte alla språk som är tillgängliga i Language menyn har för närvarande tilldelats variabler.

Dynamic Media-komponenter

Dynamic Media och Interactive Media finns i Dynamic Media tabba in Components. Du använder Interactive Media -komponent för alla interaktiva resurser som interaktiv video, interaktiva bilder eller karuselluppsättningar. Använd Dynamic Media-komponenten för alla andra dynamiska mediekomponenter.

OBSERVERA

De här komponenterna är inte tillgängliga som standard och måste göras tillgängliga via mallredigeraren innan du använder dem. När de är tillgängliga i mallredigeraren kan du lägga till komponenterna på sidan på samma sätt som andra AEM.

chlimage_1-539

Dynamic Media-komponent

Dynamic Media-komponenten är smart - beroende på om du lägger till en bild eller en video finns det olika alternativ. Komponenten har stöd för bildförinställningar, bildbaserade visningsprogram som bilduppsättningar, snurra, blandade medieuppsättningar och video. Dessutom är visningsprogrammet responsivt. Skärmstorleken ändras alltså automatiskt baserat på skärmstorleken. Alla visningsprogram är HTML5-visningsprogram.

OBSERVERA

Om det finns en Dynamic Media-komponent, en Interactive Media-komponent eller båda på en webbsida som en användare med skrivskyddad behörighet har åtkomst till, bryts sidan och komponenterna återges inte korrekt. Orsaken är att sidan har rekonstruerats för att komponenterna ska bli bra och att alla refererade resurser och konfigurationer är tillgängliga. Sidan återges sedan igen så att komponenterna bryts. respektive komponentkod på sidan kan inte återges på nytt på grund av användarens skrivskyddade åtkomst.

För att undvika det här problemet måste AEM Sites-användare ha de behörigheter som krävs för att få åtkomst till resurserna.

OBSERVERA

När du lägger till Dynamic Media-komponenten och Dynamic Media Settings är tom eller du inte kan lägga till en resurs på rätt sätt, kontrollera följande:

  • Du har aktiverad Dynamic Media. Dynamic Media är inaktiverat som standard.
  • Bilden har en pyramidformad fil. Bilder som importerats innan dynamiska medier har aktiverats har ingen pyramiddiff-fil.

När du arbetar med bilder

Med Dynamic Media-komponenten kan du lägga till dynamiska bilder, inklusive bilduppsättningar, snurremsor och blandade medieuppsättningar. Du kan zooma in, zooma ut och, om tillämpligt, vrida en bild i en snurra eller välja en bild från en annan typ av uppsättning.

Du kan också konfigurera visningsförinställningen, bildförinställningen eller bildformatet direkt i komponenten. Om du vill göra en bild responsiv kan du antingen ange brytpunkter eller använda en responsiv bildförinställning.

Du måste redigera följande Dynamic Media-inställningar genom att klicka på Edit -ikonen i komponenten och sedan Dynamic Media Settings.

dm-settings-image-preset

OBSERVERA

Som standard är Dynamic Media-bildkomponenten adaptiv. Om du vill göra den till en fast storlek anger du den i komponenten i Advanced med Width och Height inställningar.

  • Viewer preset
    Välj en befintlig visningsförinställning i listrutan. Om den visningsförinställning som du söker efter inte visas kanske du måste göra den synlig. Se Hantera förinställningar för visningsprogram. Du kan inte välja en visningsförinställning om du använder en bildförinställning och vice versa.
    Det här är det enda tillgängliga alternativet om du visar bilduppsättningar, snurruppsättningar eller blandade medieuppsättningar. De visningsförinställningar som visas är också smarta - endast relevanta visningsprogramförinställningar visas.

  • Viewer modifiers
    Visningsmodifierare har formen av namn=värde-par med en &-avgränsare och du kan ändra visningsprogram enligt riktlinjerna i referenshandboken för visningsprogram. Ett exempel på en visningsmodifierare är posterimage=img.jpg&caption=text.vtt,1 som ställer in en annan bild för videominiatyrbilden och associerar en undertextfil med videon.

  • Image preset
    Välj en befintlig bildförinställning i listrutan. Om den bildförinställning du söker inte syns kan du behöva göra den synlig. Se Hantera bildförinställningar. Du kan inte välja en visningsförinställning om du använder en bildförinställning och vice versa.
    Det här alternativet är inte tillgängligt om du visar bilduppsättningar, snurruppsättningar eller blandade medieuppsättningar.

  • Image Modifiers
    Du kan använda bildeffekter genom att ange ytterligare bildkommandon. Dessa beskrivs i Bildförinställningar och i Referens för bildserverkommando.
    Det här alternativet är inte tillgängligt om du visar bilduppsättningar, snurruppsättningar eller blandade medieuppsättningar.

  • Breakpoints
    Om du använder resursen på en responsiv webbplats måste du lägga till bildbrytpunkterna. Bildbrytpunkter måste avgränsas med kommatecken (,). Det här alternativet fungerar när ingen höjd eller bredd har definierats i en bildförinställning.
    Det här alternativet är inte tillgängligt om du visar bilduppsättningar, snurruppsättningar eller blandade medieuppsättningar.
    Du kan redigera följande avancerade inställningar genom att klicka på Edit i komponenten.

  • Title
    Ändra bildens titel.

  • Alt Text
    Lägg till en titel i bilden för de användare som har inaktiverat grafik.
    Det här alternativet är inte tillgängligt om du visar bilduppsättningar, snurruppsättningar eller blandade medieuppsättningar.

  • URL, Open in
    Du kan ställa in en resurs för att öppna en länk. Ange URL:en och Öppna i anger om du vill att den ska öppnas i samma fönster eller i ett nytt fönster.
    Det här alternativet är inte tillgängligt om du visar bilduppsättningar, snurruppsättningar eller blandade medieuppsättningar.

  • Width och Height
    Ange värdet i pixlar om du vill att bilden ska ha en fast storlek. Om du lämnar dessa värden tomma anpassas resursen.

När du arbetar med video

Använd Dynamic Media-komponenten för att lägga till dynamisk video på dina webbsidor. När du redigerar komponenten kan du välja att använda en fördefinierad videovisningsförinställning för att spela upp videon på sidan.

chlimage_1-540

Du måste redigera följande Dynamic Media-inställningar genom att klicka på Edit i komponenten.

OBSERVERA

Som standard är videokomponenten i Dynamic Media adaptiv. Om du vill göra den till en fast storlek anger du den i komponenten med Width och Height i Advanced -fliken.

  • Viewer preset
    Välj en befintlig förinställning för visningsprogrammet för video i listrutan. Om den visningsförinställning som du söker efter inte visas kanske du måste göra den synlig. Se Hantera förinställningar för visningsprogram.

  • Viewer modifiers
    Visningsmodifierare har formen av namn=värde-par med en &-avgränsare och du kan ändra visningsprogram enligt riktlinjerna i referenshandboken för Adobe-visningsprogram. Ett exempel på en visningsmodifierare är posterimage=img.jpg&caption=text.vtt,1

    Med visningsmodifierare kan du till exempel göra följande:

    • Associera en bildtextfil med en video bildtext.
    • Associera en navigeringsfil med en video navigering.

Du kan redigera följande Advanced Settings genom att klicka Edit i komponenten.

  • Title
    Ändra videons titel.

  • Width och Height
    Ange värdet i pixlar om du vill att videon ska ha en fast storlek. Om du lämnar dessa värden tomma blir de anpassningsbara.

När du arbetar med smart beskärning

Använd Dynamic Media-komponenten för att lägga till bildresurser för Smart beskärning på dina webbsidor. När du redigerar komponenten kan du välja att använda en fördefinierad videovisningsförinställning för att spela upp videon på sidan.

Se även Bildprofiler.

dm-settings-smart-crop

Du kan redigera följande Dynamic Media Settings genom att klicka Edit i komponenten.

OBSERVERA

Som standard är Dynamic Media-bildkomponenten adaptiv. Om du vill att den ska ha en fast storlek anger du det i komponenten på fliken Advanced med Width och Height.

  • Image Modifiers
    Du kan använda bildeffekter genom att ange ytterligare bildkommandon. Dessa beskrivs i Bildförinställningar och i Referens för bildserverkommando.
    Det här alternativet är inte tillgängligt om du visar bilduppsättningar, snurruppsättningar eller blandade medieuppsättningar.

Du kan redigera följande Advanced inställningar genom att klicka på Edit i komponenten.

  • Title
    Ändra titeln på bilden för smart beskärning.

  • Alt Text
    Lägg till en titel i den smarta beskärningsbilden för de användare som har inaktiverat grafik.
    Det här alternativet är inte tillgängligt om du visar bilduppsättningar, snurruppsättningar eller blandade medieuppsättningar.

  • URL, Open in
    Du kan ställa in en resurs för att öppna en länk. Ange URL:en och Öppna i anger om du vill att den ska öppnas i samma fönster eller i ett nytt fönster.
    Det här alternativet är inte tillgängligt om du visar bilduppsättningar, snurruppsättningar eller blandade medieuppsättningar.

  • Height och Width
    Ange värdet i pixlar om du vill att den smarta beskärningsbilden ska ha en fast storlek. Om du lämnar dessa värden tomma blir de anpassningsbara.

Interaktiv mediekomponent

Komponenten Interactive Media är till för de resurser som har interaktivitet i dem, till exempel hotspot-områden eller bildscheman. Om du har en interaktiv bild, interaktiv video eller karusellbanderoll använder du komponenten Interactive Media.

Komponenten Interactive Media är smart - beroende på om du lägger till en bild eller en video finns det olika alternativ. Dessutom är visningsprogrammet responsivt - skärmstorleken ändras automatiskt baserat på skärmstorleken. Alla visningsprogram är HTML5-visningsprogram.

OBSERVERA

Om det finns en Dynamic Media-komponent, en Interactive Media-komponent eller båda på en webbsida som en användare med skrivskyddad behörighet har åtkomst till, bryts sidan och komponenterna återges inte korrekt. Orsaken är att sidan har rekonstruerats för att komponenterna ska bli bra och att alla refererade resurser och konfigurationer är tillgängliga. Sidan återges sedan igen så att komponenterna bryts. respektive komponentkod på sidan kan inte återges på nytt på grund av användarens skrivskyddade åtkomst.

För att undvika det här problemet måste AEM Sites-användare ha de behörigheter som krävs för att få åtkomst till resurserna.

chlimage_1-541

Du kan redigera följande General inställningar genom att klicka på Edit i komponenten.

  • Viewer preset
    Välj en befintlig visningsförinställning i listrutan. Om den visningsförinställning som du söker efter inte visas kanske du måste göra den synlig. Förinställningar för visningsprogram måste publiceras innan de kan användas. Se Hantera förinställningar för visningsprogram.

  • Title
    Ändra videons titel.

  • Width och Height
    Ange värdet i pixlar om du vill att videon ska ha en fast storlek. Om du lämnar dessa värden tomma blir de anpassningsbara.

Du kan redigera följande Add To Cart inställningar genom att klicka på Edit i komponenten.

  • Show Product Asset
    Som standard är det här värdet markerat. Produktresursen visar en bild av produkten enligt definitionen i modulen Handel. Avmarkera kryssrutan om du inte vill visa produktresursen.

  • Show Product Price
    Som standard är det här värdet markerat. Produktpriset visar priset för artikeln enligt definitionen i modulen Handel. Avmarkera kryssrutan om du inte vill visa produktpriset.

  • Show Product Form
    Som standard är det här värdet inte markerat. Produktformuläret innehåller alla produktvarianter som storlek och färg. Avmarkera kryssrutan om du inte vill visa produktvarianterna.

Panoramakomponenten Media

Komponenten för panoramamedia är avsedd för resurser som är sfäriska panoramabilder. Sådana bilder ger en 360-gradig visningsupplevelse av ett rum, en egenskap, en plats eller ett landskap. För att en bild ska kvalificeras som ett sfäriskt panorama måste den ha antingen ett ELLER båda av följande:

  • Proportionerna 2:1.
  • Taggad med nyckelorden "ekvirektangulär" eller ("sfärisk" + "panorama") eller ("sfärisk" + "panoramabild"). Se Använda taggar.

Både proportioner och nyckelordskriterier gäller för panoramaresurser för sidan med resursinformation och WCM-komponenten "Panoramic Media".

panoramabild-media-viewer-preset

Du kan redigera följande inställning genom att trycka på Configure i komponenten.

  • Viewer Preset
    Välj ett befintligt visningsprogram på den nedrullningsbara menyn Visningsförinställning.

Om den visningsförinställning du söker efter inte visas kontrollerar du att den är publicerad. Du måste publicera förinställningarna för visningsprogrammet innan du kan använda dem. Se Hantera visningsförinställningar.

Använda HTTP/2 för att leverera Dynamic Media-material

HTTP/2 är det nya, uppdaterade webbprotokollet som förbättrar kommunikationen mellan webbläsare och servrar. Det ger snabbare överföring av information och minskar mängden processorkraft som behövs. Dynamic Media-material kan nu levereras via HTTP/2 vilket ger bättre respons och laddningstider.

Se HTTP2-leverans av innehåll om du vill ha fullständig information om hur du kommer igång med HTTP/2 med ditt Dynamic Media-konto.

På denna sida