Bildkomponent (v2) image-component

Core Component Image Component Component är en adaptiv bildkomponent med redigering på plats.

Användning usage

Bildkomponenten har anpassningsbar bildmarkering och responsiv funktionalitet med lat inläsningsbeteende för sidbesökaren samt enkel bildplacering och beskärning för innehållsförfattaren.

Bildbredderna, beskärningen och ytterligare inställningar kan definieras av mallskaparen i designdialogrutan. Innehållsredigeraren kan överföra eller välja resurser i dialogrutan Konfigurera och beskära bilden i dialogrutan Redigera. För enkelhetens skull finns även en enkel ändring på plats av bilden.

Version och kompatibilitet version-and-compatibility

I det här dokumentet beskrivs v2 av Image Component, som introducerades i version 2.0.0 av Core Components i januari 2018.

CAUTION
I det här dokumentet beskrivs v1 för bildkomponenten.
Mer information om den aktuella versionen av bildkomponenten finns i dokumentet Bildkomponent.

Responsiva funktioner responsive-features

Image Component har robusta responsiva funktioner som är klara direkt vid leverans. På sidmallsnivå kan du använda designdialogrutan för att definiera standardbredderna för bildresursen. Bildkomponenten läser sedan automatiskt in rätt bredd för visning beroende på storleken på webbläsarfönstret. När fönstrets storlek ändras läses bildkomponenten in dynamiskt med rätt bildstorlek. Komponentutvecklare behöver inte bekymra sig om att definiera anpassade mediefrågor eftersom Image Component redan är optimerat för att läsa in ditt innehåll.

Dessutom har Image Component stöd för lazy loading för att skjuta upp inläsningen av den faktiska bildresursen tills den syns i webbläsaren, vilket gör sidorna mer responsiva.

TIP
Image Component (Bildkomponenten) drivs av Adaptive Image Server. Se dokumentet Adaptive Image Server för mer information om hur det fungerar.

Dynamic Media Support dynamic-media

Bildkomponenten (från och med version 2.13.0) stöder Dynamic Media-resurser. När det här alternativet är aktiverat kan du användaför att lägga till Dynamic Media-bildresurser genom att dra och släppa eller via resursläsaren på samma sätt som med andra bilder. Dessutom stöds även bildmodifierare, bildförinställningar och smarta beskärningar.

Dina webbupplevelser som byggts med Core Components har inga omfattande, Sensei-baserade, robusta, högpresterande, plattformsoberoende Dynamic Media Image-funktioner.

Stöd för SVG svg-support

Skalbar vektorgrafik (SVG) stöds av bildkomponenten.

  • Både dra-och-släpp av en SVG-resurs från DAM och överföring av en SVG-filöverföring från ett lokalt filsystem stöds.
  • Den ursprungliga SVG-filen direktuppspelas (omformningar hoppas över).
  • För en SVG-bild ställs"smarta bilder" och"smarta storlekar" in på en tom array i bildmodellen.

Dokumentskydd security

Av säkerhetsskäl anropas aldrig SVG direkt av bildredigeraren. Den anropas via <img src=“path-to-component”>. Detta förhindrar webbläsaren från att köra skript som är inbäddade i filen SVG.

Exempel på komponentutdata sample-component-output

Om du vill se både Image Component (Bildkomponent) och exempel på dess konfigurationsalternativ samt HTML och JSON-utdata går du till Component Library.

Teknisk information technical-details

Den senaste tekniska dokumentationen om Image-komponenten finns på GitHub.

Mer information om hur du utvecklar kärnkomponenter finns i dokumentationen för kärnkomponentutvecklare.

Bildkomponenten stöder schema.org.

Konfigurera dialogruta configure-dialog

Förutom den vanliga redigeringsdialogrutan och designdialogrutan erbjuder bildkomponenten en konfigurationsdialogruta där själva bilden definieras tillsammans med dess beskrivning och grundläggande egenskaper.

Fliken Resurser asset-tab

Fliken Resurser i dialogrutan Konfigurera i bildkomponenten

  • Bildresurs

    • Släpp en resurs från resursläsaren eller tryck på alternativet bläddra om du vill överföra från ett lokalt filsystem.
    • Tryck eller klicka på Radera för att avmarkera den markerade bilden.
    • Tryck eller klicka på Redigera om du vill hantera återgivningarna av resursen i resursredigeraren.

Fliken Metadata metadata-tab

