avatar qui rétrécie

[Yurei Paum Morino]

Bonjour à tous!

Je viens vers vous pour un petit soucis pas bien méchant concernant les avatars, mais que j'espère pouvoir régler pour l'esthétique du forum.

Voilà tout les avatars était à la taille de 200pixel de largeur jusqu'à ce qu'un jour sans raison certain rétrécisse a 150pixel. Je leur ai fait changé les avatars en hébergeant sur un site leur image et en mettant l'adresse sur la 2eme bannière au profil. Cependant le problème persiste sur une joueuse où son avatar se met à la bonne taille seulement quand elle reçoit une réponse d'un joueur à l'ouverture de son poste.

Il y a t-il un code pour arranger ça?

Merci par avance!

[Yurei Paum Morino]

Petit up pour ne pas être oublié ^^

[Toryudo]

Bonjour,

Explication pour cette page : https://azuola.forumactif.com/t107-zaou-hsing-hsing-termine

Nous nous trouvons sur un <td> qui fait 150px de large :

Code:

<td class="row1" width="150" valign="top">

La première personne qui poste a un avatar, dont voici le code HTML :

Code:

<img loading="lazy" src="https://2img.net/u/4113/53/08/67/avatars/21-88.jpg" alt="Zaou Hsing-Hsing">

Le CSS qui s'applique sur cet avatar est le suivant :

Code:

.postdetails.poster-profile img {
   max-width: 100%;
}

Tout ça combiné veut dire : je veux que la largeur maximale de l'image soit redimensionnée selon la largeur (100%) de son conteneur, soit le <td> qui fait 150px. Le premier avatar suit donc cette logique, et la colonne <td> reste à 150px. Toutes les images ayant un loading="lazy", il faut comprendre qu'à ce moment-là, quand on est en haut de la page, tant qu'on ne scrolle pas vers le bas, les autres images sont considérées comme "non existantes", pas encore chargées. Vous avez donc un avatar chargé, redimensionné à 150px qui s'affiche.

Maintenant, nous scrollons vers le bas, jusqu'à ce que le deuxième avatar soit visible. Voici son code :

Code:

<img loading="lazy" src="https://i.servimg.com/u/f80/17/86/69/98/leoleo10.jpg" alt="Leo Țepeș" style="max-width: 200px; max-height: 400px">

Une différence avec le premier avatar, c'est la présence du code style="max-width: 200px; max-height: 400px". Ici, nous surchargeons (remplaçons) le max-width associé au CSS .postdetails.poster-profile img, qui se trouve donc supprimé car moins prioritaire que cette surcharge directe. Nous n'avons plus de redimensionnement automatique de l'image à 100% de la largeur de son conteneur <td>. L'image, autorisée à prendre plus de place, va donc automatiquement agrandir le <td> conteneur à 200px, la taille de celui-ci s'adaptant à son contenu indépendamment du fait que width="150" soit précisé.

Conclusion, pour que tout soit toujours à 200px, vous devez, dans le template viewtopic_body :

Trouver et remplacer :

Code:

<th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>

par

Code:

<th class="thLeft" nowrap="nowrap" width="200" height="26">{L_AUTHOR}</th>

Trouver et remplacer :

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">

par

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="200">

Pas pu tester, mais je crois que ce sera suffisant.
Ce ne devrait pas demander trop de modifications supplémentaires en tout cas !

[Yurei Paum Morino]

En effet il n'y avait pas beaucoup de modification à faire, ça a remis les avatars à taille! Merci beaucoup!