Vorschauen der Themenliste (TLP)

[merefield (Robert)]

Dies ist eine Theme-Komponente mit der Option, ein ergänzendes Plugin hinzuzufügen.

|||
-|-|-|
| Zusammenfassung | Die ursprüngliche Topic Preview-Komponente, mit der Sie Bilder und Auszüge (und mehr!) zur Topic-Liste hinzufügen können, während Sie konfigurieren können, welche Ergänzungen in welcher Liste erscheinen.
| Repository-Link | GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists
| Installationsanleitung | Installing a theme or theme component
| Sponsoring | Bitte erwägen Sie, ein fortlaufender Sponsor meiner Open-Source-Arbeit zu werden, auf einem Niveau, das den Ressourcen und Bedürfnissen Ihrer oder Ihrer Organisation entspricht, um sicherzustellen, dass diese Komponente die Wartung erhält, die sie verdient, und auch in Zukunft für Ihre Website funktioniert.

Gefällt Ihnen diese Theme-Komponente? Bitte Sie sie auf GitHub

Installieren Sie diese Theme-Komponente

Funktioniert sehr gut mit Discourse Bars 🍻 🍸 (a sidebar framework)!

Übersicht

Topic List Previews ermöglicht es Ihnen:

• Bilder, Auszüge und Topic-Statistiken zu Topic-Listenelementen hinzuzufügen; und
• das Layout und den Stil von Topic-Listenelementen zu ändern
• ‘Featured’ Topics über Topic-Listen und Topics hinzuzufügen.
• User Wall zur Aktivitätsseite des Benutzers hinzuzufügen (auch bekannt als ‘Portfolio’-Funktion).

Das Sidecar

Dies kann durch das ‘Sidecar-Plugin’ ergänzt werden: https://github.com/merefield/discourse-topic-previews-sidecar

um die folgenden Funktionen hinzuzufügen:

• ‘Aktionen’ (Lesezeichen setzen, Verknüpfen und Liken aus der Topic-Liste)
• Thumbnail-Auswahl im Topic Meta Editor. (Wählen Sie jedes beliebige Thumbnail aus dem gesamten Topic mit einer einfachen Benutzeroberfläche aus)
• Farbgebung des Hintergrunds basierend auf der dominanten Farbe des Thumbnails
• Verarbeitung von YouTube-Thumbnails zur Entfernung schwarzer Ränder (entscheidend für die Bestimmung der besten dominanten Farbe).
• Option zur Neuerstellung von Thumbnails beim Wiederaufbau von Topic-Posts, damit Sie die Randentfernung schnell auf Topic-Basis verwalten können.

Plugin-Installationsanleitung: Install plugins on a self-hosted site

Sie benötigen mindestens die Theme-Komponente, das Plugin ist optional.

Diese Einstellungen können für alle oder ausgewählte Topic-Listen auf Website-weiter oder Kategorie-spezifischer Basis angewendet werden.

Diese flexible Funktionssammlung ermöglicht es Ihnen, eine Vielzahl von verschiedenen Topic-Listenstilen zu erstellen, darunter

Basis-Stil

Relevante Einstellungen

• topic list thumbnail
• topic list excerpt
• topic list action

Pinterest (Masonry) Stil aka ‘Kacheln’

Relevante Einstellungen

• topic list tiles
• topic list thumbnail
• topic list excerpt
• topic list action
• topic list thumbnail width
• topic list thumbnail height

welches eine Breitformatoption hat (hinter der Einstellung topic_list_tiles_wide_format):

Dies funktioniert responsiv und bricht bei zu geringer Breite in das Masonry-Format zusammen (und umgekehrt).

Featured Images

Relevante Einstellungen

• topic list featured images tag
• topic list featured images count
• topic list featured width
• topic list featured height
• topic list featured title
• topic list featured excerpt
• topic list featured order

Umschalten von Auszügen:

Ich habe dies vor einiger Zeit für die Verwendung mit meinem AI Topic Summaries Plugin eingeführt.

Sie können es für TLP verwenden:

GitHub - merefield/discourse-tc-excerpts-toggle: A small Discourse theme component that adds a...

Beispiele in Aktion

• StarZen - Eine inoffizielle Star Citizen-Fangemeinde
• https://www.artofsm.art/

Unterstützung

Ich biete keine garantierte kostenlose Unterstützung. Ich kann Unternehmen oder Institutionen Unterstützung anbieten, die sich für eine meiner GOLD- oder PLATINUM-monatlichen Sponsoring-Stufen anmelden.

Es gibt auch eine Einmalige Bug-Hunt-Option.

[raghukamath (Raghavendra Kamath)]