Fliken Metadata i dialogrutan Konfigurera för Image Component (Bildkomponent)

  • Förinställningstyp - Detta definierar de typer av bildförinställningar som är tillgängliga, antingen Bildförinställning eller Smart beskärning, och är bara tillgängligt när Dynamic Media-funktioner är aktiverade.

    • Bildförinställning - När Förinställningstyp för Bildförinställning är markerad är listrutan Bildförinställning tillgänglig, vilket gör att du kan välja bland de tillgängliga Dynamic Media-förinställningarna. Detta är bara tillgängligt om förinställningar har definierats för den valda resursen.
    • Smart beskärning - När förinställningstyp för smart beskärning har valts är listrutan Återgivning tillgänglig, vilket gör att du kan välja bland de tillgängliga återgivningarna för den valda resursen. Detta är bara tillgängligt om återgivningar har definierats för den valda resursen.
    • Bildmodifierare - Ytterligare Dynamic Media-kommandon för bildvisning kan definieras här avgränsade med &, oavsett vilken förinställningstyp som har valts.
  • Bilden är dekorativ - Kontrollera om bilden ska ignoreras av hjälpmedelstekniken och därför inte kräver någon alternativ text. Detta gäller endast dekorativa bilder.

  • Alternativ text - Textalternativ för innebörden eller funktionen i bilden för läsare med nedsatt syn.

    • Hämta alternativ text från DAM - När det här alternativet markeras fylls bildens alternativa text med värdet för dc:description-metadata i DAM.
  • Bildtext - Ytterligare information om bilden, som visas under bilden som standard.

    • Hämta bildtext från DAM - När den är markerad fylls bildtexten i med värdet för dc:title-metadata i DAM.
    • Visa bildtext som popup-fönster - Om det här alternativet är markerat visas inte bildtexten under bilden, utan som ett popup-fönster som visas av vissa webbläsare när de hovrar över bilden.
  • Länk - Länka bilden till en annan resurs.

    • Använd urvalsdialogrutan för att länka till en annan AEM.
    • Om du inte länkar till en AEM resurs anger du den absoluta URL:en. Icke-lösliga URL:er tolkas som relativa till AEM.
  • ID - Med det här alternativet kan du styra den unika identifieraren för komponenten i HTML och i datalagret.

    • Om inget anges genereras ett unikt ID automatiskt åt dig och du hittar det genom att granska den resulterande sidan.
    • Om ett ID anges är det författarens ansvar att se till att det är unikt.
    • Om du ändrar ID:t kan det påverka spårningen av CSS, JS och datalager.
TIP
Smart beskärning och Bildförinställning kan inte användas samtidigt. Om en författare behöver använda en bildförinställning tillsammans med en rendering för smart beskärning måste författaren använda bildmodifieraren för att lägga till förinställningar manuellt.

Dialogrutan Redigera edit-dialog

I redigeringsdialogrutan kan författaren beskära, ändra startkartan och zooma bilden.

NOTE
Funktionerna för beskärning, rotering och zoomning gäller inte för Dynamic Media-resurser. Om Dynamic Media-funktionerna är aktiverade bör all sådan redigering av Dynamic Media-resurser utföras via dialogrutan Konfigurera.

Redigeringsdialogrutan för bildkomponenten

  • Starta beskärning

    Ikonen Starta beskärning

    Om du väljer det här alternativet öppnas en listruta för fördefinierade beskärningsproportioner.

    • Välj alternativet Free Hand för att definiera din egen beskärning.
    • Välj alternativet Ta bort beskärning om du vill visa den ursprungliga resursen.

    När du har valt ett beskärningsalternativ använder du de blå handtagen för att ändra storlek på beskärningen i bilden.

    Beskärningsalternativ

  • Rotera åt höger

    Rotera höger ikon

    Använd det här alternativet om du vill rotera bilden 90° åt höger (medurs).

  • Vänd vågrätt

    Ikon för att vända vågrätt

    Använd det här alternativet om du vill vända bilden vågrätt eller vrida bilden 180° längs y-axeln.

  • Vänd lodrätt

    Ikonen Vänd lodrätt

    Använd det här alternativet om du vill vända bilden lodrätt eller vrida bilden 180° längs x-axeln.

  • Återställ zoomning

    Återställ zoomningsikonen

    Om bilden redan har zoomats kan du återställa zoomnivån med det här alternativet.

  • Öppna zoomreglaget

    Öppna ikonen för zoomreglaget

    Använd det här alternativet om du vill visa ett reglage för att styra bildens zoomnivå.

    Zoomreglage

Du kan även använda redigeraren på plats för att ändra bilden. På grund av utrymmesbegränsningar är endast grundläggande alternativ tillgängliga. Använd helskärmsläget för redigeringsalternativ.

Redigeringsalternativ för bilder på plats

NOTE
Bildredigeringsåtgärder (beskärning, vändning, rotering) stöds inte för bilder i GIF. Alla sådana ändringar som görs i redigeringsläget för GIF bevaras inte.

Designdialogruta design-dialog

I designdialogrutan kan mallskaparen definiera de alternativ för beskärning, uppladdning, rotation och överföring som innehållsförfattaren har när den här komponenten används.

Huvudflik main-tab

På fliken Huvudsida kan du definiera en lista med bredder i pixlar för bilden. Komponenten läses automatiskt in med den mest lämpliga bredden baserat på webbläsarens storlek. Detta är en viktig del av responsiva funktioner i Image-komponenten.

