Core Component Image Component Component är en adaptiv bildkomponent med redigering på plats.
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.
I det här dokumentet beskrivs v2 av Image Component, som introducerades i version 2.0.0 av Core Components i januari 2018.
I det här dokumentet beskrivs v1 för bildkomponenten.
Mer information om den aktuella versionen av bildkomponenten finns i Bildkomponent -dokument.
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.
Image Component (Bildkomponenten) drivs av Adaptive Image Server. Se dokumentet Adaptiv bildserver om du vill ha mer information om hur det fungerar.
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.
Skalbar vektorgrafik (SVG) stöds av bildkomponenten.
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.
Om du vill se både Image Component (Bildkomponent) och exempel på dess konfigurationsalternativ samt HTML och JSON-utdata går du till Komponentbibliotek.
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.
Förutom standarden redigeringsdialogruta och designdialogrutainnehåller bildkomponenten en konfigurationsdialogruta där själva bilden definieras tillsammans med beskrivning och grundläggande egenskaper.
&
oavsett vilka Förinställningstyp är markerat.dc:description
metadata i DAM.dc:title
metadata i DAM.Smart beskärning och Bildförinställning alternativ som utesluter varandra. 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 Bildmodifierare om du vill lägga till förinställningar manuellt.
I redigeringsdialogrutan kan författaren beskära, ändra startkartan och zooma bilden.
Funktionerna för beskärning, rotering och zoomning gäller inte för Dynamic Media-resurser. Om Funktioner i Dynamic Media är aktiverade bör all sådan redigering av Dynamic Media-resurser utföras via Konfigurera dialogruta.
Starta beskärning
Om du väljer det här alternativet öppnas en listruta för fördefinierade beskärningsproportioner.
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.
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.
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.
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.
Se dokumentet Adaptiv bildserver för tips om hur du kan optimera markeringen av återgivning genom att definiera dina bredder noggrant.
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.
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.
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.
Bildkomponenten stöder AEM Formatsystem.
Bildkomponenten har stöd för Adobe Client Data Layer.