Bild

Die Image-Komponente ermöglicht es Ihnen, Bilder in Ihren Avonni Dynamic Components anzuzeigen. Sie können Bilder aus verschiedenen Quellen verwenden, Größe und Position steuern und sogar interaktive Vergrößerungen hinzufügen

Übersicht

Die Image-Komponente ist ein grundlegendes visuelles Element für:

-   Anzeige statischer Bilder (z. B. Logos, Produktfotos).
-   Anzeige dynamischer Bilder basierend auf Daten aus Salesforce (z. B. Anzeige des Profilbilds eines Kontakts).
-   Erstellung visuell ansprechender Benutzeroberflächen.

Anwendungsfälle

• Datensatz-Detailseiten: Zeigen Sie ein Produktbild, das Profilbild eines Benutzers, ein Firmenlogo oder andere relevante Bilder an, die mit einem Datensatz verknüpft sind.

• Dashboards: Fügen Sie Bilder in Dashboards ein, um visuellen Kontext oder Branding zu bieten.

• Kataloge: Erstellen Sie optisch ansprechende Produktkataloge.

• Bildergalerien: Zeigen Sie eine Reihe von Bildern an (obwohl spezialisierte Komponenten wie Carousel hierfür möglicherweise besser geeignet sind).

• Marketing-Inhalte: Fügen Sie Bilder hinzu, um Ihre Komponenten ansprechender zu gestalten.

Konfigurieren der Image-Komponente

Wählen Sie die Image-Komponente auf der Leinwand aus, um in der Eigenschaftenleiste auf ihre Eigenschaften zuzugreifen.

Grundlegende Eigenschaften

• API-Name: (Text) Eine eindeutige Kennung für diese Komponenteninstanz (z. B., ProductImage, UserProfilePicture).