Gibt es eine Möglichkeit, die Reihenfolge der hervorgehobenen Bilder basierend auf der Zeit, zu der das Tag hinzugefügt wurde, festzulegen? Derzeit wird das hervorgehobene Bild des Themas mit der neuesten Aktivität angezeigt, wodurch die neuesten getaggten Bilder nach unten verschoben werden.

Wenn ich zum Beispiel 10 Bilder habe und 5 davon als hervorgehoben markiere, werden diese 5 in der oberen Leiste angezeigt. Wenn ich 5 weitere Tags hinzufüge, ersetzen diese die vorhandenen 5. Wenn jedoch eines der vorherigen 5 Themen Kommentare oder Beiträge hat, wird dieses Bild nach vorne gebracht.

[merefield (Robert)]

Etikett? Nein, aber es gibt diese Option, nach Erstellungsdatum zu sortieren:

[merefield (Robert)]

Warnung: Ich werde sehr bald eine Änderung am Layout von Kacheln (Element) vornehmen. Wenn Sie einige CSS-Anpassungen vorgenommen haben, müssen diese möglicherweise … äh … angepasst werden:

Ich verspreche, dass ich dies nicht sehr oft tun werde, aber diese Änderung dient dazu, die Dinge aufzuräumen und einige neue Funktionen zu ermöglichen, die in Zukunft erscheinen könnten …

Derzeit ist die Änderung auf dem beta-Zweig.

[raghukamath (Raghavendra Kamath)]

Ja, diese Option hilft ein wenig, aber wenn ältere Beiträge aktualisiert werden, rücken sie nach vorne.

[merefield (Robert)]

Ich nutze nur die nativen Optionen der Discourse API (es ist im Grunde eine Theme Component, daher kann man die API nicht ändern). Wenn ich Zeit habe, werde ich mir die Reihenfolge noch einmal ansehen. Dies kam jedoch vor einiger Zeit auf und ich habe eine Änderung vorgenommen, um einem der Benutzer zu helfen. Topic List Previews (legacy) - #1154 by merefield. Ich bin überrascht, dass dies nicht wie spezifiziert funktioniert. Man würde erwarten, dass das created_at eines Themas trotz neuer Beiträge statisch bleibt? Sind Sie sicher, dass Sie die Einstellung geändert und den Browser aktualisiert haben?

[merefield (Robert)]

@raghukamath Ich habe dies gerade getestet und es scheint wie vorgesehen zu funktionieren? Es wird immer noch nicht in Reaktion auf neue Beiträge geordnet und beachtet das created_at-Datum. Bitte aktualisieren Sie Ihren Browser und versuchen Sie es erneut.

[raghukamath (Raghavendra Kamath)]

Kein Problem. Ich werde mehr testen. Vielleicht habe ich mich aufgrund des Verhaltens bei aktivierter Option geirrt. Entschuldigen Sie die vielen Umstände.

Ein weiteres Problem, das meine Mitglieder hervorgehoben haben, betrifft die CSS-Korrektur für die Farben von ungelesenen und gelesenen Themen, die in mobilen Browsern nicht angewendet wird.

[merefield (Robert)]

@raghukamath

Ein weiteres Problem, das meine Mitglieder hervorgehoben haben, betrifft die CSS-Korrektur für die Farben von ungelesenen und gelesenen Themen, die nicht auf mobile Browser angewendet wird.

Ja, das war noch ausstehend, wie bereits erwähnt. Ich werde versuchen, dies mit dem oben beschriebenen Layout-Update zu veröffentlichen, wahrscheinlich innerhalb weniger Tage.

[flash]

Hallo, ich habe versucht, mit dem veralteten Git-Plugin zu arbeiten, als ich die CSS für mobile Thumbnails nicht überschreiben konnte. Sie wurde immer wieder auf eine Höhe von 80 Pixel zurückgesetzt. Ich habe angefangen zu suchen und gesehen, dass sie in eine Komponente verschoben wurde. Werde ich das gleiche Problem haben und die Komponente klonen müssen, um sie zu ändern, oder gibt es eine andere Lösung? Ich möchte, dass Mobilgeräte im mobilen Browser die volle Breite haben.

[merefield (Robert)]

Würde das Layout hier nicht Ihren Bedürfnissen entsprechen: Topic List Previews (TLP) - #4 by merefield Ihren Bedürfnissen entsprechen? Die neuen Kacheln haben Miniaturansichten in voller Breite. Dies befindet sich derzeit im beta-Zweig. Installieren Sie diesen, wenn Sie möchten, als zusätzliche Theme Component und probieren Sie es aus. Denken Sie daran, den Zweig bei der Installation anzugeben und den Namen der Theme Component zu bearbeiten, um klarzustellen, dass es sich um die Beta handelt.