Dessutom kan du definiera vilka allmänna komponentalternativ som automatiskt eller inaktiveras när författaren lägger till komponenten på en sida.

Huvudflik i designdialogrutan för bildkomponenten

  • Aktivera DM-funktioner - När det här alternativet är markerat är Dynamic Media-funktionerna tillgängliga.

  • Aktivera webboptimerade bilder - När det här alternativet är markerat levererar den webboptimerade bildleveranstjänsten bilder i WebP-format, vilket minskar bildstorleken med i genomsnitt 25 %.

    • Det här alternativet är endast tillgängligt i AEMaaCS.
    • Om du inte markerar alternativet eller om den webboptimerade bildleveranstjänsten inte är tillgänglig används Adaptiv bildserver.
  • Aktivera lazy loading - Definiera om det lazy loading-alternativet aktiveras automatiskt när bildkomponenten läggs till på en sida.

  • Bilden är dekorativ - Definiera om alternativet för dekorativ bild automatiskt är aktiverat när du lägger till bildkomponenten på en sida.

  • Hämta alternativ text från DAM- Definiera om alternativet att hämta alternativ text från DAM automatiskt aktiveras när bildkomponenten läggs till på en sida.

  • Hämta beskrivning från DAM - Ange om alternativet att hämta bildtexten från DAM automatiskt ska aktiveras när bildkomponenten läggs till på en sida.

  • Visa bildtext som popup-fönster - Definiera om alternativet att visa bildtexten som ett popup-fönster automatiskt ska aktiveras när bildkomponenten läggs till på en sida.

  • Inaktivera UUID-spårning - Markera för att inaktivera spårning av bildresursens UUID.

  • Bredder - Definierar en lista med bredder i pixlar för bilden och komponenten läser automatiskt in den mest lämpliga bredden baserat på webbläsarens storlek.

    • Tryck eller klicka på knappen Lägg till om du vill lägga till en annan storlek.

      • Använd handtagen för att ordna om storlekarna.
      • Använd ikonen Ta bort för att ta bort en bredd.
    • Inläsningen av bilder fördröjs som standard tills de blir synliga.

      • Välj alternativet Inaktivera lazy loading om du vill läsa in bilderna vid sidinläsning.
  • JPEG-kvalitet - Kvalitetsfaktorn (i procent från 0 och 100) för omformade (t.ex. skalade eller beskurna) JPEG-bilder.

TIP
I dokumentet Adaptiv bildserver finns tips om hur du kan optimera markeringen av återgivning genom att definiera dina bredder noggrant.

Fliken Funktioner features-tab

På fliken Funktioner kan du definiera vilka alternativ som är tillgängliga för innehållsförfattarna när de använder komponenten, inklusive överföringsalternativ, orientering och beskärningsalternativ.

  • Source

    Fliken Funktioner i designdialogrutan för bildkomponenten

    Välj alternativet Tillåt överföring av resurser från filsystemet om du vill tillåta innehållsförfattare att överföra bilder från sin lokala dator. Om du bara vill tvinga innehållsförfattare att välja resurser från AEM avmarkerar du det här alternativet.

  • Orientering

    Fliken Funktioner i designdialogrutan för bildkomponenten

  • Rotera
    Använd det här alternativet om du vill tillåta innehållsförfattaren att använda alternativet Rotera höger .

  • Vänd
    Använd det här alternativet om du vill tillåta innehållsförfattaren att använda alternativen Vänd vågrätt och Vänd lodrätt .

    note caution
    CAUTION
    Alternativet Vänd är inaktiverat som standard. Om du aktiverar det visas knapparna Vänd lodrätt och Vänd vågrätt i redigeringsdialogrutan för bildkomponenten, men funktionen stöds för närvarande inte av AEM och ändringar som görs med dessa alternativ bevaras inte.
  • Beskärning

    Fliken Funktioner i designdialogrutan för bildkomponenten

    Välj alternativet Tillåt beskärning så att innehållsförfattaren kan beskära bilden i komponenten i redigeringsdialogrutan.

    • Klicka på Lägg till om du vill lägga till en fördefinierad beskärningsproportion.
    • Ange ett beskrivande namn som visas i listrutan Starta beskärning.
    • Ange de numeriska proportionerna för proportionerna.
    • Använd draghandtagen för att ändra ordningen på proportionerna
    • Använd papperskorgsikonen för att ta bort proportioner.
    note caution
    CAUTION
    Observera att beskärningsproportionerna definieras som höjd/bredd i AEM. Detta skiljer sig från den vanliga definitionen av bredd/höjd och görs av bakåtkompatibilitetsskäl. Innehållsförfattarna är inte medvetna om några skillnader så länge du anger ett tydligt namn på förhållandet eftersom namnet visas i gränssnittet och inte själva förhållandet.

Fliken Format styles-tab-1

Bildkomponenten stöder AEM Style System.

Adobe-klientdatalager data-layer

Bildkomponenten stöder datalagret Adobe Client.

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c