Autor und Poster der Diskurs-Themenliste

:information_source: Zusammenfassung Fügt den Autor eines Themas in die linke Spalte der Themenlisten-Seiten ein und bietet zudem eine Option, nur den neuesten Beitragenden in der Standardspalte für Beitragende anzuzeigen. Der Avatar des Autors kann zudem in Größe und Form angepasst werden.
:eyeglasses: Vorschau https://discourse.theme-creator.io/theme/Lilly/discourse-topic-list-author-posters
:hammer_and_wrench: Repository https://github.com/Lillinator/discourse-topic-list-author-posters
:question: Installationsanleitung So installieren Sie ein Theme oder eine Theme-Komponente

Diese Theme-Komponente installieren

:woman_technologist:t2: Überblick

Diese Discourse-Theme-Komponente fügt den Avatar des Thementhe-Autors in die erste Spalte aller Routen für Themenlisten ein und verfügt über Einstellungen, mit denen der Administrator Form und Größe des Avatars festlegen kann. Zudem wird der Avatar des Autors nicht als erster Avatar in der Liste der Beitragenden angezeigt.

Es gibt zudem eine Einstellung, damit die Spalte für Avatare der Beitragenden nur den letzten (neuesten) Beitragenden anzeigt, jedoch nur, wenn mehr als ein Teilnehmer am Thema beteiligt ist. Der Avatar des Autors wird somit nur angezeigt, wenn weitere Beitragende im Thema vorhanden sind.

Zusätzlich können Administratoren wählen, den Autor des Themas auf der Kategorie-Seite anzuzeigen, wenn die Ansicht der neuesten Themenlisten aktiviert ist (d. h.: „Kategorien mit neuesten Themen“). Auch hier gibt es Optionen für die Größe und Form des Avatars.

Weiterhin gibt es einen Umschalter zur vertikalen Ausrichtung des Zeileninhalts oben oder mittig.

Auf kleinen Bildschirmdarstellungen (mobil) erscheint der Autor dort, wo normalerweise der Avatar des neuesten Beitragenden angezeigt wird.

Diese Komponente funktioniert gut mit Topic List Excerpts und Discourse AI summary gists.

:gear: Einstellungen

Screenshot der Einstellungen mit Standardoptionen auf der Administrationsseite der Komponente

Einstellungen Beschreibung
Topic list author avatar size Größe der Avatare in der Spalte für den Autor auf den Routen der Themenlisten – small, medium oder large.
Topic list author avatar border radius Abrundung der Avatare auf den Routen der Themenlisten: 0% = quadratisch → 50% = rund. tab_style = abgerundete linke Ecken
Topic list show last poster only Zeigt nur den Avatar des letzten Beitragenden in der Spalte für Beitragende an, jedoch nur, wenn mehr als ein Teilnehmer am Thema beteiligt ist.
Vertically align row top Umschalter zum Ausrichten der Zeilen oben oder mittig
Show author on categories page Zeigt den Avatar des Autors anstelle des neuesten Beitragenden in Themenlisten auf der Kategorie-Seite an.
Category page topic avatar size Größe der Avatare in der Spalte für den Autor in Themenlisten auf der Kategorie-Seite – small, medium oder large.
Category page avatar border radius Abrundung der Avatare auf der Kategorie-Seite: 0% = quadratisch → 50% = rund. tab_style = abgerundete linke Ecken

:camera_flash: Screenshots

Hier sind einige Screenshots mit verschiedenen Einstellungen für Avatar-Größe und -Form, die zudem erweiterte AI-Summary-Gists zeigen.

Screenshots verschiedener Themenlisten-Seiten mit aktivierten Komponenteneinstellungen, die sowohl den kompakten als auch den erweiterten Gist-Modus sowie die ein- bzw. ausgeklappte Seitenleiste zeigen

Mit Standardeinstellungen:

Große Avatar-Form mit tab_style und erweiterten Summary-Gists:

Kleine Avatare mit 15% Border-Radius-Form und aktiviertem Topic_list_show_last_poster_only:

Mittelgroße Avatare mit 0% Border-Radius (quadratisch), aktiviertem Topic_list_show_last_poster_only und erweiterten Summary-Gists:

Screenshots der Kategorie-Seite mit zwei verschiedenen Größen und Formen von Avataren für Autor oder letzten Beitragenden.

Standardeinstellungen der Komponente mit mittelgroßen runden Avataren und aktiviertem Show_author_on_categories_page:

Große Avatare mit tab_style-Form und deaktiviertem Show_author_on_categories_page:

Screenshot der mobilen Ansicht

Mit tab_style-Avataren für den Autor:


