Bildkomponent image-component
Komponenten Core Component Image är en adaptiv bildkomponent.
Användning usage
Bildkomponenten har adaptiv bildmarkering och responsivt beteende med lat inläsningsalternativ för sidbesökaren och enkel bildplacering för innehållsförfattaren.
Innehållsförfattaren kan använda dialogrutan Redigera för att redigera bildresursen, till exempel tillämpa en beskärning eller rotera bilden.
Bildbredderna och ytterligare inställningar kan definieras av mallskaparen i designdialogrutan. Innehållsredigeraren kan överföra eller välja resurser i dialogrutan Konfigurera.
Version och kompatibilitet version-and-compatibility
Den aktuella versionen av Image Component är v3, som introducerades i version 2.18.0 av Core Components i februari 2022, och som beskrivs i det här dokumentet.
Följande tabell visar alla versioner av komponenten som stöds, de AEM versionerna som komponenterna är kompatibla med och länkar till dokumentation för tidigare versioner.
Mer information om versioner och versioner av kärnkomponenter finns i dokumentet Core Components Versions.
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 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.
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 kan innehålla omfattande, Sensei-baserade, robusta, högpresterande, plattformsoberoende Dynamic Media Image-funktioner.
Fjärrsupport för Assets remote-assets
Bildkomponenten (från och med version 2.23.2) stöder fjärrresurser. När du har konfigurerat kan du välja resurser från en fjärrtjänst för din bildkomponent.
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 som överförts 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 exempel på Image-komponenten och dess konfigurationsalternativ samt HTML och JSON-utdata går du till komponentbiblioteket.
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.
Dialogrutan Redigera edit-dialog
I redigeringsdialogrutan kan författaren beskära och zooma bilden.
Beroende på om Dynamic Media är aktiverat eller om Fjärrsupport för Assets är aktiverat, skiljer sig alternativen för att redigera bilder åt.
Standardredigering av resurser standard-assets
Om du redigerar AEM kan du klicka på ikonen Redigera på snabbmenyn för bildkomponenten.
-
Starta beskärning
Om du väljer det här alternativet öppnas en listruta för fördefinierade beskärningsproportioner.
- 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.
-
Rotera åt höger
Använd det här alternativet om du vill rotera bilden 90° åt höger (medurs).
-
Å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.
Dynamic Media resursredigering dynamic-media-assets
Om du har Dynamic Media-funktioner aktiverade måste-redigering av själva bilden utföras i resurskonsolen.
Konfigurera dialogruta configure-dialog
I bildkomponenten finns en konfigurationsdialogruta där själva bilden definieras tillsammans med dess beskrivning och grundläggande egenskaper.
Fliken Resurser asset-tab
-
Ärv bild från sida - Det här alternativet använder den aktuella bilden för den länkade sidan eller den aktuella sidans bild om bilden inte är länkad.
-
Bildresurs - Detta fylls i automatiskt om Ärv bild från sida har valts. Avmarkera om du vill definiera bilden manuellt genom att ange följande alternativ.
-
Släpp en resurs från resursläsaren eller tryck på alternativet bläddra så att du kan överföra från ett lokalt filsystem.
-
Tryck eller klicka på Radera för att avmarkera den markerade bilden.
-
Tryck eller klicka på Välj för att öppna resursläsaren så att du kan välja en bild.
-
Om Stöd för fjärrresurser är aktiverat har du flera alternativ för att välja en resurs:
- Lokal väljer från det lokala AEM resursbiblioteket.
- Fjärr väljer från ett Dynamic Media-bibliotek utanför din AEM.
-
-
Tryck eller klicka på Redigera om du vill hantera återgivningarna av resursen i resursredigeraren.
-
-
Alternativ text för hjälpmedel - I det här fältet kan du definiera en beskrivning av bilden för användare med nedsatt syn.
- Ärv alternativ text från sida - Det här alternativet använder den alternativa beskrivningen av det länkade objektvärdet för
dc:description-metadata i DAM eller för den aktuella sidan om ingen resurs är länkad.
- Ärv alternativ text från sida - Det här alternativet använder den alternativa beskrivningen av det länkade objektvärdet för
-
Ange inte någon alternativ text - Markerar bilden som ska ignoreras av hjälpmedelstekniker som skärmläsare för fall där bilden är enbart dekorativ eller på annat sätt inte förmedlar någon ytterligare information till sidan.
Fliken Metadata metadata-tab
-
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 den nedrullningsbara menyn 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.
-
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.
- Hämta bildtext från DAM - När den är markerad fylls bildtexten i med värdet för
-
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.
- Öppna länk på ny flik - Det här alternativet öppnar länken i ett nytt webbläsarfönster.
-
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.
Fliken Format styles-tab-edit
Bildkomponenten stöder AEM Style System.
Använd listrutan för att välja de format som du vill använda på komponenten. Markeringar som görs i redigeringsdialogrutan har samma effekt som de som väljs i komponentverktygsfältet.
Format måste konfigureras för den här komponenten i designdialogrutan för att den nedrullningsbara menyn ska vara tillgänglig.
Designdialogruta design-dialog
Huvudflik main-tab
-
Aktivera DM-funktioner - När det här alternativet är markerat är Dynamic Media-funktioner tillgängliga.
- Det här alternativet visas bara när Dynamic Media är aktiverat i miljön.
-
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 alternativet inte är markerat, eller om den webboptimerade bildleveranstjänsten inte är tillgänglig, används Adaptiv bildserver.
-
Inaktivera lazy loading - När det här alternativet är markerat läses alla bilder in i förväg utan att någon lazy läses in.
-
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.
-
Ändra storlek på bredd - Det här värdet används för att ändra storlek på bredden på basbilderna som är DAM-resurser.
- Bildernas proportioner bevaras.
- Om värdet är större än bildens faktiska bredd har det här värdet ingen effekt.
- Det här värdet påverkar inte bilder i SVG.
Du kan 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 i Image-komponenten.
-
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 storleken.
- 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 så att du kan läsa in bilderna när sidan läses in.
-
-
JPEG-kvalitet - Kvalitetsfaktorn (i procent från 0 och 100) för omformade (till exempel skalade eller beskurna) JPEG-bilder.
Fliken Format styles-tab
Bildkomponenten stöder AEM Style System.
Adobe-klientdatalager data-layer
Bildkomponenten stöder datalagret Adobe Client.