• Bildquelle: (Text - Kritisch) Diese Eigenschaft bestimmt den Ursprung des Bildes. Sie haben mehrere Optionen, auswählbar über das Ressourcenauswahl-Symbol:

  • Statische URL: Geben Sie die vollständige URL eines online gehosteten Bildes ein (z. B., https://www.example.com/myimage.jpg). Wichtig: Das Bild muss öffentlich zugänglich sein oder für Ihre Salesforce-Benutzer entsprechend deren Freigabeeinstellungen zugänglich sein.

  • Ressource: Wählen Sie eine Statische Ressource aus Ihrer Salesforce-Organisation. Dies ist die empfohlene Methode, um Bilder in das Design Ihrer Anwendung einzubinden. Sie müssen das Bild als Statische Ressource in den Salesforce-Einstellungen hochladen, bevor dann können Sie es hier auswählen.

  • Variable/Formel: Verwenden Sie eine Textvariable oder eine Formelressource, die einen URL-String zurückgibt. Dadurch können Sie das Bild dynamisch basierend auf Daten oder Benutzerinteraktion ändern. Beispiel: Zeigen Sie je nach im Datentisch ausgewähltem Produkt ein anderes Produktbild an.

  • Komponentenattribut: Rufen Sie die URL dynamisch aus dem Attribut einer anderen Komponente ab.

• Alternativtext (alt): (Text - Wesentlich für Barrierefreiheit) Geben Sie einen kurzen, beschreibenden alternativen Text für das Bild an. Screenreader verwenden diesen Text für sehbehinderte Benutzer; er wird auch angezeigt, wenn das Bild nicht geladen werden kann. Geben Sie immer aussagekräftigen Alt-Text an.

Größe und Positionierung

• Breite: (Text/Zahl) Steuert die Breite des Bildes. Best Practice: Setzen Sie entweder Breite oder oder Höhe, aber in der Regel nicht beides, um Verzerrungen zu vermeiden. Optionen:

  • Zahl + px: Geben Sie eine Breite in Pixeln an (z. B., 100px, 250px).

  • Zahl + %: Geben Sie eine Breite als Prozentsatz des umschließenden Elements an (z. B., 50%, 100%).

  • auto: Die intrinsische Breite des Bildes wird verwendet.

  • Leer: Überlassen Sie dem Browser die beste Anpassung basierend auf anderen Einstellungen.

• Höhe: (Text/Zahl) Steuert die Höhe des Bildes. Best Practice: Setzen Sie entweder Breite oder oder Höhe, aber in der Regel nicht beides, um Verzerrungen zu vermeiden. Optionen:

  • Zahl + px: Geben Sie eine Höhe in Pixeln an.

  • Zahl + %: Geben Sie eine Höhe als Prozentsatz der umschließenden Elements Höhe an.

  • auto: Die intrinsische Höhe des Bildes wird verwendet.

  • Leer: Überlassen Sie dem Browser die beste Anpassung basierend auf anderen Einstellungen.

• Zuschneideanpassung (Crop Fit): (Text – Auswahl aus Optionen) Bestimmt, wie das Bild skaliert oder zugeschnitten wird, um in die angegebene Breite und Höhe zu passen (falls gesetzt). Dies ist entscheidend, um das Verhalten des Bildes zu steuern, wenn sein Seitenverhältnis nicht mit den Abmessungen der Komponente übereinstimmt.

  • cover: Das Bild wird so skaliert, dass es den Komponentenbereich vollständig abdeckt, unter Beibehaltung des Seitenverhältnisses. Teile des Bildes können zugeschnitten werden, wenn die Seitenverhältnisse nicht übereinstimmen. Dies ist oft die beste Wahl für Hintergrundbilder.

  • contain: Das Bild wird so skaliert, dass es vollständig innerhalb des Komponentenbereichs unter Beibehaltung des Seitenverhältnissespasst. Es kann Leerraum um das Bild herum geben, wenn die Seitenverhältnisse nicht übereinstimmen. Dies ist oft die beste Wahl, um Bilder ohne Zuschnitt anzuzeigen.

  • fill: Das Bild wird gestreckt oder gestaucht, auf um genau des Komponentenbereichs ohne Beibehaltung des Seitenverhältnisses zu füllen. Dies kann zu Verzerrungenführen. Vermeiden Sie dies, es sei denn, Sie möchten ausdrücklich einen gestreckten/gestauchten Effekt.

  • none: Das Bild wird in seiner Originalgrößeangezeigt. Wenn es größer als der Komponentenbereich ist, wird es abgeschnitten..

• Zuschneidegröße: (Text – Auswahl aus Optionen): Bestimmt die Größe des Zuschneidebereichs.

  • x-klein

  • klein

  • mittel

  • groß

  • sehr groß

  • 2x-sehr groß

  • 3x-sehr groß

  • 4x-sehr groß

• Zuschneideposition X: (Text – Auswahl aus Optionen) Verschiebt den Zuschnitt horizontal.

  • links

  • zentriert

  • rechts

• Zuschneideposition Y: (Text – Auswahl aus Optionen) Verschiebt den Zuschnitt vertikal.

  • Oben

  • Mitte

  • Unten

• Position: (Text – Auswahl aus Optionen) Bestimmt, wie das Bild positioniert wird, wenn es nicht den gesamten Komponentenbereich füllt. Optionen umfassen oft:

  • static

  • relative

  • absolute

  • fixed

Verhalten

• Vergrößerungstyp: (Text – Auswahl aus Optionen) Fügt eine Vergrößerung hinzu.

  • Keine (Standard)

  • standard

  • follow

• Sichtbar: (Boolean) Steuert, ob die Image-Komponente auf der Seite sichtbar ist. Binden Sie dies an eine Boolesche Variable oder Formel für dynamische Sichtbarkeit.

• Deaktiviert (Boolean – Kontrollkästchen): Wenn auf true gesetzt, deaktivieren Sie die Komponente

Beispiele

Beispiel 1: Statisches Bild aus einer URL

-   Bildquelle:  `https://www.example.com/logo.png`
-   Breite:  `200px`
-   Höhe:  `auto`
-   Zuschneideanpassung:  `contain`
-   Quelle:  Firmenlogo

Dies würde das Bild von der URL anzeigen, eine feste Breite von 200 Pixeln setzen und die Höhe automatisch anpassen, um das Seitenverhältnis beizubehalten.

Beispiel 2: Dynamisches Bild aus einem Datensatz (auf einer Kontodatensatzseite)

-   Bildquelle:  `$Component.record.PhotoUrl`  (Dies setzt voraus, dass das Objekt Konto ein Feld namens `PhotoUrl` mit der Bild-URL enthält)
-   Breite: `100%`
-   Höhe: `auto`
-   Zuschneideanpassung: `cover`
-   Quelle:  Konto-Foto

Wenn die Zielobjektseite auf Kontogesetzt ist, können Sie die Bildquelle auf $Component.record.PhotoUrl binden, um das aktuelle Konto-Foto anzuzeigen. Das Setzen von Breite auf 100% und das Belassen von Höhe leer (oder auto) bewahrt das Seitenverhältnis, während Zuschneideanpassung: cover sicherstellt, dass das Bild den verfügbaren Raum füllt und dabei möglicherweise zugeschnitten wird.

Beispiel 3: Anzeige eines Bildes aus einer Variable.

1. Erstellen Sie eine Variable namens imageUrl vom Typ Text.

2. Fügen Sie eine „Beim Laden“-Interaktion hinzu, um den Variablenwert mit einer statischen Bild-URL zu setzen.

3. Fügen Sie eine Bildkomponente hinzu.

4. Setzen Sie die Bildquelle an den Variablenwert, @imageUrl

5. Wichtige Überlegungen

   • Bild-URLs: Stellen Sie bei Verwendung von URLs sicher, dass sie gültig und für die Benutzer zugänglich sind.

   • Statische Ressourcen: Für Bilder, die Teil des Designs Ihrer Anwendung sind, wird zur Leistungs- und Sicherheitsoptimierung im Allgemeinen die Verwendung statischer Ressourcen empfohlen.

   • Seitenverhältnis: Achten Sie auf das Seitenverhältnis des Bildes und darauf, wie Sie die Breite, Höheund Zuschneideanpassung Eigenschaften setzen, um Verzerrungen zu vermeiden.

   • Barrierefreiheit: Binden Sie immer geben Sie aussagekräftigen Alternativtext in der Quelle Eigenschaft an.

   • Dynamische Bilder: Nutzen Sie die Möglichkeit, Bildquelle an Variablen und Formeln zu binden, um dynamische Bildanzeigen zu erstellen.

Zusammenfassung

Die Image-Komponente ist eine einfache, aber leistungsstarke Komponente, mit der Sie jede dynamische Komponente verbessern können, indem Sie ein Bild aus verschiedenen Quellen hinzufügen. Sie können Größe, Position und Zuschnitt anpassen und eine Lupe hinzufügen.