Aperçus de la liste de sujets (TLP)

[merefield (Robert)]

Ceci est un Composant de Thème mais il offre la possibilité d’ajouter un plugin complémentaire.

	Résumé	Le composant Topic Preview original qui vous permet d’ajouter des images et des extraits (et plus encore !) à la liste des sujets tout en pouvant configurer quelles ajouts apparaissent sur quelle liste.
	Lien du dépôt	GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists · GitHub
	Guide d’installation	Installing a theme or theme component
	Sponsoring	Veuillez envisager de devenir un sponsoreur régulier de mon travail open source à un niveau qui correspond aux ressources et besoins de votre organisation, afin de garantir que ce composant reçoive la maintenance qu’il mérite et continue de fonctionner pour votre site à l’avenir.

Vous aimez ce Composant de Thème ? Veuillez lui mettre une sur GitHub

Installer ce composant de thème

Fonctionne très bien avec Discourse Bars 🍻 🍸 (a sidebar framework) !

Vue d’ensemble

Topic List Previews vous permet de :

• Ajouter des images, des extraits et des statistiques de sujet aux éléments de la liste des sujets ; et
• Modifier la mise en page et le style des éléments de la liste des sujets
• Ajouter des sujets “En vedette” au-dessus des listes de sujets et des sujets.
• Ajouter un Mural Utilisateur à la page d’activité de l’utilisateur (aka fonctionnalité “Portfolio”).

Le Sidecar

Cela peut être complété par le plugin “sidecar” : https://github.com/merefield/discourse-topic-previews-sidecar

Il s’agit actuellement d’un dépôt privé auquel mes sponsors GitHub qui contribuent au moins 7 $ ont accès.

pour ajouter les fonctionnalités suivantes :

• ‘actions’ (signet, lien et like depuis la liste des sujets)
• Sélecteur de vignette dans l’éditeur de métadonnées du sujet. (Choisissez n’importe quelle vignette de l’ensemble du sujet à l’aide d’une interface simple)
• Colorisation de l’arrière-plan basée sur la couleur dominante de la vignette
• Traitement des vignettes YouTube pour supprimer les bordures noires (essentiel pour déterminer la meilleure couleur dominante).
• Option pour recréer les vignettes lors de la reconstruction du message du sujet afin de vous permettre de gérer rapidement l’élimination des bordures pour chaque sujet individuellement.

Guide d’installation du plugin : Install plugins on a self-hosted site

Vous avez besoin au moins du Composant de Thème, le Plugin est optionnel.

Ces paramètres peuvent être appliqués à toutes ou certaines listes de sujets, au niveau du site ou spécifiquement par catégorie.

Ce jeu de fonctionnalités flexible vous permet de créer une variété de styles de liste de sujets différents, y compris

Style de base

Paramètres pertinents

• vignette de la liste des sujets
• extrait de la liste des sujets
• action de la liste des sujets

Style Pinterest (Masonry) aka “tuiles”

Paramètres pertinents

• tuiles de la liste des sujets
• vignette de la liste des sujets
• extrait de la liste des sujets
• action de la liste des sujets
• largeur de la vignette de la liste des sujets
• hauteur de la vignette de la liste des sujets

qui dispose d’une option au format large (derrière le paramètre topic_list_tiles_wide_format) :

Cela fonctionne de manière responsive, donc il se repliera au format masonry s’il ne reçoit pas suffisamment de largeur (et vice versa).

Images en vedette

Paramètres pertinents

• balise des images en vedette de la liste des sujets
• nombre d’images en vedette de la liste des sujets
• largeur des images en vedette de la liste des sujets
• hauteur des images en vedette de la liste des sujets
• titre des images en vedette de la liste des sujets
• extrait des images en vedette de la liste des sujets
• ordre des images en vedette de la liste des sujets

Activation/Désactivation des extraits :

Je l’ai introduit il y a quelque temps pour une utilisation avec mon plugin AI Topic Summaries.

Vous pouvez l’utiliser pour TLP :

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

Exemples dans la nature

• StarZen - Un site de fans non officiel de Star Citizen
• https://www.artofsm.art/

