Bildkomponent (v1) image-component-v

Core Component Image Component Component är en adaptiv bildkomponentfunktion för redigering på plats.

Användning usage

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.

Version och kompatibilitet version-and-compatibility

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
CAUTION
I det här dokumentet beskrivs v1 för bildkomponenten.
Mer information om den aktuella versionen av bildkomponenten finns i Bildkomponent -dokument.

Exempel på komponentutdata sample-component-output

Följande prov tas från Vi.butik.

Skärmbild screenshot

HTML html

<div class="cmp cmp-image aem-GridColumn aem-GridColumn--default--12">

        <noscript data-cmp-image="{&#34;smartImages&#34;:[],&#34;smartSizes&#34;:[],&#34;lazyEnabled&#34;:true}">
            <img src="/content/we-retail/us/en/equipment/_jcr_content/root/responsivegrid/image.img.jpg" alt="Surfboard"/>
        </noscript>

</div>

JSON json

"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"
            }
NOTE
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.

Konfigurera dialogruta configure-dialog

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

  • 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.
  • 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

    • 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.
  • 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.

Dialogrutan Redigera edit-dialog

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).

  • 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

      • Som standard läggs ett triangelschema till. Dubbelklicka på en linje i formen för att lägga till ett nytt blått handtag på en ny sida.

    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.

    • Bana

      • 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

        • Samma flik
        • Ny flik
        • Överordnad ram
        • Övre bildruta

    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.

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 den beskärning, överföring och rotation som innehållsförfattaren har när den här komponenten används.

Huvud main

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.

  • Använd handtagen för att ordna om storlekarna.
  • Använd ikonen Ta bort för att 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.

  • 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.

Funktioner features

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 %.

    • 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.
  • 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 om du vill 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.
    note caution
    CAUTION
    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.
    note caution
    CAUTION
    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.

Teknisk information technical-details

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.

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