Size topic avatar

Support
1

Hello!
How to make size avatar topic 145px?
%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5

2

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…

https://meta.discourse.org/t/css-help-please-resizing-avatar-in-posts-from-45-to-120/24234/5?u=mikechristopher

6 Likes
3

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
4

Avatar quality deteriorated

5

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
6

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

1 Like
7

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
8

OK thank you very much!

9

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
10

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
11

Thanks!
Its work

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

@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
13

Because of the avatar, there were problems with indenting

image

14

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
    image

  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>
  1. and this piece in Common >> CSS
.topic-avatar {
    width: #{$topic_avatars_size}px; /* from theme settings */
}

And I got this (80px avatars):

image
image832Ă—326 25.9 KB

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

image
image848Ă—326 30.1 KB

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
15

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

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
16

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
17

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
18

Alright PR is now updated:

https://github.com/discourse/discourse/pull/5562

10 Likes
19

This topic was automatically closed after 2311 days. New replies are no longer allowed.