Assets mit Smart CDN einbetten

Durch das Einbetten eines einzigen Assets in Ihre Website oder Ihre Landingpages können Sie das Asset auf mehreren Seiten bequem aktualisieren und für alle Benutzer*innen zugänglich machen.

Wer kann das nutzen?

Pläne:

  • Brandfolder

Berechtigungen:

  • Inhaber
  • Admin

Find out if this capability is included in Smartsheet Regions or Smartsheet Gov.

Mit Brandfolder Smart CDN können Sie Assets im gesamten Web einbetten und sie im Handumdrehen formatieren, um Ihre spezifischen Anforderungen zu erfüllen. CDN-Links sorgen dafür, dass Ihre Inhalte immer die neuesten Änderungen an Ihrem Brandfolder-Asset widerspiegeln.

CDN-Links sind Brandfolder-spezifisch. Sie können Assets im Brandfolder verschieben und der CDN-Link bleibt unverändert. Wenn Sie ein Asset jedoch in einen anderen Brandfolder verschieben, ändert sich die URL und Sie benötigen einen neuen CDN-Link. 

CDN aktivieren

Inhaber*innen und Admins können CDN in ihrem Konto aktivieren.

  1. Wählen Sie Einstellungen > Allgemeine Einstellungen aus.
  2. Wählen Sie den Tab Plus aus.
  3. Achten Sie darauf, dass CDN-Einbettungs-Links aktiviert sind.

Die CDN-Verlinkungsfunktion ist für alle ausstehenden, abgelaufenen, vorläufigen oder schreibgeschützten Assets deaktiviert. Der Tab Einbetten und Zugeschnittener CDN-Link werden nur angezeigt, wenn Assets genehmigt wurden.

Einzelnes Asset einbetten

Durch das Einbetten eines einzelnen Assets in Ihre Website oder Ihre Landingpages können Sie das Asset auf mehreren Seiten bequem aktualisieren und für alle Benutzer*innen zugänglich machen.

  1. Öffnen Sie eines Ihrer Asset-Modale.
  2. Wählen Sie den Tab Einbetten aus. 
  3. Kopieren Sie die URL und fügen Sie sie ein. 

CDN-URL-Einbettungsoptionen:

  • CDN-Link – Anlage: Dadurch können Benutzer*innen die Anlage einbetten, ohne sich Gedanken über die Position machen zu müssen. Es handelt sich um einen direkten Link zur Anlage und die am besten optimierte Version des Assets. Ein benutzerdefinierter Satz von Parametern kann auch standardmäßig zu allen Anhang-URLs hinzugefügt werden.

Weitere Optionen, die unter zusätzlichen CDN-Links verfügbar sind:

  • CDN-Link – Asset: Betten Sie eine Anlage ein, die je nach Position im Verhältnis zu den anderen Anlagen aktualisiert wird.
  • CDN-Link – Anlage (Originaldatei): Diese URL verweist auf die Anlagen-CDN-URL der Originaldatei ohne vordefinierte Anlagen oder Optimierungen (Parameter).
  • CDN-Link – Frame: Die Größe wird automatisch basierend auf dem Container geändert, in dem sich das Asset befindet.
embed asset using smart cdn

Sie können diesen Link in einem Bild-Tag wie platzieren. Wenn Sie das Asset aktualisieren, wird der Link aktualisiert, wo immer er sich befindet. Wenn ein Asset mehrere Anlagen hat, wird die oberste Anlage über diesen Link angezeigt.

Benutzerdefinierte voreingestellte CDN-Links

Smart CDN-Voreinstellungen erstellen automatisch Wiedergaben in einem automatisch fokussierten und zugeschnittenen CDN-Link-Format. Sie können auch benutzerdefinierte Zuschneidevorgaben im Einbetten-Tab aktivieren.  Sobald eine Voreinstellung aktiviert ist, erweitern Sie das Menü für benutzerdefinierte voreingestellte CDN-Links. Wählen Sie die Schaltfläche Link kopieren neben der gewünschten Voreinstellung aus und fügen Sie ihn an der gewünschten Stelle ein. 

embed asset using smart cdn

Benutzerdefinierte CDN-Links (nach Dateiname)

Sie können benutzerdefinierte CDN-Links mit einem bekannten Bezeichner (z. B. Dateiname) der hochgeladenen Dateien erstellen oder einrichten. SmartCDN unterstützt den Pfad //fn/, wobei:

  • CDN-KEY mit einem Brandfolder in Ihrem Unternehmen verknüpft ist, der sich im Tab Einbetten Ihres Assets im Abschnitt „Attachment CDN URL“ (Anlagen-CDN-URL) befindet. 
  • der Dateiname der Name Ihrer Datei ist (der bekannte Bezeichner). 

Diese CDN-Links sind nützlich, wenn Sie eine große Anzahl von Assets haben und deren Verteilung über SmartCDN programmatisch bewältigen. 


Sie können entscheiden, wie Sie Ihre Dateien benennen möchten, aber es wird empfohlen, innerhalb eines Brandfolders eindeutige Dateinamen zu verwenden, um Missverständnisse zu vermeiden. Wenn Dateinamen doppelt vergeben werden, wird die neueste Version/Datei über die CDN-URL bereitgestellt.
 

SmartCDN unterstützt die folgenden Zeichen ohne URL-Codierung:

  • Alphanumerische Zeichen: A–Z, a–z, 0–9
  • Andere nicht reservierte Zeichen: -, ., _, ~
  • Sonderzeichen wie: * < > | += % $ & /  können verwendet werden, wenn die URL codiert wird. 