:backhand_index_pointing_right:t3: Hinweise

  • Fügt den Avatar des Autors ein und ändert die Spalte für Beitragende dort, wo dies auf den Registerkarten der Profilseite erwartet wird.
  • Das Verhalten auf mobilen Geräten entspricht dem Standard in den Listen im Themenfuß (vorgeschlagene/verwandte Themen) sowie auf den Registerkarten für Profil und Posteingang.
  • Nicht wirklich kompatibel mit dem Horizon-Theme. :slight_smile:

:bulb: Mögliche zukünftige Aufgaben

  • Umschalter zum Deaktivieren auf mobilen Geräten hinzufügen?
  • Ausnahmen für Kategorien und Tags?
  • Unterstützung für Links-nach-Rechts?
  • Avatare der Beitragenden formen?

:hugs: Wie immer vielen Dank an @Moin für die Idee, das Feedback und die Hilfe beim Debuggen.


Schauen Sie sich meine anderen Discourse-Projekte an
13 „Gefällt mir“

Vielen Dank für die Erstellung, es hat sofort ein potenzielles Problem für mich gelöst!

Vielleicht ist dies bereits geplant, ich wollte nur erwähnen, dass mir aufgefallen ist, dass der Abstand und die Ausrichtung der Poster-Avatar-Spalte auf der linken Seite eine seltsame Einrückung aufweisen (die auf Mobilgeräten nicht vorhanden ist, wenn die Komponente deaktiviert ist, zum Vergleich). Dies sieht so aus, als ob das text-align-Attribut von td.posters auch das Bild beeinflusst.
Die Ausrichtung der Poster-Avatar-Liste ändert sich ebenfalls, wenn sie aktiviert ist, und dies sieht so aus, als ob die Ausrichtung von td.topic-list-data die Standardeinstellung überschreibt. Es ist einfach genug, Änderungen am Stylesheet auf meiner Seite vorzunehmen, wenn Sie mit diesen ansonsten zufrieden sind.

Fantastische Komponente, nochmals vielen Dank.

1 „Gefällt mir“

Danke für den Bericht, ich habe gerade einen Fix gepusht. Aktualisieren Sie die Komponente und lassen Sie mich wissen, ob das hilft.

1 „Gefällt mir“

Die Avatar-Linksbündelung ist auf dem Desktop besser. Ich habe dieses CSS hinzugefügt, um die Spalte des mittleren Posters meinen Präferenzen anzupassen:

td.posters.topic-list-data {
    vertical-align: middle !important;
}

Ich denke, Ihre zukünftige Deaktivierung für Mobilgeräte wird auch helfen, da das Styling etwas mehr Leerraum verwendet als nötig.

[quote=“jordanjay29, post:4, topic:394364”]Die Avatar-Linksbündelung ist auf dem Desktop besser. Ich habe diesen CSS-Code hinzugefügt, um die Spalte des mittleren Posters nach meinen Wünschen anzupassen:

[/quote]
Die vertikale Ausrichtung oben ist beabsichtigt, um konsistent mit dem Rest der Themenkarte zu sein, und wird nicht geändert.
Ich habe keine Änderungen für Mobilgeräte vorgenommen, aber ich werde es mir ansehen.

Die vertikale Ausrichtung wurde möglicherweise zu breit in Ihrem CSS angewendet und muss wahrscheinlich nur auf die custom-author-column abzielen, wo Sie td.topic-list-data verwenden. Ich vermute, dass die Änderung des Ziels auf td.custom-author-column.topic-list-data das Problem beheben und die Notwendigkeit benutzerdefinierter Formatierung auf meiner Seite beseitigen wird.

Nein, ich beabsichtigte, dass die Spalte „Poster“ zusammen mit allen anderen Zeilenelementen oben vertikal ausgerichtet wird. Sie wirkt mittig ausgerichtet deplatziert (besonders wenn man Auszüge oder KI-Gists aktiviert), aber ich nehme an, es ist Geschmackssache, also können Sie es nach Belieben anpassen.

Ich habe eine kleine Änderung für Mobilgeräte eingespielt.

3 „Gefällt mir“

Da mein Forum keine Auszüge, Gists oder KI-Zusammenfassungen verwendet, wird das Standard-Discourse-Aussehen bevorzugt. Diese Änderung scheint mir eher in eine dedizierte Theme-Komponente zu gehören, aber wir sind uns uneinig, und ich habe es auf meiner Seite behoben, also keine böse Überraschung.

Mobil sieht etwas besser aus, danke!

@jordanjay29 nach weiterem Nachdenken habe ich mich entschieden, einen Ausrichtungsumschalter hinzuzufügen (ganz einfach).

Hier, bitte schön :slight_smile:

Es gibt eine neue Einstellung Vertikale Ausrichtung der Zeile oben, die Sie deaktivieren können, um die Standardeinstellung in der Mitte zu erhalten. Lassen Sie mich wissen, ob das für Sie funktioniert.


4 „Gefällt mir“