Problème d'alignement de l'image des boîtes de catégorie

Bonjour, j’utilise le thème Air, qui est génial !

J’ai configuré mes catégories sous forme de boîtes. Lorsque je télécharge une image de 200 x 200 pixels, elle ne s’ajuste pas bien. Je ne suis pas sûr du CSS dont j’aurais besoin pour qu’elle ressemble à la boîte de droite, mais avec mon image. Ainsi, la couleur va jusqu’aux bords de la même manière que celle de droite.

Juste une mise à jour. Voici ce qui est indiqué sur l’écran de téléchargement - Format d’image recommandé 1:1 avec une taille minimale de 200px. Si ce champ est laissé vide, aucune image ne sera affichée. - Je l’ai également mis à 1000 x 1000 et il n’y a aucun changement, donc je pense que cela pourrait être un problème avec la façon dont le thème fonctionne. En plus de ne pas afficher l’image sur les bords de la boîte, il montre également une partie du fond bleu précédent derrière mon image.

Des réflexions ou des idées ?

Bonjour – est-ce sur votre essai hébergé ? Si c’est le cas, vous ne pourrez pas modifier le CSS de notre plan Starter, je crains.

1 « J'aime »

Salut Hawk,

Merci pour votre réponse.

Non, je suis sur une nouvelle installation auto-hébergée avec le thème Air. Je pense qu’il y a un problème avec le thème pour aligner correctement les images. Tout ce que j’ai fait, c’est télécharger mon fichier dans le ratio recommandé et le résultat affiché est celui que vous voyez ci-dessus.

Ce serait bien si l’image était affichée jusqu’aux bords comme elle l’est dans le placeholder avant de télécharger des images. Sinon, au moins, il ne faudrait pas que les restes bleus du placeholder soient visibles derrière mon image.

Je suis prêt à placer du code CSS quelque part pour le corriger, bien que je ne sois pas sûr où et quel code y mettre. Cependant, comme je l’ai dit, je pense que c’est peut-être quelque chose qui se passe avec le thème qui n’affiche pas correctement le fichier téléchargé.

Il y a un margin-top: .5em sur la div parente, ce qui décale l’image parente et l’image enfant vers le bas.

Vous pouvez essayer de remplacer ce comportement :

 categories-list .category .category-logo.aspect-image {
    margin-top: 0;
}

Je pense que ce problème devrait néanmoins faire l’objet d’une correction officielle.

2 « J'aime »

Salut Coin-coin le Canapin,

Merci pour le code CSS. Je ne suis pas vraiment sûr où l’ajouter. J’ai cherché en ligne et je pense que je dois l’ajouter comme un composant au thème “air”. Ce que j’ai fait et quand il est activé, il ne fait aucun changement. Je m’y prends probablement mal.

Je suis d’accord, je pense que cela doit être examiné sur le thème. Je vais peut-être faire un post sur la page du thème et voir si cela peut être corrigé.

Salut Hawk,

Y a-t-il un moyen de taguer quelqu’un de l’équipe Air Theme sur ce post pour essayer de résoudre ce problème ?

J’ai essayé le CSS mentionné par un autre utilisateur dans ce post, mais cela ne semble pas avoir fonctionné.

Cordialement,
Bec

Salut Bec, j’ai attribué un designer pour y jeter un œil mais je ne peux pas te donner de délai désolé, c’est le week-end.

1 « J'aime »

Pas de soucis. Merci beaucoup.

1 « J'aime »

Salut ! Merci de nous avoir signalé cela. Je vais examiner la question et vous apporter une réponse rapidement, ou ajouter la correction au thème.

1 « J'aime »

J’ai une solution ici : DEV: fix image size by jordanvidrine · Pull Request #49 · discourse/discourse-minimal-category-boxes · GitHub

Si vous mettez à jour le composant de thème des boîtes de catégorie modernes installé sur le thème air, cela devrait résoudre votre problème.

Merci !

4 « J'aime »

Salut Jordan,

Merci beaucoup. Oui, cela a résolu le problème de l’affichage du contenu temporaire en arrière-plan.

Je me demande si vous pouvez me dire comment faire en sorte que mon image s’étende jusqu’aux bords de la boîte, comme le fait le contenu temporaire. Cela rend beaucoup mieux et je m’attendais à ce que cela ressemble à la même chose lorsque j’ai téléchargé mon image.

S’il y a du CSS que je dois utiliser, où irait-il, car le CSS que j’ai essayé d’ajouter auparavant ne semblait pas fonctionner et je ne sais pas si c’est parce que les modifications ne sont pas autorisées sur le thème ou si je ne sais tout simplement pas ce que je fais, car je suis nouveau sur Discourse.

Merci
Bec

Salut Jordan,
Je voulais juste te tenir au courant.

Une chose étrange s’est produite lorsque j’ai modifié la 3ème boîte de catégorie, toutes les images se sont soudainement mises en place d’elles-mêmes. Donc, tout semble bien maintenant.

Merci encore pour toute ton aide.

Salut Jordan,\n\nEn fait, ce sera un problème si vous avez des catégories avec moins de 3 images d’affilée. Lorsque la 3ème image d’affilée est ajoutée, tout s’ajuste parfaitement comme dans mon message précédent. Mais si vous n’en avez que deux d’affilée, l’image ne se place pas joliment dans la boîte, elle apparaît comme un carré. J’ai donc maintenant des images qui sont jolies et d’autres qui ont une image carrée.

1 « J'aime »

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.