Mise en page identique à la maquette : grande bannière avec une image d’arrière-plan spécifique à la catégorie et un titre/une description superposés.
Chargement fluide (pas de scintillement/redimensionnement), entièrement responsive.
L’arrière-plan doit être une image unique pour chaque catégorie (pas un style CSS global).
Ce que j’ai essayé
JavaScript personnalisé pour injecter l’image et le texte. Cela fonctionne, mais l’image se charge d’abord, puis se redimensionne, provoquant des transitions saccadées/des changements de mise en page.
Le composant Category Banner m’a permis de m’en approcher, mais je n’ai pas pu correspondre à cette mise en page exacte et aux exigences d’image par catégorie.
Demande
Quelle est l’approche recommandée dans Discourse pour y parvenir ?
Des exemples ou des modèles CSS/HTML pour réserver de l’espace (par exemple, un wrapper avec un rapport d’aspect fixe/object-fit) et éviter le CLS ?
Des conseils pour utiliser les téléchargements par catégorie ou les paramètres de thème pour définir l’image d’arrière-plan proprement.
Démo très médiocre (et je n’utilise pas de cartes de sujet), mais je pense que vous pouvez facilement le faire avec l’image d’arrière-plan de catégorie intégrée :
cela place l’image sur la balise body. Peut-être ajuster ensuite le CSS à votre goût (mon exemple fait 400px) :
`+ quelques ajustements à l’alignement du texte, vous devriez obtenir une approximation de ce que vous voulez, je pense ? Le principal inconvénient est qu’elle est vraiment pleine largeur, vous la verrez donc dépasser sur les écrans plus larges.
Je pense que le composant de thème le plus proche de ce que vous recherchez est celui-ci :
Vous pourriez y jeter un œil pour vous faire une idée, mais il semble que vous pourriez avoir besoin de créer un composant personnalisé. Vous pourriez poster dans Marketplace si vous cherchez à engager des développeurs pour vous aider.
