Afbeeldingscomponent

De component Core Component Image is een adaptieve afbeeldingscomponent die op locatie kan worden bewerkt.

Gebruik

De component Afbeelding biedt een adaptieve selectie van afbeeldingen en een responsief gedrag bij het lui laden voor de bezoeker van de pagina en bij het eenvoudig plaatsen en uitsnijden van de afbeelding voor de auteur van de inhoud.

De breedte van de afbeelding en aanvullende instellingen kunnen door de sjabloonauteur worden gedefinieerd in het dialoogvenster ontwerpdialoogvenster. De inhoudeditor kan elementen uploaden of selecteren in het dialoogvenster configureren, dialoogvenster.

Versie en compatibiliteit

De huidige versie van de Image Component is v3, die in februari 2022 is geïntroduceerd met versie 2.18.0 van de Core Components, en die in dit document wordt beschreven.

In de volgende tabel staan alle ondersteunde versies van de component, de AEM versies waarmee de versies van de component compatibel zijn en koppelingen naar documentatie voor vorige versies.

Componentversie AEM 6,4 AEM 6,5 AEM as a Cloud Service
v3 - Compatibel Compatibel
v2 Compatibel Compatibel Compatibel
v1 Compatibel Compatibel Compatibel

Raadpleeg het document voor meer informatie over versies en releases van de Core Component Core Components-versies.

Responsieve functies

De component Image wordt geleverd met robuuste responsieve functies die direct uit de verpakking zijn te vinden. Op het niveau van het paginasjabloon ontwerpdialoogvenster kan worden gebruikt om de standaardbreedten van het afbeeldingselement te definiëren. De component van het Beeld zal dan automatisch de correcte breedte aan vertoning afhankelijk van de grootte van het browser venster laden. Wanneer het formaat van het venster wordt gewijzigd, laadt de component Image dynamisch de juiste afbeeldingsgrootte. Componentontwikkelaars hoeven zich geen zorgen te maken over het definiëren van aangepaste mediaquery's, aangezien de component Image al is geoptimaliseerd om uw inhoud te laden.

Bovendien ondersteunt de component Afbeelding lui laden om het laden van het eigenlijke afbeeldingselement uit te stellen totdat het element zichtbaar is in de browser, waardoor de reacties op uw pagina's sneller worden.

TIP

De component Image wordt standaard geactiveerd door de adaptieve afbeeldingsserver. Zie het document Adaptieve afbeeldingsserver voor meer informatie over hoe het werkt.

Dynamic Media-ondersteuning

De afbeeldingscomponent (vanaf release 2.13.0) ondersteunt Dynamic Media activa. Indien ingeschakeld, Met deze functies kunt u Dynamic Media-afbeeldingselementen toevoegen met een eenvoudige sleepfunctie of via de middelenbrowser, net als met andere afbeeldingen. Daarnaast worden ook afbeeldingsaanpassingen, voorinstellingen voor afbeeldingen en slimme gewassen ondersteund.

Uw webervaringen die zijn gemaakt met Core Components kunnen beschikken over uitgebreide, op Sensei gebaseerde, robuuste, krachtige Dynamic Media Image-mogelijkheden voor meerdere platforms.

SVG-ondersteuning

Schaalbare vectorafbeeldingen (SVG) worden ondersteund door de afbeeldingscomponent.

  • De belemmering-en-daling van SVG activa van DAM en het uploaden van een SVG dossier van een lokaal dossiersysteem worden allebei gesteund.
  • Het oorspronkelijke SVG-bestand wordt gestreamd (transformaties worden overgeslagen).
  • Voor een SVG-afbeelding worden de "slimme afbeeldingen" en de "slimme formaten" ingesteld op een lege array in het afbeeldingsmodel.

Beveiliging

Om veiligheidsredenen wordt de originele SVG nooit direct geroepen door de Redacteur van het Beeld. Het wordt doorgeroepen <img src=“path-to-component”>. Hierdoor wordt voorkomen dat de browser scripts uitvoert die in het SVG-bestand zijn ingesloten.

OPMERKING

Voor SVG-ondersteuning is release 2.1.0 van de Core Components of hoger vereist, samen met servicepack 2 voor AEM 6.4 of hoger functies voor afbeeldingseditor binnen AEM.

Uitvoer van voorbeeldcomponent

Als u de afbeeldingscomponent wilt ervaren en voorbeelden wilt zien van de configuratieopties en van de HTML- en JSON-uitvoer, gaat u naar de Componentbibliotheek.

Technische details

De meest recente technische documentatie over de Image Component kan op GitHub worden gevonden.

