Wie kann ich eine Lottie-Animation auf der Startseite platzieren?

Unterstützung
1

Hallo!

Ich habe eine animierte Version meines Logos entworfen. Schaut mal hier vorbei!

Ich habe sie in eine .json-Datei (als Lottie-Animation) umgewandelt und möchte diese Animation in meinem Header platzieren.
Es sollte möglich sein, dies nur durch Einfügen dieses Codeblocks auf meiner Seite zu tun:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets3.lottiefiles.com/packages/lf20_KrQ5B2.json"  background="transparent"  speed="1"  style="width: 600px;" autoplay >
</lottie-player>

Aber wenn ich das in meinem Discourse-Projekt tue, funktioniert es nicht.
Ich verstehe nicht warum, denn es ruft eine externe Ressource auf, also sollte es unabhängig von der Discourse-Umgebung sein, oder?

Ich habe in anderen Themen gelesen, dass Discourse-Benutzer keine Lottie-Animationen anstelle von Kategorie-Icons verwenden konnten.
Aber in meinem Fall verstehe ich nicht, warum es nicht funktioniert (wenn ich den Code in mein body-Tag einfüge, sollte es funktionieren).

Könnte mir jemand bitte helfen? :slight_smile:

2

Ich bin mir nicht sicher, wie man die Animation für dein Logo verwendet, aber damit das Skript auf deiner Discourse-Website ausgeführt wird, musst du https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js zu deiner Site-Einstellung „Content Security Policy script-src“ hinzufügen. Wenn ich das tue und das Skript im Header-Bereich meines Themes hinzufüge, wird die Animation für mich angezeigt.

3

Es funktioniert einwandfrei! Danke für deine Antwort :slight_smile: