Hello!
How to make size avatar topic 145px?
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…
6 Likes
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.
https://meta.discourse.org/t/how-to-change-topic-avatar-size/20689
8 Likes
Avatar quality deteriorated
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?
4 Likes
How can I change it? Sorry for my language, I’m from Russia
1 Like
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.
1 Like
OK thank you very much!
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.
11 Likes
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?
6 Likes
Thanks!
Its work
<script type="text/discourse-plugin" version="0.4">
api.changeWidgetSetting('post-avatar', 'size', '70');
</script>
5 Likes
@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?
6 Likes
Because of the avatar, there were problems with indenting
Ok so I tried this and it worked quite nicely. Here is what I did:
-
created a theme and made it a component for my default theme
-
defined an enum setting in the component theme and gave it some values to choose from
-
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>
- 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.
8 Likes
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?
4 Likes
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).
1 Like
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.
2 Likes