Afbeeldingscomponent (v2) image-component
De component Core Component Image is een adaptieve afbeeldingscomponent die op locatie kan worden bewerkt.
Gebruik usage
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 beeldbreedten evenals het bebouwen en extra montages kunnen door de malplaatjeauteur in de ontwerpdialoogworden bepaald. De inhoudsredacteur kan activa in uploaden of selecteren vormt dialoogen bebouwt het beeld in uitgeeft dialoog. Voor meer gebruiksgemak is het ook mogelijk de afbeelding op een eenvoudige plaats aan te passen.
Versie en compatibiliteit version-and-compatibility
In dit document wordt versie 2 van de Image Component beschreven, die in januari 2018 is geïntroduceerd met versie 2.0.0 van de Core Components.
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 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.
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 webbeleving die is gebouwd met Core Components kan geen geavanceerde, op Sensei gebaseerde, robuuste, krachtige Dynamic Media Image-mogelijkheden voor meerdere platforms bieden.
SVG-ondersteuning svg-support
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 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 evenals voorbeelden van zijn configuratieopties evenals 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 configureren configure-dialog
Naast standaard geef dialooguit en ontwerpdialoog, biedt de beeldcomponent een dialoog aan waar het beeld zelf samen met zijn beschrijving en basiseigenschappen wordt bepaald.
Tabblad Element asset-tab
-
activa van het Beeld
- Daling een activa van activa browserof ontvang doorbladert optie om van een lokaal dossiersysteem te uploaden.
- Tik of klik Duidelijk om het momenteel geselecteerde beeld te deselecteren.
- Tik of klik uitgeven om de vertoningen van de activain de activaredacteur te beheren.
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 Vooraf ingestelde Beeld 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 Uitsnijden wordt geselecteerd de daling onderaan Vertoning beschikbaar is, toestaand selectie van de beschikbare vertoningen van de 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.
-
Beeld is decoratief - controleer als het beeld door ondersteunende technologie zou moeten worden genegeerd en daarom geen alternatieve tekst vereist. Dit geldt alleen voor decoratieve afbeeldingen.
-
Alternatieve tekst - Textueel alternatief van de betekenis of de functie van het beeld, voor visueel gehandicapte lezers.
- krijgt alternatieve tekst van DAM - wanneer gecontroleerd de alternatieve tekst van het beeld zal met de waarde van de
dc:descriptionmeta-gegevens in DAM worden bevolkt.
- krijgt alternatieve tekst van DAM - wanneer gecontroleerd de alternatieve tekst van het beeld zal met de waarde van de
-
Titel - de Extra informatie over het beeld, die onder het beeld door gebrek wordt getoond.
- krijgt titel van DAM - wanneer gecontroleerd de de bijschrifttekst van het beeld zal met de waarde van de
dc:titlemeta-gegevens in DAM worden bevolkt. - titel van de Vertoning als pop-up - wanneer gecontroleerd, zal de titel niet onder het beeld worden getoond, maar als pop-up die door sommige browsers wordt getoond wanneer het bedekken over het beeld.
- krijgt titel van DAM - wanneer gecontroleerd de de bijschrifttekst van het beeld zal 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.
-
identiteitskaart - Deze optie staat toe om het unieke herkenningsteken van de component in HTML en in de Laag van Gegevens te controleren.
- 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.
Dialoogvenster Bewerken edit-dialog
In het dialoogvenster Bewerken kan de auteur van de inhoud uitsnijden, de startkaart wijzigen en inzoomen op de afbeelding.
-
Uitsnijden starten
Als u deze optie selecteert, wordt een vervolgkeuzelijst geopend voor vooraf gedefinieerde verhoudingen voor uitsnijden.
- Kies de optie Vrije hand om uw eigen uitsnijding te bepalen.
- 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.
-
Horizontaal spiegelen
Met deze optie kunt u de afbeelding horizontaal draaien of 180° langs de y-as draaien.
-
Verticaal spiegelen
Gebruik deze optie om de afbeelding 180° verticaal om te draaien of om de afbeelding 180° langs de x-as om te draaien.
-
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.
Ontwerpdialoogvenster design-dialog
In het ontwerpdialoogvenster kan de sjabloonauteur de opties voor uitsnijden, uploaden, roteren en uploaden definiëren die de auteur van de inhoud heeft wanneer deze component wordt gebruikt.
Hoofdtabblad main-tab
Op het Belangrijkste lusje kunt u 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 deel van ontvankelijke eigenschappenvan de Component van het Beeld.
Bovendien kunt u bepalen welke algemene componentenopties automatisch of onbruikbaar worden gemaakt wanneer de auteur de component aan een pagina toevoegt.
-
laat eigenschappen DM toe - wanneer gecontroleerd, laat eigenschappen van Dynamic Mediatoe beschikbaar zijn.
-
laat Web Geoptimaliseerde Beelden toe - wanneer gecontroleerd, zal de Web-geoptimaliseerde dienst van de beeldleveringbeelden in het formaat leveren WebP, die beeldgrootte door gemiddeld 25% verminderen.
- Deze optie is alleen beschikbaar in AEMaaCS.
- Wanneer ongecontroleerd of de web-optimized dienst van de beeldlevering niet beschikbaar is wordt de Aangepaste Servlet van het Beeldgebruikt.
-
laat luie lading toe - bepaalt als de luie ladingsoptie automatisch wordt toegelaten wanneer het toevoegen van de beeldcomponent aan een pagina.
-
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.
-
onbruikbaar maken UUID het Volgen - Controle om het volgen van UUID van het beeldelement onbruikbaar te maken.
-
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 grepen om de volgorde van de formaten 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 om de beelden op paginading te laden.
-
-
Kwaliteit van JPEG - de kwaliteitsfactor (in percentage van 0 en 100) voor getransformeerde (b.v. geschraapte of bebouwde) beelden van JPEG.
Tabblad Functies features-tab
Op het lusje van Eigenschappen kunt u bepalen welke opties aan de inhoudsauteurs beschikbaar zijn wanneer het gebruiken van de component met inbegrip van uploadt opties, richtlijn, en bebouwende opties.
-
Source
Selecteer de optie activa uploaden van het dossiersysteem toestaan om inhoudsauteurs toe te staan om beelden van zijn of haar lokale computer te uploaden. Schakel deze optie uit als u wilt dat inhoudsauteurs alleen elementen uit AEM selecteren.
-
Afdrukstand
-
roteren
Gebruik deze optie om de inhoudauteur toe te staan om te gebruiken roteer Juist optie. -
Omdraaien
Gebruik deze optie om de inhoudauteur toe te staan om Horizontaal te gebruiken Omdraaien en Verticaal omdraaien opties.note caution CAUTION De 1} optie van de Omslag {wordt onbruikbaar gemaakt door gebrek. Toelatend zal het Verticaal Omdraaien en Horizontaal Omdraaien knopen in uitgeven dialoog van de beeldcomponent tonen, nochtans wordt de eigenschap momenteel niet gesteund door AEM en om het even welke veranderingen die gebruikend deze opties worden aangebracht zullen niet worden voortgeduurd. -
Uitsnijden
Selecteer de optie gewas toestaan om de inhoudauteur toe te staan om het beeld in de component in uit te snijden uitgeeft dialoog.
- Klik toevoegen om een vooraf bepaalde uitsnijdverhouding toe te voegen.
- Ga een beschrijvende naam in, die in 1} dropdown van het Gewas van het Begin {zal worden getoond.
- Voer de numerieke verhouding van het aspect in.
- Gebruik de sleephandgrepen om de volgorde van de hoogte-breedteverhoudingen te wijzigen
- Gebruik het prullenbakpictogram om een hoogte-breedteverhouding te verwijderen.
note caution CAUTION Merk op dat in AEM, gewassenaspectverhoudingen als hoogte/breedte worden bepaald. Dit verschilt van de conventionele definitie van breedte/hoogte en wordt gedaan om oude compatibiliteitsredenen. De auteurs van de inhoud zullen zich niet van enig verschil bewust zijn zolang u een duidelijke naam van de verhouding verstrekt aangezien de naam in UI en niet de verhouding zelf wordt getoond.
Tabblad Stijlen styles-tab-1
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.