Comment augmenter la taille des avatars dans les posts sans les rendre flous

[dax (Daniela)]

Ce guide est désormais obsolète au profit du composant de thème Avatar Size and Shape

Contenu original

1. Augmenter la taille et repositionner l’avatar

Pour augmenter la taille de l’avatar de 45 px (par défaut) à un maximum de 120 px, ajoutez le code ci-dessus dans l’onglet Personnaliser > Thèmes > Bureau > CSS
(Je veux dire, avez-vous vraiment besoin d’avatars plus grands que 120 px ? )
Dans l’exemple ci-dessus, j’ai augmenté la taille de l’avatar à 90 px et je l’ai repositionné

/* Augmenter la taille des avatars */

.topic-avatar {
  width: 90px;
  .avatar {
    width: 90px;
    height: 90px;
  }
}

/* Les avatars dans les réponses intégrées resteront à la taille par défaut,
augmentez ou diminuez la taille selon vos besoins */

.embedded-posts .topic-avatar {
  width: 45px;
  img.avatar {
    width: 45px;
    height: 45px;
  }
}

Mais si vous utilisez les insignes pour les groupes principaux, ils seront maintenant trop petits

2. (Optionnel) Augmenter la taille et repositionner les insignes

Augmentons un peu la taille de l’insigne. Par défaut, elle est de 14 px, je la double pour 28 px.
Selon la taille des avatars que vous avez choisie, vous devrez augmenter ou diminuer la taille de l’insigne en conséquence.

/* Augmenter la taille de l'insigne */

.topic-avatar .avatar-flair {
  font-size: 28px;
  width: 30px;
  height: 30px;
}

/* Conserver la taille par défaut dans les messages intégrés,
augmentez ou diminuez la taille selon vos besoins */

.embedded-posts.bottom .topic-avatar .avatar-flair {
  font-size: 14px;
  width: 20px;
  height: 20px;
}

3. Fini les avatars flous.

Ajoutez ce script sous l’onglet Bureau > En-tête. N’oubliez pas de modifier la taille (‘90’) avec la taille que vous avez choisie

<script>
Discourse._registerPluginCode('0.8', function (api) {
  api.changeWidgetSetting('post-avatar', 'size', '90');
});
</script>

[BlackKnob]

@dax

<script> Discourse._registerPluginCode(‘0.8’, function (api) { api.changeWidgetSetting(‘post-avatar’, ‘size’, ‘90’); }); </script>

has this script been broken in Discourse 2 Beta 10? The 90px avatars look blurred (the one on the left).

[Mr.X_Mr.X]

@dax

2. (Optional) Increase size and reposition flairs

Let’s increase the flair a little. By default it is 14px , I double the size to 28px .
Depending on the size of the avatars you have chosen, you will have to increase or decrease the size of the flair accordingly.

/*Increase the flair size*/

.topic-avatar .avatar-flair {
  font-size: 28px;
  width: 30px;
  height: 30px;
}

I have tried this on a Material Design Theme and the “font-size:” field is not changing the flair size no matter the size i’m setting. The width and height does change the position of the flair meaning they are working but the font-size not. Any ideas how to solve this?

[dax (Daniela)]

@Mr.X_Mr.X

Any ideas how to solve this?

I will take a look Monday Friday

[dax (Daniela)]

@Mr.X_Mr.X have you tried to clear your browser’s cache?

This is the only reason why at the beginning I did not correctly load the component and the material design theme

[Pad_Pors]

is there any way to change the avatar size for topics of one category?

I know this can be done via css, but I want the javascript to be also limited for the specific category so that it doesn’t load large images for the unnecessary cases.

[Mittineague]

CSS doesn’t instruct a browser on what size images to get for the avatars. It instructs a browser on what size to render the images it’s served. What you need to be concerned about is not “loading large” images. But retaining quality when smaller dimension images are displayed larger than they are. (usually enlarging small images larger is a poor idea, but you should be able to get a bit of a tweak by OK)

[Pad_Pors]

p.s.: I don’t know how to explain what I mean, and thanks in advance for your patience.

to get a 90px image, for the avatar, as explained above, I should use a script:

@dax

No more blurred avatar.

Add this script under Desktop > Head tab.

now I want this script to work only for a specific category. is it possible to achieve this via js, such taht other categories get 45 px avatar as usual?

[Mittineague]

Thanks, it was me, not you. I was thinking you wanted to use CSS to control image size instead of modifying this

<script>
Discourse._registerPluginCode('0.8', function (api) {
  api.changeWidgetSetting('post-avatar', 'size', '90');
});
</script>

I’m pretty sure I have seen JavaScript for using categories in conditional checks, but it will take me a while to track it down, if it exists.

[MakaryGo (Makary Gołosz)]

It seems not to work after latest update.
HTML for topic avatars now looks like this:

<img alt="" width="45" height="45" src="/user_avatar/example.com/username/45/2710_1.png" title="Full Name" class="avatar">

[pmusaraj (Penar Musaraj)]

I just tested the code from @Mittineague locally, and it works. The size of the image is set to 90px wide in the HTML:

And the images display at 90px as well.

[MakaryGo (Makary Gołosz)]

Yeah, after copypasting it it works once again, but no idea why, as only difference was this bit of code

<script type="text/discourse-plugin">