Bildkomponent (v2)

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

Användning

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 designdialogruta. Innehållsredigeraren kan överföra eller välja resurser i konfigurera dialogruta och beskära bilden i redigeringsdialogruta. För enkelhetens skull finns även en enkel ändring på plats av bilden.

Version och kompatibilitet

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

Responsiva funktioner

Image Component har robusta responsiva funktioner som är klara direkt vid leverans. På sidmallsnivå visas designdialogruta kan användas för att definiera bildresursens standardbredder. 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äser Image Component in rätt bildstorlek dynamiskt i farten. 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.

Dynamic Media Support

Bildkomponenten (från och med version 2.13.0) har stöd för Dynamic Media resurser. När det är aktiverat Med de här funktionerna kan du lägga till Dynamic Media bildresurser med en enkel dra och släpp-funktion 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

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

Av säkerhetsskäl anropas aldrig SVG direkt av bildredigeraren. Den kallas för <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

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

Teknisk information

Den senaste tekniska dokumentationen om Image Component finns på GitHub.

Mer information om hur du utvecklar kärnkomponenter finns i Dokumentation för grundkomponentutvecklare.

Bildkomponenten har stöd för schema.org, mikrodata.

Konfigurera dialogruta

Förutom standarden redigeringsdialogruta och designdialogrutainnehåller bildkomponenten en konfigurationsdialogruta där själva bilden definieras tillsammans med beskrivning och grundläggande egenskaper.

Fliken Resurser

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

Fliken Metadata

• 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 Funktioner i Dynamic Media är aktiverade.
  • Bildförinställning - När Förinställningstyp av Bildförinställning är markerat, listrutan Bildförinställning är tillgängligt och du kan välja bland de tillgängliga förinställningarna för Dynamic Media. Detta är bara tillgängligt om förinställningar har definierats för den valda resursen.
  • Smart beskärning - När Förinställningstyp av Smart beskärning är markerat i listrutan Återgivning är tillgängligt och du kan välja bland de tillgängliga återgivningarna av den valda resursen. Detta är bara tillgängligt om återgivningar har definierats för den valda resursen.
  • Bildmodifierare - Ytterligare kommandon för att visa bilder i Dynamic Media kan definieras här avgränsade med &oavsett vilka Förinställningstyp är markerat.
• Bilden är dekorativ - Kontrollera om bilden ska ignoreras av hjälpmedel och därför inte kräver någon alternativ text. Detta gäller endast dekorativa bilder.
• Alternativ text - Textuellt alternativ till bildens innebörd eller funktion, för läsare med nedsatt syn.
  • Hämta alternativ text från DAM - När det här alternativet är markerat 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 beskrivning från DAM - När det här alternativet är markerat fylls bildtexten i med värdet för dc:title metadata i DAM.
  • Visa bildtext som popup-fönster - När det här alternativet är markerat visas inte bildtexten nedanför 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 Datalager.
  • 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.

Dialogrutan Redigera

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

• Starta beskärning

  

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

  • Välj alternativ Free Hand för att definiera din egen beskärning.
  • Välj alternativ Ta bort beskärning för att 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.

  

• Rotera åt höger

  

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

• Vänd 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

  

  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

  

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

• Öppna zoomreglaget

  

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

  

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.

Designdialogruta

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

På Huvud kan du definiera en lista med bredder i pixlar för bilden så läser komponenten automatiskt in den mest lämpliga bredden baserat på webbläsarens storlek. Detta är en viktig del av responsiva funktioner för bildkomponenten.

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

• Aktivera DM-funktioner - När det här alternativet är markerat aktiveras Funktioner i Dynamic Media är tillgängliga.
• Aktivera webboptimerade bilder - När det här alternativet är markerat visas webboptimerad tjänst för bildleverans kommer att leverera bilder i WebP-format, vilket i genomsnitt minskar bildstorlekarna med 25 %.
  • Det här alternativet är endast tillgängligt i AEMaaCS.
  • När alternativet är avmarkerat eller webboptimerad bildleveranstjänst inte är tillgänglig visas Adaptiv bildserver används.
• Aktivera lazy loading - Definiera om det lat inläsningsalternativet aktiveras automatiskt när du lägger till bildkomponenten på en sida.
• Bilden är dekorativ - Ange om alternativet för dekorativa bilder ska aktiveras automatiskt när du lägger till bildkomponenten på en sida.
• Hämta alternativ text från DAM- Ange om alternativet att hämta alternativ text från DAM automatiskt ska 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-modulen ska aktiveras automatiskt när bildkomponenten läggs till på en sida.
• Visa bildtext som popup-fönster - Ange om alternativet att visa bildtexten som en popup-ruta 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.
• Bredd - 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å Lägg till om du vill lägga till en annan storlek.
    • Använd handtagen för att ordna om storlekarna.
    • Använd Ta bort om du vill ta bort en bredd.
  • Som standard skjuts inläsningen av bilder tills de blir synliga.
    • Välj alternativet Inaktivera lazy loading för att läsa in bilderna när sidan läses in.
• JPEG-kvalitet - Kvalitetsfaktorn (i procent mellan 0 och 100) för omformade (t.ex. skalade eller beskurna) bilder i JPEG.

Fliken Funktioner

På 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.

• Källa

  

  Välj alternativet Tillåt överföring av resurser från filsystem så att skribenterna kan ladda upp bilder från sin dator. Om du bara vill tvinga innehållsförfattare att välja resurser från AEM avmarkerar du det här alternativet.

• Orientering

  

• Rotera
  Använd det här alternativet för att tillåta innehållsförfattaren att använda
  Rotera åt höger alternativ.

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

  FÖRSIKTIGHET

  The Vänd är inaktiverat som standard. Om du aktiverar det visas 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

  

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

  • Klicka Lägg till om du vill lägga till en fördefinierad beskärningsproportion.
  • Ange ett beskrivande namn som visas i Starta beskärning listruta.
  • Ange proportionerna i siffror.
  • Använd draghandtagen för att ordna om proportionerna
  • Använd papperskorgsikonen för att ta bort proportioner.
  FÖRSIKTIGHET

  Observera att beskärningsproportioner definieras som i AEM höjd/bredd. Detta skiljer sig från den vanliga definitionen av bredd/höjd och görs av kompatibilitetsskä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

Bildkomponenten stöder AEM Formatsystem.

Adobe-klientdatalager

Bildkomponenten har stöd för Adobe Client Data Layer.