Support

Je ne fournis aucun support garanti gratuitement. Je peux fournir un support aux entreprises ou institutions qui s’inscrivent à l’un de mes niveaux de sponsoring mensuel GOLD ou PLATINUM.

Il existe également une option de chasse aux bugs ponctuelle.

[raghukamath (Raghavendra Kamath)]

Existe-t-il un moyen de baser l’ordre des images mises en avant sur le moment où le tag est ajouté ? Actuellement, il affiche l’image mise en avant du sujet qui a une activité récente, repoussant ainsi les images taguées les plus récentes vers le bas.

Par exemple, si j’ai 10 images et que j’en marque 5 comme mises en avant, ces 5 seront affichées dans la barre supérieure. Si j’ajoute 5 tags supplémentaires, ils remplaceront les 5 existants. Mais si l’un des 5 sujets précédents a des commentaires ou des publications, cette image sera mise en avant.

[merefield (Robert)]

Étiquette ? Non, mais il existe cette option pour trier par date de création :

[merefield (Robert)]

Attention : Je vais bientôt apporter une modification à la disposition des Carreaux (élément). Si vous avez des ajustements CSS, ils pourraient devoir être… euh… ajustés :

Je promets de ne pas le faire très souvent, mais celui-ci vise à simplifier les choses et à faciliter de nouvelles fonctionnalités qui pourraient apparaître à l’avenir…

Actuellement, la modification est sur la branche beta.

[raghukamath (Raghavendra Kamath)]

Oui, cette option aide un peu, mais si l’un des anciens articles a une mise à jour, il apparaît en premier.

[merefield (Robert)]

Je n’utilise que les options natives disponibles dans l’API Discourse (c’est un composant thématique à la base, donc vous ne pouvez pas changer l’API). Quand j’aurai le temps, je regarderai à nouveau le tri. Cependant, cela est apparu il y a quelque temps et j’ai fait un changement pour aider l’un des utilisateurs. Topic List Previews (legacy) - #1154 by merefield. Je suis surpris que cela ne fonctionne pas comme prévu. On s’attendrait à ce que le created_at d’un sujet reste statique malgré de nouveaux messages ? Êtes-vous sûr d’avoir modifié le paramètre et actualisé le navigateur ?

[merefield (Robert)]

@raghukamath Je viens de tester ceci et cela semble fonctionner comme prévu ? Il ne changera toujours pas l’ordre en réponse aux nouveaux Posts et respectera la date created_at. Veuillez rafraîchir votre navigateur et réessayer.

[raghukamath (Raghavendra Kamath)]

Aucun problème. Je vais tester davantage. Peut-être que j’ai été confus à cause du comportement lorsque l’option est activée. Désolé de vous déranger autant.

Un autre problème que mes membres ont souligné concerne le fait que la correction CSS de la couleur des sujets non lus et lus ne s’applique pas aux navigateurs mobiles.

[merefield (Robert)]

@raghukamath

Un autre problème que mes membres ont souligné concerne le correctif CSS de couleur des sujets non lus et lus qui ne s’applique pas aux navigateurs mobiles.

Oui, cela était toujours en suspens comme indiqué précédemment. J’essaierai de l’intégrer à la mise à jour de la mise en page décrite ci-dessus, probablement dans quelques jours.

[flash]

Salut, j’essayais de travailler avec le plugin git déprécié quand je n’ai pas pu remplacer le CSS sur la miniature mobile. Il revenait constamment à une hauteur de 80px. J’ai commencé à chercher et j’ai vu qu’il avait été déplacé vers le composant. Aurai-je le même problème et devrai-je cloner le composant pour le changer ou existe-t-il une autre solution ? Je veux que le mobile ait une largeur complète sur le navigateur mobile.

[merefield (Robert)]

La mise en page ici ne conviendrait-elle pas à vos besoins : Topic List Previews (TLP) - #4 by merefield ? Les nouvelles vignettes ont des miniatures pleine largeur. Ceci est actuellement sur la branche beta. Installez-la si vous le souhaitez en tant que composant de thème supplémentaire et essayez-le. N’oubliez pas de spécifier la branche lors de l’installation et de modifier le nom du composant de thème pour qu’il soit clair qu’il s’agit de la version bêta.