Meer informatie over het ontwikkelen van kerncomponenten vindt u in de Documentatie voor ontwikkelaars van kerncomponenten.

De component Image ondersteunt schema.org-microgegevens.

Dialoogvenster configureren

De component image biedt een dialoogvenster voor configureren waarin de afbeelding zelf wordt gedefinieerd, samen met de beschrijving en basiseigenschappen.

Tabblad Element

Tabblad Element van het dialoogvenster Configureren van Image Component

  • Weergegeven afbeelding overnemen van pagina - Deze optie gebruikt de optie weergegeven afbeelding van de gekoppelde pagina of de weergegeven afbeelding van de huidige pagina als de afbeelding niet is gekoppeld.

  • Alternatieve tekst voor toegankelijkheid - In dit veld kunt u een beschrijving van de afbeelding definiëren voor visueel gehandicapte gebruikers.

    • Alternatieve tekst van pagina overnemen - Bij deze optie wordt de alternatieve beschrijving van de waarde van het gekoppelde element van de optie dc:description metagegevens in DAM of van de huidige pagina als er geen element is gekoppeld.
  • Afbeeldingselement

    • Middelen uit het deelvenster middelenbrowser of tik op doorbladeren uploaden vanuit een lokaal bestandssysteem.
    • Tik of klik op Wissen om de selectie van de geselecteerde afbeelding op te heffen.
    • Tik of klik op Bewerken tot de uitvoeringen van het actief beheren in de middeleneditor.
  • Geen alternatieve tekst bieden - Deze optie markeert dat de afbeelding wordt genegeerd door ondersteunende hulpmiddelen, zoals schermlezers, wanneer de afbeelding zuiver decoratief is of anderszins geen aanvullende informatie naar de pagina overbrengt.

Tabblad Metagegevens

Tabblad Metagegevens van het dialoogvenster Configureren van Image Component

  • Type voorinstelling - Hiermee worden de typen voorinstellingen voor afbeeldingen gedefinieerd die beschikbaar zijn. Voorinstelling afbeelding of Slim uitsnijden en is alleen beschikbaar wanneer Dynamic Media-functies zijn ingeschakeld.
    • Voorinstelling afbeelding - Wanneer Type voorinstelling van Voorinstelling afbeelding is geselecteerd, de vervolgkeuzelijst Voorinstelling afbeelding is beschikbaar, zodat u kunt kiezen uit de beschikbare Dynamic Media-voorinstellingen. Dit is alleen beschikbaar als er voorinstellingen zijn gedefinieerd voor het geselecteerde element.
    • Slim uitsnijden - Wanneer Type voorinstelling van Slim uitsnijden is geselecteerd in de vervolgkeuzelijst Vertoning is beschikbaar, zodat u kunt kiezen uit de beschikbare uitvoeringen van het geselecteerde element. Dit is alleen beschikbaar als uitvoeringen zijn gedefinieerd voor het geselecteerde element.
    • Afbeeldingsaanpassingen - U kunt hier aanvullende opdrachten voor Dynamic Media-beeldserving definiëren door &, ongeacht welke Type voorinstelling is geselecteerd.
  • Bijschrift - Aanvullende informatie over de afbeelding, die standaard onder de afbeelding wordt weergegeven.
    • Bijschrift ophalen van DAM - Als deze optie is ingeschakeld, wordt de bijschrifttekst van de afbeelding gevuld met de waarde van de optie dc:title metagegevens in DAM.
    • Bijschrift weergeven als pop-up - Als deze optie is ingeschakeld, wordt het bijschrift niet weergegeven onder de afbeelding, maar als een pop-up die door sommige browsers wordt weergegeven wanneer de muisaanwijzer op de afbeelding wordt geplaatst.
  • Koppeling - Koppel de afbeelding aan een andere bron.
    • In het dialoogvenster Selecteren kunt u een koppeling maken naar een andere AEM.
    • Als u geen koppeling naar een AEM maakt, voert u de absolute URL in. Niet-absolute URL's worden geïnterpreteerd als relatief ten opzichte van AEM.
    • Koppeling openen op nieuw tabblad - Met deze optie opent u de koppeling in een nieuw browservenster.
  • ID - Met deze optie kunt u de unieke id van de component in de HTML en in de Gegevenslaag.
    • Als deze leeg blijft, wordt automatisch een unieke id voor u gegenereerd. U kunt deze vinden door de resulterende pagina te inspecteren.
    • Als een id is opgegeven, is het de verantwoordelijkheid van de auteur om ervoor te zorgen dat deze uniek is.
    • Het wijzigen van de id kan gevolgen hebben voor het bijhouden van CSS-, JS- en gegevenslagen.
TIP

