Aperçus des listes de sujets (TLP)

[merefield (Robert)]

Ceci est un composant de thème qui propose l’option d’ajouter un plugin complémentaire.

	Résumé	Le composant d’aperçu des sujets d’origine qui vous permet d’ajouter des images et des extraits (et plus encore !) à la liste des sujets, tout en pouvant configurer quels 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
	Parrainage	Veuillez envisager de devenir un parrain régulier de mon travail open source à un niveau adapté aux ressources et aux besoins de votre organisation ou à titre personnel, afin de garantir à ce composant la maintenance qu’il mérite et qu’il continue de fonctionner sur votre site à l’avenir.

Vous appréciez ce composant de thème ? Merci de lui mettre une sur GitHub

Installer ce composant de thème

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

Aperçu

Topic List Previews vous permet de :

• Ajouter des vignettes, des extraits, des avatars des participants et des statistiques des sujets aux listes de sujets
• Utiliser des lignes traditionnelles, des tuiles responsives ou des mises en page de type masonry
• Configurer les aperçus indépendamment par liste de sujets, catégorie et tag
• Contrôler la taille, la résolution, les valeurs par défaut et les limites d’affichage des vignettes
• Mettre en valeur des sujets sélectionnés avec des tuiles vedettes plus grandes
• Ajouter des sujets « Vedettes » au-dessus des listes de sujets, filtrés et ordonnés selon vos besoins
• Enrichir la recherche en page complète avec des vignettes, des extraits et des détails de l’auteur
• Ajouter un Mur d’utilisateurs aux pages d’activité - la fonctionnalité « Portfolio »

Le Sidecar

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

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

pour ajouter les fonctionnalités suivantes :

• « Actions » — marquer comme favori, partager et aimer directement depuis la liste des sujets
• Sélecteur de vignette — sélectionner n’importe quelle image de l’ensemble du sujet
• Arrière-plans de couleur dominante basés sur la vignette sélectionnée
• Suppression automatique des bordures noires des vignettes YouTube
• Recréation optionnelle de la vignette lors de la reconstruction d’un message de sujet
• Longueur d’extrait configurable et suppression optionnelle des liens
• Aperçus des solutions acceptées et des réponses Q&R
• Option pour afficher l’extrait du dernier message
• Option pour rediriger les clics sur l’aperçu vers le dernier message
• Aperçus de vignettes dans les résultats de recherche
• Préférence par utilisateur pour des vignettes de résolution inférieure

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

Vous avez besoin au minimum du composant de thème, le plugin est optionnel.

Ces réglages peuvent être appliqués à toutes les listes de sujets ou à des listes sélectionnées, sur une base globale ou spécifique à une catégorie.

Cet ensemble de fonctionnalités flexible vous permet de créer une variété de styles de listes de sujets différents, y compris

Style de base

Réglages pertinents

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

Style Pinterest (Masonry) alias « tuiles »

Réglages 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 de format large (derrière le réglage topic_list_tiles_wide_format) :

Cela fonctionne de manière responsive, il se repliera donc sur le format masonry s’il n’est pas donné suffisamment de largeur (et inversement).

Images vedettes

Réglages pertinents

• tag des images vedettes de la liste des sujets
• nombre d’images vedettes de la liste des sujets
• largeur des images vedettes de la liste des sujets
• hauteur des images vedettes de la liste des sujets
• titre des images vedettes de la liste des sujets
• extrait des images vedettes de la liste des sujets
• ordre des images vedettes de la liste des sujets

Basculer les extraits :

Je l’ai introduit il y a un moment pour l’utiliser 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 en pratique

• https://www.artofsm.art/

Support

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

Il existe également une option de chasse aux bogues 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.