Aperçus de la liste de sujets (TLP)

[merefield (Robert)]

Ceci est un Composant de Thème mais avec l’option d’ajouter un plugin complémentaire.

	Résumé	Le composant Aperçu de Sujet original 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
	Soutien	Veuillez envisager de devenir un soutien régulier de mon travail open source à un niveau qui correspond aux ressources et aux 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 le 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 miniatures, des extraits, des avatars des participants et des statistiques de sujets aux listes de sujets
• Utiliser des lignes traditionnelles, des tuiles réactives ou des dispositions de style masonry
• Configurer les aperçus indépendamment par liste de sujets, catégorie et balise
• Contrôler la taille, la résolution, les alternatives et les limites d’affichage des miniatures
• Mettre en évidence les sujets sélectionnés avec des tuiles mises en avant plus grandes
• Ajouter des sujets « Mis en avant » au-dessus des listes de sujets, filtrés et triés selon les besoins
• Améliorer la recherche sur toute la page avec des miniatures, des extraits et des détails de l’auteur
• Ajouter un Mural Utilisateur 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 sponsors GitHub qui contribuent au moins 7 $/mois ont accès.

pour ajouter les fonctionnalités suivantes :

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

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 facultatif.

Ces paramètres peuvent être appliqués à toutes ou à certaines listes de sujets au niveau du site ou spécifiquement par 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

Paramètres pertinents

• miniature 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
• miniature de la liste des sujets
• extrait de la liste des sujets
• action de la liste des sujets
• largeur de la miniature de la liste des sujets
• hauteur de la miniature de la liste des sujets

qui possède une option de format large (derrière le paramètre topic_list_tiles_wide_format) :

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

Images mises en avant

Paramètres pertinents

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

Basculer les extraits :

J’ai introduit cela il y a quelque temps pour une utilisation avec mon plugin Résumés de sujets IA.

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.