Size topic avatar

[luckydev]

Hello!
How to make size avatar topic 145px?

[mikechristopher]

As said before @luckydev - if you want to start editing things you will need to start learning some CSS - or at least searching on the forum here for some previous posts.

I found this by just searching…

CSS help please- resizing avatar in posts from 45 to 120

So I have done this on my site some time ago. The way I did it was through a plugin but you should be able to do it with just the customize tab in the admin panel. It is both CSS and a template override to make it work. Add the following to the CSS/HTML section of the customize area in admin panel. CSS // New avatar width $topic-avatar-width: 120px; $vertical-padding: 16px; .topic-avatar { width: #{$topic-avatar-width}; padding-bottom: #{$vertical-padding}; } .topic-avatar .avatar, .emb…

[awesomerobot]

This requires changing CSS. Here’s a basic example to start with that increases the size from 45px to 60px.

.topic-avatar {
    width: 60px; // increases the width of the avatar container
    img.avatar { // increases the size of the avatar
        width: 60px;
        height: 60px;
    }
}

As the above post mentioned, there are topics that cover this specific question in various ways here on Meta. It might be more productive to search before asking.

How to change topic avatar size?

Anyone know how to edit the topic only avatar? I tried to edit img.avatar but it break in other places

[luckydev]

Avatar quality deteriorated

[sam]

Yeah, you are going to need a theme component here and possibly to amend the avatar sizes to fit the new size + x2 of the size for retina.

You basically need to redo the widget to support this, its a rather hairy change, I totally support making this more easily customizable long term.

@eviltrout what the cleanest way of amending “settings” in the post-avatar widget, so size is something else? would reopen widget be able to pull this off?

[luckydev]

How can I change it? Sorry for my language, I’m from Russia

[sam]

How can I change it? Sorry for my language, I’m from Russia

This is not your fault here, changing this is a very advanced level change. It requires a theme component. Hold tight a few days while we have a think about this.

[luckydev]

OK thank you very much!

[eviltrout]

Widget settings are easily changed via API:

api.changeWidgetSetting('post-avatar', 'size', 'super-huge');

You will need to define what super-huge is elsewhere though. But any of our default sizes will work as a parameter.

[sam]

Cool, @vinothkannans can you post an example theme component in the #plugin:theme category that demonstrates how to make a poster avatar say 105px square, or some other non standard larger size?

[luckydev]

Thanks!
Its work

<script type="text/discourse-plugin" version="0.4">
    api.changeWidgetSetting('post-avatar', 'size', '70');
</script>

[sam]

@Osama this is an interesting use case for you “theme settings”

• It is a component
• It should remind users they need to also amend the site setting
• It has a param that goes in the HEADER and in CSS

I think you should try it out, maybe post a screen shot here of how it would work?

[luckydev]

Because of the avatar, there were problems with indenting

[Osama]

Ok so I tried this and it worked quite nicely. Here is what I did:

1. created a theme and made it a component for my default theme

2. defined an enum setting in the component theme and gave it some values to choose from
   

3. added this piece of code in Common >> </head>:

<script type="text/discourse-plugin" version="0.4">
    api.changeWidgetSetting('post-avatar', 'size', Discourse.ThemeSettings.topic_avatars_size);
</script>

4. and this piece in Common >> CSS

.topic-avatar {
    width: #{$topic_avatars_size}px; /* from theme settings */
}

And I got this (80px avatars):

Changed the setting to 100px, reloaded the page and got 100px avatars:

My PR for theme settings doesn’t have this - if you want this in I’ll push my changes after I polish my code a bit and write some tests.

[sam]

My PR for theme settings doesn’t have this - if you want this in I’ll push my changes after I polish my code a bit and write some tests.

Absolutely, basing these kind of features on real world usage is the bestest ever

Let me know once that is done and I would love to get this merged in!

Also, how does it get the enum cause it would have to be based off the site setting (loosly) cause the site setting accounts for x2 sizes to allow for retina?

[Osama]

Currently the enum choices are purely set by the theme developer and they will need to remind the theme user i.e. admin to make sure the avatar sizes site setting has the selected value for the theme.

Though to be clear, that theme setting doesn’t have to be strictly an enum (it could work as an integer/string setting, theme users would have to manually type the value they want).

[sam]

Though to be clear, that theme setting doesn’t have to be strictly an enum (it could work as an integer/string setting, theme users would have to manually type the value they want).

Yes I think that is a better call here for this particular setting, I would just use an int and maybe have a min / max defined by theme dev.

[Osama]

Alright PR is now updated:

FEATURE: Theme settings