Avatar Size and Shape

:discourse2: Summary Avatar Size and Shape will allow you to easily change the size and shape of the avatars on your site.
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-avatar-component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Some details:

The description of the theme settings should be clear enough, but I add some details:

  • latest avatar size: change the avatars size on the /latest page, all the avatars will be visible up to the medium size. From large onwards, only the avatar of the last user who wrote on the topic will be displayed.
  • header avatar size: it works well up to the 60px size. For avatars of larger size, the height of the header must be increased (header height) and consequently the margin-top that distances the header from the other elements of the page must also increase (margin top).
    I chose not to change the position (in height) of the notification bubble (topics and PMs) so that they remain in line with the red bubble for flagged topics. These bubble will only move horizontally following the avatar size.

This theme component was written taking inspiration from the guides


TODO

  • I will probably have to create a particular theme setting for mobile
  • The component has not been tested with unofficial plugins, almost certainly there will be fixes to do (of course PRs are always welcome)
45 Likes

How would I go about changing the size of the topic avatar on mobile with this? 80px looks pretty good on desktop, but obnoxious on mobile. I tried changing .topic-avatar width but it just shifts the text and the avatar stays the same.

3 Likes

Great component, we were looking for it.

But it would be great to change the avatar flair size too, if you are using them in your site (as we do).

Thank you.

very cool
wish I could set the topic avatar size to 53 though :frowning:

Also does this apply to avatars in the topic-poster div found on some front page category arrangments? It doesn’t seem to but it would be cool if it did.

Did you found a way of doing this?

@dax I found a small issue which collides with the Quick Messages plugin.
The following CSS comes targets the badge notification of the quick messages plugin as well:

.d-header-icons .unread-private-messages {
    right: auto;
    left: -10%; /* <--- this is the culprit*/
}

May be add some #… element to the CSS selector

1 Like

Did you find a solution for the mobile version?

No, never found a way to do it unfortunately.

1 Like

I will take a look this week if I have time

6 Likes

There is a new setting to configure the size on mobile from 45px (default) to 80px.

Update the component to see the new setting.

6 Likes

Thank you Daniela, I have one more suggestion. It would be great if there was an option to either leave the reply avatars on for large or extra_large so I can reduce the size via css. Or an option to reduce the size of the reply avatars in the plugin. I’m trying to achieve this, but of course the larger avatar is blurry from upsizing the medium size avatar.

image

2 Likes

Great plugin! Thank you!

@Dax Only problem I’m seeing right now is in the header which is a darker color. The hover is set to white which works fine on the search button and on the hamburger menu, but when the avatar is set to a slightly larger size, the size of the hover is smaller than the avatar. How would I go about fixing that?

Screen Shot 2020-04-06 at 11.01.39 PM

This component does not change the colors of the site in any way, it must be some other theme that you are using to overwrite the background colors.

3 Likes

Great component.
It makes it easy to control the size and aspecto of your avatar without changing CSS of you theme (that may give problems upgrading the theme).

No, there is no change in colors.

We are using it and are happy with it.

2 Likes

@dax Maybe I did not explain myself very well. It’s not about the color, it’s about the size of the container. If you hover over your own avatar icon in the upper right corner of the page here on meta, you get a colored square with a :hover property, and the square is bigger than the avatar.

Screen Shot 2020-04-09 at 7.51.04 AM

However, if I enlarge the avatar with this plugin, the size of the :hover square is now smaller than the avatar and looks a little wonky.

Screen Shot 2020-04-06 at 11.01.39 PM

1 Like

By changing the height of that div, the other two icons must also be repositioned. For this reason I had preferred not to. For now I only make the color of the div on hover transparent.

https://github.com/discourse/discourse-avatar-component/commit/9715ce5077c542863499d00bf1820e3f873bf49b

3 Likes

Would it not be possible to simply target

.header-dropdown-toggle #current-user

with CSS?

No, it’s not so simple.

I will take a look in the next hours

2 Likes

I’m trying to achieve this in CSS but since all header icons use the same class:

<li class="header-dropdown-toggle">

it seems like they are either all on or all off. How were you able to just get the avatar one to not activate on :hover?

1 Like

As a side note, I was able to get a pretty good looking effect in CSS in terms of having a :hover state on the avatar (white border). Now if I could just get the background of the li element to not highlight with the rest of it…

Screen Shot 2020-04-09 at 6.45.24 PM

Screen Shot 2020-04-09 at 6.44.16 PM

1 Like