كيفية زيادة حجم الصور الرمزية في المنشورات دون جعلها ضبابية

مطور
1

:loudspeaker: :warning: تم إهمال هذا الدليل حاليًا لصالح مكون السمة Avatar Size and Shape :warning: :loudspeaker:

المحتوى الأصلي

1. زيادة حجم الصورة الشخصية وإعادة تموضعها

لزيادة حجم الصورة الشخصية من 45 بكسل (الافتراضي) إلى حد أقصى 120 بكسل، أضف الكود أعلاه في علامة التبويب تخصيص > سمات > سطح المكتب > CSS
(أعني، هل تحتاج حقًا إلى صور شخصية أكبر من 120 بكسل؟ :exploding_head:)
في المثال أعلاه، قمت بزيادة حجم الصورة الشخصية إلى 90 بكسل وإعادة تموضعها

/*زيادة حجم الصور الشخصية*/

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

/*ستظل الصور الشخصية في الردود المضمنة بالحجم الافتراضي،
زد أو قلل الحجم حسب احتياجاتك*/

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

rtlrjtP.png1064×630 71 KB

ولكن إذا استخدمت الشارة للمجموعات الأساسية، فستصبح صغيرة جدًا الآن

Z8d5jdV.png432×184 22.6 KB

2. (اختياري) زيادة حجم الشارات وإعادة تموضعها

دعنا نزيد حجم الشارة قليلاً. افتراضيًا، يكون حجمها 14 بكسل، قمت بمضاعفة الحجم إلى 28 بكسل.
اعتمادًا على حجم الصور الشخصية التي اخترتها، ستحتاج إلى زيادة أو تقليل حجم الشارة وفقًا لذلك.

/*زيادة حجم الشارة*/

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

/*اترك الحجم الافتراضي في المنشورات المضمنة،
زد أو قلل الحجم حسب احتياجاتك*/

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

BiZOx3h.png404×194 22.4 KB

3. لا مزيد من الصور الشخصية الضبابية

أضف هذا السكربت تحت علامة التبويب سطح المكتب > الرأس. تذكر تغيير الحجم (‘90’) بالحجم الذي اخترته

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

24loE9h.png358×192 23.1 KB

17 إعجابًا
3

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

5

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?

6

I will take a look Monday Friday

3 إعجابات
7

@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

3 إعجابات
8

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.

9

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)

10

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:

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?

11

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.

3 إعجابات
12

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">
3 إعجابات
13

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

image
image.png1028×420 61.6 KB

And the images display at 90px as well.

3 إعجابات
14

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

<script type="text/discourse-plugin">
3 إعجابات