Discourse-Aufkleber

Don · 3. Oktober 2023 um 11:19


	Zusammenfassung	Sticker hinzufügen
	Vorschau	Theme Creator
	Repository	GitHub - VaperinaDEV/discourse-stickers: With this theme component you can add stickers. · GitHub
	War es hilfreich?	> ./support --coffee
	Installationsanleitung	So installierst du ein Theme oder Theme-Component
	Neu bei Discourse Themes?	Einsteiger-Leitfaden für die Nutzung von Discourse Themes

Dieses Theme-Component installieren

Discourse Stickers v1.0

Hallo

Mit diesem Theme-Component kannst du Sticker in Beiträge und Chatnachrichten einfügen…

Wie funktioniert es?

Es fügt einen Button in den Composer ein, der das Sticker-Modul öffnet.

Sticker-Modul

Wenn du auf einen Sticker klickst, wird er in den Composer eingefügt.
Der Markdown-Code des Bildes wird in [wrap=sticker] img [/wrap] platziert, was bedeutet, dass Sticker-Bilder separat von anderen Bildern gestylt werden können.

Sticker werden immer in eine neue Zeile gesetzt und enthalten Titel und Größe. Die Größe ist derzeit auf 180x180px festgelegt. Jeder Sticker hat einen Schatten, der das Bild stichiger wirken lässt…
Im Composer und in Beiträgen werden die Hover-Metainformationen per CSS ausgeblendet.

Wie richtet man es ein?

Zuerst musst du die Bilder hochladen, die du für Sticker verwenden möchtest. Lade diese Bilder einfach in einem Themenbeitrag hoch.
Wir arbeiten mit diesen Bildern, da wir die Bild-URL und die Markdown-URL benötigen.

Beispiel:
Ich habe das Bild in einem Beitrag hochgeladen. Ich verwende die optimierte Version der Bild-URL. Diese findet man hier , aber du kannst jede beliebige URL des Bildes verwenden.

Die Markdown-Hochlad-URL in den Klammern

Einstellungen

Sticker-Bilder
In der Einstellung für Sticker-Bilder kannst du die Sticker einrichten…

Titel: Dies ist der Bildtitel und der Alt-Text. Er wird auch in den Markdown-Code als Titel übernommen.

Emoji: Es wird oben rechts an jedem Sticker im Sticker-Modul angezeigt.

previewUrl: Dies ist das Bild, das im Sticker-Modul angezeigt wird.

markdownUrl: Dies ist die zuvor hochgeladene Markdown-URL des Bildes.

Discourse Stickers v2.0

Hallo

Mit diesem Theme-Component kannst du Sticker in Beiträge, Antworten und Chatnachrichten einfügen.

Version 2.0 führt einen neu gestalteten Sticker-Manager mit nativen Bildhochladungen, Sticker-Gruppen, kategoriebasiertem Anzeigeverhalten und chat-spezifischen Steuerelementen ein.

Wie funktioniert es?

Das Component fügt einen Sticker-Button zum Composer hinzu. Ein Klick darauf öffnet den Sticker-Auswahlbereich.

Wenn du einen Sticker auswählst, wird er direkt in den Composer eingefügt.

Für reguläre Beiträge und Antworten werden Sticker wie folgt eingebettet:

[wrap=sticker]![Sticker Titel|180x180](Bild)[/wrap]

Dies ermöglicht es, Sticker-Bilder separat von regulären Bildern zu stylen.

Veröffentlichte Sticker sind nicht klickbar und öffnen nicht die Discourse-Lightbox.

Sticker-Auswahlbereich

Der Sticker-Auswahlbereich unterstützt Gruppen, wenn du eine größere Sammlung von Stickers hast.

Wenn mehrere Gruppen konfiguriert sind, wird oben im Auswahlbereich eine Filterleiste angezeigt.

Sticker ohne Gruppe werden automatisch unter Sonstige abgelegt.

Wenn für den aktuellen Kontext keine Sticker verfügbar sind, zeigt der Auswahlbereich einen Leerzustand an.

Wie richtet man es ein?

Die Sticker-Konfiguration wurde in v2.0 vollständig neu gestaltet.

Du musst Bilder nicht mehr zuerst in einem Thema hochladen oder Bild-URLs manuell kopieren.

Gehe einfach zu den Component-Einstellungen und füge einen Sticker hinzu. Das Feld Bild ermöglicht es dir, den Sticker direkt hochzuladen.

Sticker-Einstellungen

Jeder Sticker kann nun über die folgenden Eigenschaften verfügen:

Titel

Der Name des Stickers. Dies wird als Tooltip und Alt-Text des Stickers verwendet.

Gruppe

Optional. Verwende Gruppen, um deine Sticker zu organisieren und sie im Auswahlbereich zu filtern.

Leer lassen, um den Sticker unter Sonstige abzulegen.

Emoji-Badge

Optional. Zeigt ein kleines Emoji in der Ecke des Stickers an.

Du kannst ein echtes Emoji oder einen Discourse-Shortcode wie :heart: oder :smile: verwenden.

Bild

Das Sticker-Bild.

Lade das Bild direkt über die Einstellung hoch. Dasselbe Bild wird sowohl für den Auswahlbereich als auch für den veröffentlichten Sticker verwendet.

Kategorien

Optional. Beschränkt den Sticker auf bestimmte Kategorien.

Wenn Kategorien ausgewählt sind, wird der Sticker nur im regulären Beitrags-/Antwort-Composer angezeigt, wenn eine dieser Kategorien ausgewählt ist.

Leer lassen, um den Sticker in allen Kategorien verfügbar zu machen.

Diese Einstellung betrifft den Chat nicht.

Aus Direktnachrichten ausblenden

Wenn aktiviert, ist der Sticker in privaten/Direktnachrichten-Chats nicht verfügbar.

Chat-Kanäle

Optional. Beschränkt den Sticker auf bestimmte öffentliche Chat-Kanäle.

Gib die Kanal-IDs durch Kommas getrennt ein.

Zum Beispiel, wenn die Kanal-URL lautet:

/chat/c/channel-name/123

verwende:

123

Leer lassen, um den Sticker in allen öffentlichen/Kategorie-Chat-Kanälen verfügbar zu machen.

Upgrade von v1.x

Wenn du bereits eine ältere Version des Components verwendest, muss du deine Sticker-Sammlung nicht neu erstellen.

v2.0 enthält eine Einstellungsmigration, die die alte sticker_images-Konfiguration automatisch in das neue Format umwandelt.

Die Migration bewahrt auf:

Sticker-Titel
Emoji-Badges
vorhandene hochgeladene Sticker-Bilder

Vorhandene hochgeladene Bilder werden auf ihre ursprünglichen Discourse-Hochladungen zurückverwiesen und in das neue Bild-Feld übernommen.

Die alten Einstellungen previewUrl und markdownUrl sind nicht mehr erforderlich.

Aktualisiere einfach das Component und deine vorhandenen Sticker sollten automatisch migriert werden.

Canapin · 3. Oktober 2023 um 11:52

Hallo Don

Gute Arbeit! Ich habe kurz reingeschaut

Die Verwaltung der Sticker ist etwas mühsam – besonders der Vorschau-Teil –, da es dafür kein spezielles, dediziertes Layout oder keine Funktion gibt (wie es bei Avataren und benutzerdefinierten Emojis der Fall ist), aber ich verstehe, dass das viel mehr Arbeit wäre.

Der Schlagschattenfilter ist deaktiviert, wenn ein GIF gestoppt wird, und erscheint nicht als quadratischer Hintergrund auf dem mittleren Bild hier (ein rechteckiges JPG, das ein Lightbox auslöst):

chrome_k71dGHbeLH

Der Filtereffekt ist wirklich raffiniert, aber ich würde ihn als optionale Einstellung einstufen

Der Sticker-Picker verwendet eine „justified content“-Ausrichtung, wie zum Beispiel:

XXX
 X

Aber ich denke, ich würde eine rechtsbündige Ausrichtung bevorzugen:

XXX
X

Sehr persönliche Meinung, natürlich

Don · 3. Oktober 2023 um 14:10

Danke für das Feedback @Canapin

Ich habe dafür eine neue Einstellung hinzugefügt…
Screenshot 2023-10-03 at 16.04.17

Das wurde auch erledigt… Viel besser

Don · 3. Oktober 2023 um 16:54

Update: DEV: Adding DTooltip to sticker picker modal images · VaperinaDEV/discourse-stickers@b6c30eb · GitHub

mattdm · 28. Oktober 2023 um 15:53

Wäre es möglich, dies auf bestimmte Kategorien zu beschränken? (Und, in diesem Zusammenhang, unterschiedliche Sticker pro Kategorie zu haben?)

hoangphuctran93 · 28. Oktober 2023 um 16:37

Wenn Administratoren Sticker-Gruppen erstellen können und Benutzer die Sticker-Auswahl entsprechend jeder Gruppe ihrer Lieblingsthemen anpassen können.
Und weiter, basierend auf dem installierten Symbol empfehlen, wenn ein Benutzer ein Symbol in einem Artikel verwendet, aber ich denke, dies ist eine schwierige Funktion.

deltaR · 9. November 2023 um 14:12

Darf ich fragen, was ich tun muss, damit der Sticker in der Textzeile und nicht in einer neuen Zeile erscheint? (Ich habe dieses Repository geforkt)

Don · 9. November 2023 um 16:31

Hallo

Ja, Sie müssen das \n vom Anfang und Ende dieser Zeile entfernen.

github.com/deltaR-3k/discourse-stickers

javascripts/discourse/components/modal/sticker.js

main


      
          @tracked stickerImages = JSON.parse(settings.sticker_images);
          @service site;
          @service capabilities;
          
          @action
          pick() {
            let stickerImage = document.querySelectorAll(".sticker-pack span.sticker-holder img.sticker:hover");
            stickerImage.forEach((sticker) => {
              sticker.classList.add("picked");
              sticker.addEventListener("animationend", () => {
                let markupComposer = `![${sticker.alt}|60x52](${sticker.getAttribute("markdownUrl")})`;
                let markupChatComposer = `![${sticker.alt}|60x52](${sticker.getAttribute("markdownUrl")})`;
                if (this.args.model?.customPickHandler) {
                  this.args.model.customPickHandler(markupChatComposer);
                } else {
                  getOwner(this).lookup("service:app-events").trigger("composer:insert-text", markupComposer);
                }
                this.args.closeModal();
              });
            });
          }

Hallo @mattdm Entschuldigung für die Verzögerung. Ja, ich denke, es ist wahrscheinlich möglich, die Schaltfläche pro Kategorie im Composer anzuzeigen. Das muss ich prüfen.

Die Komponente ist bereits etwas komplex einzurichten. Ich bin mir da nicht sicher.

Hallo Ja, das ist eine andere Ebene. Ich bin mir nicht sicher, ob das jetzt mit dieser Implementierung möglich ist.

deltaR · 9. November 2023 um 17:03

Danke für die Antwort!
Aber nach der Änderung kann der Aufkleber nicht angezeigt werden, wie hier

Don · 9. November 2023 um 17:13

Oh, mein Fehler, Entschuldigung. Ich glaube, du solltest [wrap=sticker] und [/wrap] auch entfernen. Es wird das Bild inline anzeigen, also wird es wahrscheinlich nicht fehlen.

Das [wrap=sticker] dient nur dazu, dem Sticker-Bild etwas Stil zu verleihen.

github.com/deltaR-3k/discourse-stickers

common/common.scss

