Core Component Image Component Component är en adaptiv bildkomponentfunktion för redigering på plats.
Med Image Component (Bildkomponent) är det enkelt att placera bildresurser och du får tillgång till redigering på plats. Den har adaptiv bildmarkering med lazy loading och beskärning för innehållsförfattaren.
Tillåtna bildbredder samt beskärning 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 v1 av Image Component, som ursprungligen introducerades i version 1.0.0 av Core Components med AEM 6.3.
I följande tabell visas kompatibiliteten för v1 för Image-komponenten.
AEM | Bildkomponent v1 |
---|---|
6.3 | Kompatibel |
6.4 | Kompatibel |
I det här dokumentet beskrivs v1 för bildkomponenten.
Mer information om den aktuella versionen av bildkomponenten finns i Bildkomponent -dokument.
Följande prov tas från Vi.butik.
<div class="cmp cmp-image aem-GridColumn aem-GridColumn--default--12">
<noscript data-cmp-image="{"smartImages":[],"smartSizes":[],"lazyEnabled":true}">
<img src="/content/we-retail/us/en/equipment/_jcr_content/root/responsivegrid/image.img.jpg" alt="Surfboard"/>
</noscript>
</div>
"image": {
"columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
"smartSizes": [],
"smartImages": [],
"lazyEnabled": true,
"src": "/content/we-retail/us/en/equipment/equipment/jcr%3acontent/root/responsivegrid/image.img.jpeg",
":type": "weretail/components/content/image"
}
JSON-export från Core Components kräver version 1.1.0 av Core Components. Se kompatibilitetsinformation för kärnkomponenter v1 för mer information.
Förutom standarden redigeringsdialogruta och designdialogrutainnehåller bildkomponenten en konfigurationsdialogruta där själva bilden definieras tillsammans med beskrivning och grundläggande egenskaper.
Bildresurs
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.
Länk
Bildtext - Ytterligare information om bilden, som visas under bilden, är standard.
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.
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.
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).
Starta karta
Använd det här alternativet om du vill använda en startkarta för bilden. Om du väljer det här alternativet öppnas ett nytt fönster där användaren kan välja kartans form:
Lägg till rektangulär karta
Lägg till cirkulär karta
Lägg till polygonkarta
När du har markerat en schemaform läggs den ovanpå bilden så att du kan ändra storlek på den. Dra och släpp handtagen för blå storleksändring för att justera formen.
När du har ändrat storlek på startkartan klickar du på den för att öppna ett flytande verktygsfält och definiera länkens sökväg.
Använd alternativet Banväljaren för att markera en bana i AEM
Om sökvägen inte finns i AEM använder du den absoluta URL:en. Icke-absoluta sökvägar tolkas i förhållande till AEM.
Alt-text
Alternativ beskrivning av sökvägsmålet
Mål
Tryck eller klicka på den blå bockmarkeringen för att spara, det svarta x för att avbryta och det röda papperskorgen för att ta bort kartan.
Å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 den beskärning, överföring och rotation som innehållsförfattaren har när den här komponenten används.
På Huvud kan du definiera en lista med tillåtna bredder i pixlar för att bilden automatiskt ska läsa in den bredd som passar bäst i listan.
Tryck eller klicka på knappen Lägg till för att lägga till en annan storlek.
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.
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.
Aktivera webboptimerade bilder - När det är markerat levererar den webboptimerade bildleveranstjänsten bilder i WebP-format, vilket minskar bildstorleken med i genomsnitt 25 %.
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
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.
Den senaste tekniska dokumentationen om Image Component finns på GitHub.
Hela kärnkomponentprojektet kan laddas ned från GitHub.
Mer information om hur du utvecklar kärnkomponenter finns i Dokumentation för grundkomponentutvecklare.