Merci pour la mise à jour ! 
Avec quelques astuces CSS, j’ai déplacé l’avatar en superposition sur la miniature en mode carte :
.featured-topics__topic-details .topic-author {
position: absolute;
right: 30px;
bottom: 30px;
}
Comment puis-je réduire la hauteur de la div (violette) de l’auteur du sujet à 0 et supprimer efficacement l’espace tout en affichant toujours l’avatar ?
Si vous écrivez du CSS personnalisé, plutôt que d’ajouter du code qui écrase l’une des dispositions prédéfinies, je vous recommanderais plutôt de choisir l’option de disposition Aucune dans les paramètres du thème et de déclarer vos styles à partir de zéro.
Par exemple, vous pourriez copier la feuille de style Cartes par défaut et déclarer le conteneur featured-topics__topic-details comme une grille. Ensuite, vous pouvez positionner ses éléments exactement comme vous le souhaitez, plutôt que de les déplacer avec des déclarations absolues.
C’est une excellente idée !
Pour l’instant, nous sommes satisfaits du modèle et juste quelques petites modifications CSS pour le tester initialement. Une fois que nous passerons à la phase d’optimisation du CTR, nous suivrons probablement votre conseil. 
Je ne sais pas si ce comportement est attendu ou s’il pourrait être considéré comme un bug :
Lorsque trois sujets sont définis dans les paramètres, mais que seulement deux sont affichés, un espace apparaît là où le troisième sujet devrait se trouver. Il serait idéal que les cartes soient redimensionnées pour occuper toute la largeur dans de tels cas.
Si quelqu’un est intéressé par l’utilisation du défilement horizontal sur mobile, voici quelques CSS que « j’ai » créés (avec l’aide de l’IA). Cela inclut également des ajustements de défilement et de taille que j’ai trouvés plus adaptés à notre cas d’utilisation.
PS : J’ai également essayé de créer des pilules de navigation sans ajouter de HTML, mais c’était certainement un étirement.
@media (max-width: 750px) {
.featured-topics__topic-wrapper {
display: flex !important;
flex-direction: row !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding: 1em 10vw; /* Padding latéral pour la visibilité des cartes voisines */
gap: 1rem; /* Espacement cohérent entre les cartes */
overscroll-behavior-x: contain; /* Empêche les interférences de sur-défilement */
scroll-behavior: smooth; /* Défilement fluide */
scrollbar-width: none; /* Masquer la barre de défilement */
-ms-overflow-style: none;
}
.featured-topics__topic-wrapper::-webkit-scrollbar {
display: none; /* Masquer la barre de défilement dans les navigateurs WebKit */
}
.featured-topics__topic-container {
flex: 0 0 80vw; /* Cartes plus étroites pour la visibilité latérale */
min-width: 280px; /* Largeur minimale pour les petits écrans */
scroll-snap-align: center; /* Centre chaque carte lors du défilement */
height: unset !important; /* Hauteur cohérente */
}
.featured-topics__topic-thumbnail {
height: 40vw;
width: 100%;
}
}
Salut, merci beaucoup pour ce composant, je l’adore !
Quelqu’un pourrait-il par hasard m’aider à ajuster la taille du titre car il est trop grand en ce moment ?
J’ai reçu un message d’erreur indiquant que ce composant doit être mis à jour pour être compatible avec les prochaines modifications du noyau de Discourse. Quelqu’un sait-il si une mise à jour est prévue ?
J’ai mis à jour le composant plus tôt cette année. Vous devez le réinstaller pour utiliser la nouvelle version, voir : 
Featured Topics - #38 by manuel
Oh, merci beaucoup, ça a fonctionné !
La seule chose que je n’arrive pas à corriger (je taquine Chat GPT depuis une heure, je suppose…) c’est la hauteur des cartes — des conseils pour la réduire/supprimer ?
Salut Manuel - y a-t-il un moyen pour que ton super composant de thème ignore les images (pour qu’il affiche juste un extrait) ?
J’ai pas mal de sujets mis en avant sans images (que je veux mettre en avant), mais ils font assez mauvais effet à côté de ceux qui contiennent des images. De plus, je m’intéresse plus au texte qu’aux images.
Le modèle de composant affiche une variété de contenus disponibles sur un sujet. L’apparence finale est ensuite ajustée avec des règles de style. Par exemple, lorsque vous sélectionnez « cartes » comme mise en page, les extraits de sujet sont masqués lorsqu’il y a une image mise en avant et affichés lorsqu’il n’y en a pas :
Si vous souhaitez toujours afficher l’extrait et ne jamais afficher d’image, vous pouvez soit sélectionner « aucun » pour la mise en page et ajouter votre propre feuille de style. Ou bien, vous pouvez remplacer les règles de la mise en page des cartes qui affichent l’image et masquent l’extrait.
Je pense que c’est un excellent composant !
J’avoue avoir passé deux ou trois jours à essayer d’apprendre à créer un composant de thème pour faire exactement ce que fait ce composant. Je n’ai pas l’impression que ce temps ait été perdu car j’ai beaucoup appris, mais j’aurais aimé suivre plus tôt le conseil d’ask.discourse et consulter ce composant.
Une chose que je n’arrive pas à comprendre
J’aime la disposition en carte, mais j’aimerais afficher une miniature et un extrait dans cette disposition. Tout indice serait apprécié.
À la place, j’ai opté pour la disposition en liste, mais je voulais changer quelques éléments. Je les ai ajoutés à mon onglet common.css. Peut-être que cela aidera quelqu’un d’autre.
pour supprimer l’étiquette de sujet
.featured-topics__topic-tag {
display: none;
}
pour supprimer l’avatar de l’auteur
.featured-topics__wrapper .topic-author {
display: none;
}
pour supprimer le lien de catégorie
.featured-topics__wrapper .category-link {
display: none;
}
Modification à ajouter :
Je laisserai le message original ci-dessus intact, mais je voulais ajouter
comment afficher l’extrait dans la vue carte
.featured-topics__topic-container.thumbnail .topic-excerpt {
display: contents;
}
De plus, j’en suis venu à préférer la disposition en vue liste sur ordinateur de bureau à la disposition en carte, mais elle est horrible sur mobile. La miniature est à gauche et le titre et l’extrait se trouvent dans une colonne étroite à droite. Je n’ai pas trouvé comment faire en sorte que le texte s’enroule autour de la miniature ou empile tout dans une seule colonne.
Comme j’ai trouvé comment faire apparaître la miniature et l’extrait dans la disposition en carte, ce qui est assez joli sur mobile, je suis passé à cette disposition car je soupçonne que la plupart des utilisateurs consultent le site sur un téléphone.
C’est un excellent composant et plugin, merci pour votre travail !
Cependant, il semble y avoir un problème avec le contenu qui ne se rafraîchit pas, à moins que je ne fasse un rafraîchissement complet de la page, en appuyant sur F5.
À titre d’exemple :
Je crée un sujet avec le tag “featured” (mis en avant).
Je vais sur la page d’accueil en cliquant sur la bannière du site web.
Le sujet devrait apparaître sous “Featured Topics” (Sujets en vedette), mais il ne s’affiche pas.
Il n’apparaît que si je rafraîchis la page avec la touche F5. Même si je clique à nouveau sur la bannière, il n’apparaîtra pas.
Même chose si je supprime une publication en vedette. Elle ne disparaîtra que si je rafraîchis la page avec F5 ou si je ferme l’onglet et rouvre la page.
Des idées sur la raison pour laquelle cela se produit ?
Ceci est intentionnel. Le contenu n’est pas mis à jour dynamiquement, il reflète l’état au chargement de la page. Ce n’est généralement pas un problème car le contenu sera à jour pour tout nouveau visiteur du site.