f28fb4b9c


      
          .d-wrap[data-wrap="sticker"] {
            @include user-select(none);
            img {
              width: 75px !important;
              height: 65px !important;
              aspect-ratio: 75 / 65 !important;
              @if $stickers_shadow == "true" {
                filter: drop-shadow(2px 2px 2px rgba(var(--always-black-rgb), 0.8));
              }
            }
            .button-wrapper {
              display: none;
            }
            a.lightbox {
              .discourse-touch & {
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                transition: filter 200ms;
                &:active {
                  filter: brightness(0.8);
                }

This file has been truncated. show original

deltaR · 9. November 2023 um 17:23

Ich verstehe, Inline-Anzeige kann [wrap=sticker] nicht verwenden?
Es funktioniert, danke!

ps: Ich frage mich, ob es möglich ist, die markdownUrl im Composer zu verstecken, da es sich um eine lange URL handelt und zu viel Platz beansprucht?

Don · 14. August 2026 um 14:31

Discourse-Sticker v2.0

Diese Veröffentlichung ist eine ziemlich umfassende Modernisierung des Plugins. Neben einer Reihe interner Verbesserungen wurde die Sticker-Konfiguration neu gestaltet, um das Verwalten größerer Sticker-Sammlungen erheblich zu erleichtern.

Völlig neu gestaltete Sticker-Einstellungen

Die größte Änderung in v2.0 ist die Sticker-Konfiguration selbst.

Die alte Version speicherte Sticker als eine JSON-Einstellung, die Werte wie diese enthielt:

title
emoji
previewUrl
markdownUrl

In v2.0 wurde dies durch den nativen objects-Einstellungstyp von Discourse ersetzt.

Jeder Sticker ist jetzt ein richtig konfigurierbares Objekt mit eigenen Feldern:

Titel – der Sticker-Name / Tooltip-Text
Gruppe – optional können Sticker in Gruppen organisiert werden
Emoji-Abzeichen – optional kann eine kleine Emoji in der Ecke angezeigt werden
Bild – den Sticker direkt über die Einstellung hochladen
Kategorien – optional können Sticker auf bestimmte Kategorien beschränkt werden
In Direktnachrichten ausblenden – steuern, ob ein Sticker in DMs verfügbar ist
Chat-Kanäle – optional können Sticker auf bestimmte öffentliche Chat-Kanäle beschränkt werden

Dies macht die Sticker-Konfiguration viel einfacher zu verstehen und zu warten, insbesondere bei größeren Sammlungen.

Sticker-Gruppen und Filterung

Du kannst Sticker jetzt einer Gruppe zuweisen.

Wenn mehrere Gruppen verfügbar sind, zeigt der Sticker-Auswähler automatisch eine Filterleiste oben an.

Du kannst zwischen folgenden Optionen wechseln:

Alle
einzelne Gruppen
Andere für Sticker ohne Gruppe

Der Filter wird dynamisch aus den aktuell für den Benutzer verfügbaren Stickern generiert.

Kategorie-spezifische Sticker

Sticker können jetzt optional bestimmten Discourse-Kategorien zugewiesen werden.

Wenn für einen Sticker Kategorien konfiguriert sind, erscheint er nur im regulären Beitrags-/Antwort-Editor, wenn eine dieser Kategorien ausgewählt ist.

Wenn keine Kategorien konfiguriert sind, bleibt der Sticker überall verfügbar.

Mehr Kontrolle über Chat-Sticker

v2.0 bietet mehr Kontrolle über die Verfügbarkeit von Stickern in Discourse Chat.

Du kannst jetzt:

einzelne Sticker in Direktnachrichten ausblenden;
Sticker auf bestimmte öffentliche Chat-Kanäle beschränken;
die Kanaleinstellung leer lassen, um einen Sticker in allen öffentlichen/kategorie-spezifischen Chat-Kanälen verfügbar zu machen.

Dies ermöglicht es Administratoren, verschiedene Sticker-Sets für verschiedene Teile ihrer Community zu pflegen.

Veröffentlichte Sticker sind nicht mehr anklickbar

Veröffentlichte Sticker werden jetzt als nicht-interaktive Bilder behandelt.

Sie öffnen beim Klicken nicht mehr die Discourse-Lightbox.

Dies gilt sowohl für:

Sticker in regulären Beiträgen;
Sticker, die im Chat gepostet wurden.

Das Ziel ist es, dass Sticker sich mehr wie tatsächliche Sticker-/Reaktionsinhalte verhalten, anstatt wie normale hochgeladene Bilder.

Besserer leerer Zustand

Wenn keine Sticker für den aktuellen Kontext verfügbar sind, zeigt der Auswähler jetzt einen ordnungsgemäßen leeren Zustand an, anstatt einfach einen leeren Auswähler zu zeigen.

Dies kann beispielsweise passieren, wenn Kategorie- oder Chat-Beschränkungen verhindern, dass ein Sticker verfügbar ist.

Bestehende Sticker-Konfigurationen werden migriert

Einer der wichtigsten Teile von v2.0 ist, dass bestehende Installationen ihre Sticker-Sammlung nicht neu erstellen müssen.

Die alte sticker_images-JSON-Einstellung wird automatisch in das neue objects-Format migriert, wenn das Plugin aktualisiert wird.

Bestehende Sticker-Titel und Emoji-Werte werden beibehalten.

Wichtigster Punkt: Auch bestehende hochgeladene Sticker-Bilder werden automatisch migriert.

Wenn du also bereits Dutzende von Stickern konfiguriert hast, erfordert das Update auf v2.0 nicht, dass du sie alle erneut hochlädst.

Die alte markdownUrl-Eigenschaft wird nicht mehr benötigt und wird nicht übernommen, da das neue Image-Feld den tatsächlichen Discourse-Upload darstellt.

github.com/VaperinaDEV/discourse-stickers

FEATURE: Modernize Discourse Stickers (#5)

main ← v2.0

merged 02:27PM - 14 Aug 26 UTC

VaperinaDEV

+424 -126

Modernizes the component and significantly expands sticker management. ### Wh…at's included - Migrate `sticker_images` from the legacy JSON setting to Discourse's native `objects` setting. - Add native image uploads for stickers. - Add optional sticker groups with filtering in the picker. - Add category-based sticker visibility. - Add Chat-specific visibility controls for direct messages and channels. - Modernize the sticker modal to Glimmer. - Improve sticker selection by passing the selected sticker directly to the action. - Prevent published stickers from opening the lightbox. - Add a proper empty state when no stickers are available. - Add localization for the new UI and settings. - Add a settings migration that preserves existing sticker titles, emojis, and uploaded images when upgrading from the previous version. ### Migration Existing `sticker_images` configurations are automatically migrated when the component is updated. Legacy sticker image URLs are resolved back to their existing Discourse uploads, so existing stickers do not need to be uploaded again. The legacy `markdownUrl` property is no longer used because the new `image` property directly represents the sticker upload.

Thema		Antworten	Aufrufe
Telegram-like stickers? Feature	8	1993	25. Januar 2024
Discourse Chat Plugin official , chat , included-in-core	43	34312	29. Juli 2026
Image comparison slider Theme component	31	3911	6. Juni 2026
Emoji Fluff Theme component	39	1738	28. November 2025
MD Composer extras Theme component	70	9904	8. Juli 2025

Discourse-Aufkleber

Discourse Stickers v2.0

Wie funktioniert es?

Sticker-Auswahlbereich

Wie richtet man es ein?

Sticker-Einstellungen

Upgrade von v1.x

Discourse-Sticker v2.0

Völlig neu gestaltete Sticker-Einstellungen

Sticker-Gruppen und Filterung

Kategorie-spezifische Sticker

Mehr Kontrolle über Chat-Sticker

Veröffentlichte Sticker sind nicht mehr anklickbar

Besserer leerer Zustand

Bestehende Sticker-Konfigurationen werden migriert

Verwandte Themen