Bildkomponent (v1)

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

Användning

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

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.

Exempel på komponentutdata

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

Skärmbild

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

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

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.

• 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

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.

Designdialogruta

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

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.

• 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

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

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

Teknisk information

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.