[flash]

Cela le ferait certainement. Je l’ai maintenant en pleine largeur comme je le voulais. Merci.

[merefield (Robert)]

J’ai fusionné la branche beta :

• le style interne des vignettes a été modernisé et rangé. Les miniatures occupent maintenant toute la largeur de la colonne.
• il y a un certain nombre de simplifications CSS
• le mobile a bénéficié de quelques améliorations mineures de la mise en page pour les non-vignettes.
• les titres des vignettes devraient maintenant refléter les visites précédentes sur mobile également.

Layout changes

[sofi.pocketful (Sofi)]

Salut,

Merci pour cet incroyable composant ! J’adore le design

Je suis relativement nouveau dans Discourse et je ne connais pas grand-chose aux termes techniques.

J’ai eu du mal avec les images qui ne s’affichent pas dans le composant de liste. Pour une raison quelconque, les images s’affichent dans l’aperçu du composant, mais lorsque je charge la chose réelle, les images ne sont plus là.

^ Ceci est l’aperçu du composant

[sofi.pocketful (Sofi)]

^ C’est comme ça que ça ressemble quand je charge la vraie page

Maintenant, je pense que cela a quelque chose à voir avec mes paramètres Discourse ??

Y a-t-il un paramètre spécifique qui doit être activé pour que ce composant fonctionne ? Je ne sais vraiment pas pourquoi cela ne fonctionne pas comme il le devrait…

[merefield (Robert)]

Bonjour, merci de votre intérêt.

Quelques points :

• Si vous n’avez jamais installé de composant ou de plugin similaire auparavant, il peut y avoir un délai avant que toutes les miniatures ne soient générées. Il s’agit d’un processus par lots qui prend du temps. Ce processus devrait démarrer automatiquement en arrière-plan une fois que vous aurez installé le composant et l’aurez ajouté à un thème. Vérifiez votre file d’attente sidekiq. Vous pourriez y voir de nombreux jobs en attente.
• Il n’est pas nécessairement compatible avec n’importe quel thème, il y a toujours une possibilité de conflit : il est uniquement développé et conçu avec le thème par défaut. Veuillez d’abord le tester sur votre site avec uniquement le thème par défaut. Vous pouvez adapter son apparence, mais cela devra être basé sur les artefacts spéciaux de ce composant.

[sofi.pocketful (Sofi)]

Salut Robert,

Merci pour ta réponse ! Je vais tester ce que tu as suggéré sur mon site

[flash]

Salut Robert. J’importe un tableau avec du JavaScript tiers sous l’en-tête et le script casse les aperçus lorsque je l’utilise dans un composant. Des idées de contournement ?

[merefield (Robert)]

S’il y a une erreur dans ce script qui empêche l’exécution de JavaScript, cela pourrait casser le code de mise en page TLP qui exige que JavaScript soit dans les meilleures conditions. Recherchez les erreurs rouges dans la console de votre navigateur.

[raghukamath (Raghavendra Kamath)]

@merefield

Je viens de tester ceci et cela semble fonctionner comme prévu ? Il ne changera toujours pas l’ordre en réponse à de nouveaux messages et respectera la date created_at. Veuillez rafraîchir votre navigateur et réessayer.

Salut, j’ai activé l’option de date de création comme vous l’avez suggéré. Cela résout quelque peu les problèmes. mais je pense que dans l’ancien plugin, l’ordre était défini selon la date à laquelle le message était tagué. De plus, le problème des anciennes images apparaissant sur la page d’accueil lors de toute mise à jour ou réponse au sujet rend difficile pour une image récente de rester mise en avant. Supposons que je mette une image en avant et si un ancien message d’il y a un an reçoit une nouvelle réponse, la page d’accueil aura l’image mise en avant de ce message. Si de nombreux anciens messages reçoivent une réponse, l’image mise en avant nouvellement taguée disparaît.