Slim uitsnijden en Voorinstelling afbeelding zijn opties die elkaar uitsluiten. Als een auteur een voorinstelling voor een afbeelding moet gebruiken in combinatie met een uitvoering voor slim uitsnijden, moet de auteur de opdracht Afbeeldingsaanpassingen om handmatig voorinstellingen toe te voegen.

Tabblad Stijlen

Het tabblad Stijlen van het dialoogvenster Afbeeldingscomponent bewerken

De component Image ondersteunt de AEM Stijlsysteem..

Gebruik de vervolgkeuzelijst om de stijlen te selecteren die u op de component wilt toepassen. Selecties in het dialoogvenster Bewerken hebben hetzelfde effect als de selecties op de werkbalk van de component.

De stijlen moeten voor deze component in worden gevormd ontwerpdialoogvenster zodat het vervolgkeuzemenu beschikbaar is.

Ontwerpdialoogvenster

Hoofdtabblad

Het hoofdtabblad van het dialoogvenster Ontwerp van de afbeeldingscomponent

  • DM-functies inschakelen - Indien ingeschakeld, Dynamic Media-functies zijn beschikbaar.
    • Deze optie wordt alleen weergegeven als Dynamic Media is ingeschakeld in de omgeving.
  • Geoptimaliseerde webafbeeldingen inschakelen - Indien ingeschakeld, de webgeoptimaliseerde service voor het leveren van afbeeldingen Hiermee worden afbeeldingen in de WebP-indeling geleverd. De afbeeldingen worden gemiddeld met 25% verkleind.
    • Deze optie is alleen beschikbaar in AEMaaCS.
    • Als deze optie niet is ingeschakeld of als de service voor het leveren van afbeeldingen voor het web niet beschikbaar is, Adaptieve afbeeldingsserver wordt gebruikt.
  • Lazy load uitschakelen - Als deze optie is ingeschakeld, worden alle afbeeldingen vooraf geladen zonder dat dit wordt vertraagd.
  • Afbeelding is decoratief - Definieer of de optie Decoratieve afbeelding automatisch wordt ingeschakeld wanneer u de afbeeldingscomponent aan een pagina toevoegt.
  • Alternatieve tekst ophalen van DAM- Definieer of de optie voor het ophalen van de alternatieve tekst van de DAM automatisch is ingeschakeld wanneer u de afbeeldingscomponent aan een pagina toevoegt.
  • Bijschrift ophalen van DAM - Bepaal als de optie om de titel van DAM terug te winnen automatisch wordt toegelaten wanneer het toevoegen van de beeldcomponent aan een pagina.
  • Bijschrift weergeven als pop-up - Definieer of de optie voor het weergeven van het bijschrift als pop-up automatisch is ingeschakeld wanneer u de afbeeldingscomponent aan een pagina toevoegt.
  • Breedte wijzigen - Deze waarde wordt gebruikt voor het vergroten of verkleinen van de breedte van de basisafbeeldingen die DAM-elementen zijn.
    • De hoogte-breedteverhouding van de afbeeldingen blijft behouden.
    • Als de waarde groter is dan de werkelijke breedte van de afbeelding, heeft deze waarde geen effect.
    • Deze waarde heeft geen effect op SVG-afbeeldingen.

U kunt een lijst van breedten in pixel voor het beeld bepalen en de component zal automatisch de meest aangewezen breedte laden die op browser grootte wordt gebaseerd. Dit is een belangrijk onderdeel van het responsieve functies van de afbeeldingscomponent.

  • Breedten - Definieert een lijst met breedten in pixels voor de afbeelding en de component laadt automatisch de meest geschikte breedte op basis van de browsergrootte.
    • Tik of klik op de knop Toevoegen om een andere grootte toe te voegen.
      • Gebruik de grepen om de volgorde van de formaten te wijzigen.
      • Gebruik de Verwijderen pictogram om een breedte te verwijderen.
    • Het laden van afbeeldingen wordt standaard uitgesteld totdat ze zichtbaar worden.
      • Selecteer de optie Lazy load uitschakelen om de afbeeldingen te laden wanneer de pagina wordt geladen.
  • JPEG-kwaliteit - De kwaliteitsfactor (als percentage van 0 en 100) voor getransformeerde (bijv. geschaalde of bijgesneden) JPEG-afbeeldingen.
TIP

Zie het document Adaptieve afbeeldingsserver voor tips voor het optimaliseren van de selectie van uitvoeringen door uw breedten zorgvuldig te definiëren.

Tabblad Stijlen

De component Image ondersteunt de AEM Stijlsysteem.

Gegevenslaag Adobe-client

De component Image ondersteunt de Adobe Client Data Layer.

Op deze pagina