Afbeeldingscomponent image-component
De component Core Component Image is een adaptieve afbeeldingscomponent.
Gebruik usage
De component Afbeelding biedt een adaptieve selectie van afbeeldingen en een responsief gedrag bij het lui laden van de pagina voor de bezoeker van de pagina en bij het eenvoudig plaatsen van de afbeelding voor de auteur van de inhoud.
De inhoudauteur kan gebruiken uitgeeft dialoogom de beeldactiva uit te geven zoals het toepassen van een uitsnijding of het roteren van het beeld.
De beeldbreedten en de extra montages kunnen door de malplaatjeauteur in de ontwerpdialoogworden bepaald. De inhoudsredacteur kan activa in uploaden of selecteren vormt dialoog.
Versie en compatibiliteit version-and-compatibility
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.
Voor meer informatie over de versies en versies van de Component van de Kern, zie de Versies van de Componenten van de Document Kern.
Responsieve functies responsive-features
De component Image wordt geleverd met robuuste responsieve functies die direct uit de verpakking kunnen worden geleverd. Op het niveau van het paginamalplaatje, kan de ontwerpdialoogworden gebruikt om de standaardbreedten van het beeldactiva te bepalen. De component Afbeelding laadt automatisch de juiste breedte om weer te geven, afhankelijk van de grootte van het browservenster. 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.
Dynamic Media-ondersteuning dynamic-media
De Component van het Beeld (van versie 2.13.0) steunt Dynamic Mediaactiva. wanneer toegelaten,bieden deze eigenschappen de capaciteit aan om de beeldactiva van Dynamic Media met eenvoudige belemmering-en-daling of via activabrowser toe te voegen enkel zoals u een ander beeld. 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.
Externe Assets-ondersteuning remote-assets
De Component van het Beeld (van versie 2.23.2) steunt verre activa. Zodra gevormd,kunt u activa van de verre dienst voor uw beeldcomponent selecteren.
SVG-ondersteuning svg-support
Schaalbare vectorafbeeldingen (SVG) worden ondersteund door de afbeeldingscomponent.
- De belemmering-en-daling van een SVG middel van DAM en het uploaden van een SVG dossier dat van een lokaal dossiersysteem wordt geupload 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 security
Om veiligheidsredenen wordt de originele SVG nooit direct geroepen door de Redacteur van het Beeld. Deze wordt aangeroepen via <img src="path-to-component"> . Hierdoor wordt voorkomen dat de browser scripts uitvoert die in het SVG-bestand zijn ingesloten.
Uitvoer van voorbeeldcomponent sample-component-output
Om de Component van het Beeld te ervaren en voorbeelden van zijn configuratieopties en HTML en output te zien JSON, bezoek de Bibliotheek van de Component.
Technische details technical-details
De recentste technische documentatie over de Component van het Beeld kan op GitHubworden gevonden.
De verdere details over het ontwikkelen van de Componenten van de Kern kunnen in de de ontwikkelaarsdocumentatie van de Componenten van de Kern worden gevonden.
De Component van het Beeld steunt schema.org microdata.
Dialoogvenster Bewerken edit-dialog
In het dialoogvenster Bewerken kan de auteur van de inhoud de afbeelding uitsnijden en zoomen.
Afhankelijk van als u Dynamic Mediatoegelaten of Verre Steun van Assetshebt wordt toegelaten, verschillen de opties beschikbaar voor het uitgeven van beelden.
Standaard bewerken van bedrijfsmiddelen standard-assets
Als u standaard AEM activa uitgeeft, kunt u klikken geeft pictogram in het contextmenu van de beeldcomponent uit.
-
Uitsnijden starten
Als u deze optie selecteert, wordt een vervolgkeuzelijst geopend voor vooraf gedefinieerde verhoudingen voor uitsnijden.
- Kies de optie verwijdert Uitsnijden om de originele activa te tonen.
Als een uitsnijdoptie is geselecteerd, gebruikt u de blauwe handgrepen om het uitsnijden op de afbeelding te vergroten of te verkleinen.
-
Rechtsom roteren
Gebruik deze optie als u de afbeelding 90° rechtsom wilt roteren.
-
Zoomen herstellen
Als al op de afbeelding is ingezoomd, gebruikt u deze optie om het zoomniveau opnieuw in te stellen.
-
Zoomregelaar openen
Met deze optie geeft u een schuifregelaar weer om het zoomniveau van de afbeelding te bepalen.
U kunt de interne editor ook gebruiken om de afbeelding te wijzigen. Vanwege ruimtebeperkingen zijn alleen de basisopties online beschikbaar. Voor volledige bewerkingsopties gebruikt u de modus Volledig scherm.
Dynamic Media Asset Editing dynamic-media-assets
Als u toegelaten eigenschappen van Dynamic Media hebt,moet het uitgeven van het beeld zelf in de activa console worden uitgevoerd.
Dialoogvenster configureren configure-dialog
De component image biedt een dialoogvenster voor configureren waarin de afbeelding zelf wordt gedefinieerd, samen met de beschrijving en basiseigenschappen.
Tabblad Element asset-tab
-
erven geërfte beeld van pagina - deze optie gebruikt het geprezen beeld van de verbonden paginaof het gekenmerkte beeld van de huidige pagina als het beeld niet verbonden is.
-
activa van het Beeld - dit wordt automatisch bevolkt als geërft beeld van pagina wordt geselecteerd. Schakel deze optie uit als u de afbeelding handmatig wilt definiëren door de volgende opties in te stellen.
-
Daling een activa van activa browserof ontvang doorbladert optie zodat kunt u van een lokaal dossiersysteem uploaden.
-
Tik of klik Duidelijk om het momenteel geselecteerde beeld te deselecteren.
-
Tik of klik Keuze om activa browserte openen zodat kunt u een beeld selecteren.
-
Als de Verre Steun van Activiteitenwordt toegelaten, hebt u veelvoudige opties om activa te kiezen:
- Lokale selecteert van de lokale bibliotheek van AEM activa.
- Verre selecteert van een bibliotheek van Dynamic Media buiten uw AEM instantie.
-
-
Tik of klik uitgeven om de vertoningen van de activain de Redacteur van Activa te beheren.
-
-
Alternatieve tekst voor toegankelijkheid - Dit gebied staat u toe om een beschrijving van het beeld voor visueel gehandicapte gebruikers te bepalen.
- erven alternatieve tekst van pagina - Deze optie gebruikt de alternatieve beschrijving van de verbonden activawaarde van de
dc:descriptionmeta-gegevens in DAM of van de huidige pagina als geen activa wordt verbonden.
- erven alternatieve tekst van pagina - Deze optie gebruikt de alternatieve beschrijving van de verbonden activawaarde van de
-
verstrekt geen alternatieve tekst - Merkt het beeld dat door ondersteunende technologieën zoals het schermlezers voor gevallen moet worden genegeerd waar het beeld zuiver decoratief is of anders geen extra informatie aan de pagina overbrengt.
Tabblad Metagegevens metadata-tab
-
vooraf ingesteld Type - dit bepaalt de types van beeld vooraf instelt beschikbaar, of Vooraf ingesteld Beeld of Slim Gewas, en is slechts beschikbaar wanneer eigenschappen van Dynamic Mediaworden toegelaten.
- Vooraf ingesteld Beeld - wanneer Vooraf ingesteld Type van Vooraf ingesteld Beeld wordt geselecteerd, is het drop-down Beeld Vooraf ingesteld beschikbaar, toestaand selectie van beschikbare Dynamic Media vooraf instelt. Dit is alleen beschikbaar als er voorinstellingen zijn gedefinieerd voor het geselecteerde element.
- Slim Gewas - wanneer Vooraf ingesteld Type van Slim Gewas wordt geselecteerd, is de drop-down Vertoning beschikbaar, toestaand selectie van de beschikbare vertoningen van het geselecteerde activa. Dit is alleen beschikbaar als uitvoeringen zijn gedefinieerd voor het geselecteerde element.
- de Modifiers van het Beeld - het Extra beeld dat van Dynamic Media bevelen dienen kan hier worden bepaald door
&, ongeacht welk Vooraf ingesteld Type wordt geselecteerd.
-
Titel - de Extra informatie over het beeld, die onder het beeld door gebrek wordt getoond.
- krijgt titel van DAM - wanneer gecontroleerd de de titeltekst van het beeld wordt bevolkt met de waarde van de
dc:titlemeta-gegevens in DAM. - titel van de Vertoning als pop-up - wanneer gecontroleerd, wordt de titel niet getoond onder het beeld, maar als pop-up die door sommige browsers wordt getoond wanneer het bedekken over het beeld.
- krijgt titel van DAM - wanneer gecontroleerd de de titeltekst van het beeld wordt bevolkt met de waarde van de
-
Verbinding - verbind het beeld met een ander middel.
- 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.
- Open verbinding in nieuw lusje - deze optie opent de verbinding in een nieuw browser venster.
-
identiteitskaart - Deze optie laat u het unieke herkenningsteken van de component in de HTML en in de Laag van Gegevenscontroleren.
- 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.
Tabblad Stijlen styles-tab-edit
De Component van het Beeld steunt het AEM Systeem van de Stijl.
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 de ontwerpdialoogvoor het drop-down menu worden gevormd om beschikbaar te zijn.
Ontwerpdialoogvenster design-dialog
Hoofdtabblad main-tab
-
laat eigenschappen DM toe - wanneer gecontroleerd, de eigenschappen van Dynamic Mediazijn beschikbaar.
- Deze optie wordt alleen weergegeven als Dynamic Media is ingeschakeld in de omgeving.
-
laat Web Geoptimaliseerde Beelden toe - wanneer gecontroleerd, de Web-geoptimaliseerde dienst van de beeldleveringlevert beelden in het formaat WebP, die beeldgrootte door gemiddeld 25% verminderen.
- Deze optie is alleen beschikbaar in AEMaaCS.
- Wanneer ongecontroleerd, of de Web-geoptimaliseerde dienst van de beeldlevering niet beschikbaar is, wordt de Aangepaste Servlet van het Beeldgebruikt.
-
maak luie lading onbruikbaar - wanneer gecontroleerd, laadt de component alle beelden zonder luie lading vooraf.
-
Beeld is decoratief - bepaal als de decoratieve beeldoptie automatisch wordt toegelaten wanneer het toevoegen van de beeldcomponent aan een pagina.
-
krijgt alternatieve tekst van DAM - bepaalt als de optie om de afwisselende tekst van DAM terug te winnen automatisch wordt toegelaten wanneer het toevoegen van de beeldcomponent aan een pagina.
-
krijgt titel van DAM - bepaalt als de optie om de titel van DAM terug te winnen automatisch wordt toegelaten wanneer het toevoegen van de beeldcomponent aan een pagina.
-
de titel van de Vertoning als pop-up - bepaalt als de optie om de beeldtitel als pop-up te tonen automatisch wordt toegelaten wanneer het toevoegen van de beeldcomponent aan een pagina.
-
resizing breedte - deze waarde wordt gebruikt voor het resizing van de breedte van de basisbeelden die activa DAM 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 laadt automatisch de meest aangewezen breedte gebaseerd op browser grootte. Dit is een belangrijk deel van ontvankelijke eigenschappenvan de Component van het Beeld.
-
Breedten - bepaalt een lijst van breedten in pixel voor het beeld en de component laadt automatisch de meest aangewezen breedte die op browser grootte wordt gebaseerd.
-
Tik of klik voeg knoop toe om een andere grootte toe te voegen.
- Gebruik de handgrepen om de grootte te wijzigen.
- Gebruik het pictogram van de Schrapping om een breedte te verwijderen.
-
Het laden van afbeeldingen wordt standaard uitgesteld totdat ze zichtbaar worden.
- Selecteer de optie maak het laden onbruikbaar zodat kunt u de beelden op paginading laden.
-
-
Kwaliteit van JPEG - de kwaliteitsfactor (in percentage van 0 en 100) voor getransformeerde (bijvoorbeeld, geschraapte of bebouwde) beelden van JPEG.
Tabblad Stijlen styles-tab
De Component van het Beeld steunt het AEM Systeem van de Stijl.
Gegevenslaag client-Adobe data-layer
De Component van het Beeld steunt de Laag van de Gegevens van de Cliënt van de Adobe.