[flash]

Das würde es definitiv. Ich habe es jetzt im Vollbildmodus, wie ich es wollte. Danke.

[merefield (Robert)]

Ich habe den beta-Branch zusammengeführt:

• Das interne Styling der Kacheln wurde modernisiert und aufgeräumt. Miniaturansichten nehmen nun die volle Spaltenbreite ein.
• Es gibt eine Reihe von CSS-Vereinfachungen.
• Das Mobile-Layout wurde für Nicht-Kacheln geringfügig verbessert.
• Kacheltitel sollten nun auch auf Mobilgeräten frühere Besuche widerspiegeln.

Layout changes

[sofi.pocketful (Sofi)]

Hallo,

Vielen Dank für diese großartige Komponente! Ich liebe das Design

Ich bin relativ neu in Discourse und kenne mich mit den technischen Begriffen nicht gut aus.

Ich hatte Probleme damit, dass die Bilder in der Listenkomponente nicht angezeigt werden. Aus irgendeinem Grund werden die Bilder in der Vorschau der Komponente angezeigt, aber wenn ich die tatsächliche Komponente lade, sind die Bilder nicht mehr da.

^ Dies ist die Vorschau der Komponente

[sofi.pocketful (Sofi)]

^ So sieht es aus, wenn ich die eigentliche Seite lade

Nun glaube ich, dass es etwas mit meinen Discourse-Einstellungen zu tun hat??

Gibt es eine bestimmte Einstellung, die aktiviert sein muss, damit diese Komponente funktioniert? Ich weiß wirklich nicht, warum sie nicht so funktioniert, wie sie sollte…

[merefield (Robert)]

Hallo, danke für Ihr Interesse.

Ein paar Dinge:

• Wenn Sie noch nie eine ähnliche Komponente oder ein ähnliches Plugin installiert haben, kann es zu Verzögerungen kommen, bevor alle Miniaturansichten generiert werden. Dies ist ein Stapelverarbeitungsprozess und braucht Zeit. Dieser Prozess sollte automatisch im Hintergrund laufen, sobald Sie die Komponente installiert und zu einem Theme hinzugefügt haben. Überprüfen Sie Ihre Sidekiq-Warteschlange. Möglicherweise sehen Sie viele geplante Jobs.
• Es ist nicht unbedingt mit jedem Theme kompatibel, es besteht immer die Möglichkeit eines Konflikts: Es wurde nur mit dem Standard-Theme entwickelt und entworfen. Bitte testen Sie es zunächst auf Ihrer Website nur mit dem Standard-Theme. Sie können sein Aussehen und Gefühl anpassen, aber das muss auf den speziellen Artefakten dieser Komponenten basieren.

[sofi.pocketful (Sofi)]

Hallo Robert,

Vielen Dank für deine Antwort! Ich werde das, was du vorgeschlagen hast, auf meiner Website testen

[flash]

Hallo Robert. Ich bringe eine Tabelle mit 3rd-Party-JavaScript unterhalb des Headers ein, und das Skript bricht die Vorschauen, wenn ich es in einer Komponente verwende. Haben Sie eine Idee für eine Problemumgehung?

[merefield (Robert)]

Wenn in diesem Skript ein Fehler auftritt, der die Ausführung von JavaScript verhindert, könnte dies den TLP-Layoutcode beeinträchtigen, der erfordert, dass JavaScript optimal funktioniert. Suchen Sie nach roten Fehlern in der Browserkonsole.

[raghukamath (Raghavendra Kamath)]

@merefield

Ich habe dies gerade getestet und es scheint wie vorgesehen zu funktionieren? Es wird immer noch nicht in der Reihenfolge von neuen Beiträgen geändert und berücksichtigt das created_at-Datum. Bitte aktualisieren Sie Ihren Browser und versuchen Sie es erneut.

Hallo, ich habe die von Ihnen vorgeschlagene Option „erstellt am“-Datum aktiviert. Es löst die Probleme teilweise. Aber ich denke, im älteren Plugin wurde die Reihenfolge nach dem Datum festgelegt, an dem der Beitrag markiert wurde. Auch das Problem, dass ältere Bilder auf der Titelseite bei jeder Aktualisierung oder Antwort auf das Thema erscheinen, erschwert es einem aktuellen Bild, hervorgehoben zu bleiben. Angenommen, ich mache ein Bild zum Featured-Bild und wenn ein älterer Beitrag von vor einem Jahr eine neue Antwort erhält, wird die Titelseite das Featured-Bild dieses Beitrags haben. Wenn viele ältere Beiträge beantwortet werden, verschwindet das neu markierte Featured-Bild.