WICHTIG: Wenn sich ein Dateiname ändert, muss die CDN-URL an den neuen Dateinamen angepasst werden. Wenn ein Asset gelöscht wird, gibt die URL die Fehlermeldung 404 aus. Wenn Sie die benutzerdefinierten CDN-Links aktivieren, ändert sich nichts an der CDN-URL-Vorschau, die im Tab Einbetten Ihres Assets verfügbar ist. Diese Funktion wird programmatisch verwendet und kann nicht über brandfolder.com aufgerufen werden.
 

Um benutzerdefinierte CDN-Links zu aktivieren, kontaktieren Sie brandfoldersupport@smartsheet.com.  

Erweiterte Smart-CDN-Funktionen

Assets zuschneiden 

Sie können ein Bild auf die gewünschte Größe zuschneiden und dann den CDN-Link des zugeschnittenen Bildes kopieren. 

embed asset using smart cdn

Transformation und Anpassung:

Sie können auch CDN-Links von zugeschnittenen Bildern erstellen, indem Sie die Parameter in der URL anpassen. 

Angenommen, Sie haben eine Smart CDN-URL wie https://cdn.brandfolder.io/YUHW9ZNT/as/6skcfbkq/brandfolder_icon_aqua.png.

 

Wenn Sie dasselbe Bild mit bestimmten Abmessungen wünschen, geben Sie dies einfach in der URL an, z. B.: https://cdn.brandfolder.io/YUHW9ZNT/as/6skcfbkq/brandfolder_icon_aqua.png?width=150.

 

Möchten Sie ein JPG anstelle eines PNG? Ändern Sie einfach die Erweiterung am Ende der URL: https://cdn.brandfolder.io/YUHW9ZNT/as/6skcfbkq/brandfolder_icon_aqua.jpg

Benötigen Sie eine größere Version Ihrer Datei? Erhöhen Sie die Parameter für Höhe oder Breite in der URL und fügen Sie &pad=true hinzu, um das Originalbild mit Leerraum zu versehen.

Bei transparenten Assets fügen einige integrierte Browser-Viewer automatisch einen Hintergrund (in der Regel weiß) ein. 

Automatische Erweiterung:

Brandfolder-CDN ermöglicht die Verwendung der Erweiterung .auto für v1 oder auto=webp für v2. Wir wählen automatisch das beste Format für das Laden des Bildes im Browser aus.  Dazu gehört das Zurücksenden von Bildern im WEBP-Format, das die Größe eines Bildes verlustfrei verringert und das Laden des Bildes auf Ihrer Website beschleunigt.

Mit Smart CDN können Sie jede Anlage innerhalb Ihres Assets verlinken, nicht nur die erste. Angenommen, Ihr Asset hat mehrere Anlagen und Sie möchten die vierte Anlage verlinken, geben Sie das entsprechend an, indem Sie „?position=4“ an Ihre CDN-URL anhängen: https://cdn.brandfolder.io/C0KGG2P6/as/pd20zo-6xxwds-g0sj9j/CDN%20Example.png?position=3.

Verwenden Sie eine beliebige Kombination der oben genannten Optionen, um Ihren CDN-Link zu ändern und Ihre Brandfolder-Anlagen genau so zu gestalten, wie Sie sie für Ihren Anwendungsfall benötigen.

Live-Aktualisierung:

Jedes Mal, wenn Sie ein Asset in Brandfolder aktualisieren, werden auch die zugehörigen Smart CDN-Links aktualisiert, um diese Änderungen widerzuspiegeln.

Automatisches Ablaufen:

Wenn das Asset in Brandfolder abläuft, nicht mehr genehmigt oder gelöscht wird, läuft auch der Smart CDN-Link automatisch ab (er kann bis zu 24 Stunden lang zwischengespeichert bleiben).

Video-Assets einbetten

Das Einbetten von Video-Assets unterscheidet sich geringfügig vom Einbetten von Bild-Assets.  Brandfolder bietet einen einfachen iframe mit unserem darin eingebetteten Videoplayer.  Benutzer*innen können die Größe des iframe und mehrere optionale Parameter für Videos steuern.

Beispiel für eingebetteten Code

Schleife

Ermöglicht das Abspielen eines Videos in einer Schleife, nachdem die Wiedergabe beendet ist.

  • loop
  • default: false
  • options: boolean - true or false

Stummschaltung

Bestimmt, ob der Ton beim Laden des Players stummgeschaltet ist.  Dies ist nützlich, wenn Sie die Einstellungen für die automatische Wiedergabe aufgrund von Einschränkungen für die automatische Wiedergabe im Browser verwenden.

  • muted
  • default: false
  • options: boolean - true or false

Automatische Wiedergabe

 Video beim Laden automatisch abspielen.

  • autoplay
  • default: false
  • options: boolean - true or false

Die Verwendung von Brandfolder zur automatischen Wiedergabe eines Videos beim Laden einer Seite ist nicht einfach. Dies ist darauf zurückzuführen, dass die Browserhersteller dem Wunsch der Anwender*innen nachgekommen sind, Videos nicht automatisch abzuspielen. Die zuverlässigste Methode ist die Einstellung von autoplay=true&muted=true, da viele Browser (einschließlich Chrome) Videos nicht automatisch mit Ton abspielen.

Achten Sie darauf, das Asset nicht zu löschen, wenn Sie diese Funktion verwenden!