Wie füge ich Bilder zu einer Vorlage hinzu

In DocuGenerate können Sie nicht nur dynamischen Textinhalt erstellen, sondern auch dynamische Bilder zu Ihren Vorlagen hinzufügen. Diese Funktion ermöglicht es Ihnen, Ihre Dokumente durch einzigartige Bilder aus Ihrer Datenquelle weiter zu personalisieren. Die akzeptierten Bildformate sind PNG, JPEG, HEIC und SVG.

Bilder per URL hinzufügen

Um ein Bild zu Ihrer Vorlage hinzuzufügen, verwenden Sie einen Tag, der mit % beginnt, z.B. [%image], [%logo] oder [%user.profile_picture]. Betrachten wir folgende Vorlage:

Company logo
[%logo]

Ihre JSON-Daten sollten ein logo-Feld enthalten, das auf die URL des Bildes verweist. Stellen Sie sicher, dass der JSON-Schlüssel das Zeichen % nicht enthält – er muss "logo" sein, nicht "%logo":

[{
  "logo": "https://www.docugenerate.com/assets/images/logo/docugenerate.png"
}]

Wenn die Vorlage verarbeitet wird, ersetzt DocuGenerate den Tag [%logo] durch das tatsächliche Bild, das von der angegebenen URL abgerufen wurde. Das Ergebnis sieht so aus:

Falls das Bild aus irgendeinem Grund nicht abgerufen werden kann und die Anfrage erfolglos ist, wird das Bild bei der Dokumentgenerierung einfach ignoriert.

Bilder als Base64 hinzufügen

Das Bild kann auch im Base64-Format kodiert sein. In diesem Fall müssen Sie das Bild auf Ihrer Seite in Base64 konvertieren, bevor Sie es in Ihrer Vorlage verwenden.

This is a smiley
[%image]

Für dieses Beispiel sollten Ihre JSON-Daten wie folgt aussehen. Stellen Sie sicher, dass der JSON-Schlüssel das Zeichen % nicht enthält – er muss "image" sein, nicht "%image":

[{
  "image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0..."
}]

In den JSON-Daten enthält das image-Feld eine Base64-kodierte Zeichenfolge, die das Bild repräsentiert. Bei der Verarbeitung der Vorlage ersetzt DocuGenerate den Tag [%image] durch das tatsächliche Bild, wie in der Base64-Zeichenfolge definiert.

Bitte beachten Sie, dass die Größe der Base64-kodierten Zeichenfolge die Größe der JSON-Daten beeinflusst. Seien Sie vorsichtig bei der Verwendung großer oder hochauflösender Bilder, da diese die Größe Ihrer JSON-Daten erheblich erhöhen können.

Bilder verkleinern oder vergrößern

Standardmäßig werden Bilder mit ihren ursprünglichen Abmessungen zur Vorlage hinzugefügt. Sie können die Bildgröße jedoch mit der folgenden Syntax anpassen. Dazu müssen Sie die erweiterte Syntax für Ihre Vorlage aktivieren:

[%image | size:'width':'height']

• Der Wert width ist eine ganze Zahl, die die Bildbreite in Pixeln angibt. Sie können auch 'auto' verwenden, um die Breite automatisch basierend auf der Bildhöhe zu bestimmen, während das Seitenverhältnis beibehalten wird.

• Der Wert height ist eine ganze Zahl, die die Bildhöhe in Pixeln angibt. Ebenso können Sie 'auto' verwenden, um die Höhe automatisch basierend auf der Bildbreite zu bestimmen, während das Seitenverhältnis beibehalten wird.

Beispiele:

[%image | size:200:100]
[%image | size:200:'auto']
[%image | size:'auto':100]

Diese Beispiele zeigen, wie Sie bestimmte Abmessungen festlegen oder automatische Skalierung für Breite oder Höhe verwenden können.