حجم وشكل الصورة الرمزية

[Discourse]

	ملخص	حجم وشكل الصور الرمزية يتيح لك تغيير حجم وشكل الصور الرمزية على موقعك بسهولة.
	معاينة	معاينة على منشئ سمة Discourse
	رابط المستودع	https://github.com/discourse/discourse-avatar-component
	جديد في سِمات Discourse؟	دليل المبتدئين لاستخدام سِمات Discourse

تثبيت مكون السمة هذا

بما أن هذا مكون سمة #رسمي يُدار من قبل فريق Discourse، فيمكن تقديم طلبات #الدعم، و#الإبلاغ عن الأخطاء، و#تجربة المستخدم، و#الميزات في الفئات المقابلة هنا على Meta، مع وضع العلامة المناسبة لمكون السمة. انقر على أحد الروابط أدناه لبدء واحد منها.

 الدعم  خطأ  تجربة المستخدم  ميزة

الميزات

يتيح لك حجم وشكل الصور الرمزية تخصيص حجم وشكل الصور الرمزية على موقعك بسهولة في مواقع مختلفة.

الإعدادات

الاسم	الوصف
حجم الصورة الرمزية الأحدث	اختر حجم الصورة الرمزية في صفحة الأحدث. القيمة الافتراضية هي صغيرة (25 بكسل). لعرض التغييرات المطبقة، قم بتحديث الصفحة باستخدام Ctrl+F5 أو Cmd+Shift+R.
حجم الصور الرمزية في المواضيع	اختر حجم الصورة الرمزية في المواضيع. القيمة الافتراضية هي 45 بكسل. لعرض التغييرات المطبقة، قم بتحديث الصفحة باستخدام Ctrl+F5 أو Cmd+Shift+R.
حجم الصور الرمزية في الرأس	اختر حجم الصورة الرمزية في الرأس. القيمة الافتراضية هي 32 بكسل. لعرض التغييرات المطبقة، قم بتحديث الصفحة باستخدام Ctrl+F5 أو Cmd+Shift+R.
ارتفاع الرأس	اختر ارتفاع الرأس. يجب أن يتم الاختيار بناءً على حجم الصور الرمزية في الرأس + 10 بكسل. على سبيل المثال، إذا كان حجم الصور الرمزية في الرأس مضبوطًا على 90 بكسل، فيجب أن يكون ارتفاع الرأس 100 بكسل. القيمة الافتراضية هي 60 بكسل.
الهامش العلوي	اختر المسافة بالبكسل من الرأس. القيمة الافتراضية هي 0 بكسل.
نصف قطر حدود الصور الرمزية	اختر نصف قطر حدود الصور الرمزية على الموقع. سيتم تطبيق الإعداد على جميع الصور الرمزية، بما في ذلك تلك الموجودة في الرأس وتلك الموجودة في بطاقة المستخدم. 0% تتوافق مع شكل مربع، و50% مع شكل دائري. القيمة الافتراضية هي 50%.
حجم الصور الرمزية على الجوال	اختر حجم الصورة الرمزية في المواضيع على الجوال. الحد الأدنى للقيمة هو 45 بكسل (الافتراضي)، والحد الأقصى هو 80 بكسل. لعرض التغييرات المطبقة، قم بتحديث الصفحة باستخدام Ctrl+F5 أو Cmd+Shift+R.

تفاصيل إضافية:

• يغير حجم الصورة الرمزية الأحدث حجم الصورة الرمزية في صفحة /الأحدث. ستكون جميع الصور الرمزية مرئية حتى الحجم متوسط. من الحجم كبير فصاعدًا، سيتم عرض صورة رمزية للمستخدم الأخير الذي كتب في الموضوع فقط.
• يعمل حجم الصورة الرمزية في الرأس بشكل جيد حتى حجم 60 بكسل. بالنسبة للصور الرمزية ذات الأحجام الأكبر، يجب زيادة ارتفاع الرأس (ارتفاع الرأس)، وبالتالي يجب زيادة الهامش العلوي الذي يفصل الرأس عن عناصر الصفحة الأخرى (الهامش العلوي).

ظلت موضع فقاعة الإشعارات (المواضيع والرسائل الخاصة) دون تغيير. ستتحرك هذه الفقاعات أفقيًا فقط تبعًا لحجم الصورة الرمزية.

تاريخ التطوير

تم كتابة مكون السمة هذا مستوحى من الأدلة

• How to increase avatars size on posts without making them blurred
• https://meta.discourse.org/t/how-to-increase-avatars-size-on-latest-without-making-them-blurred/89606
• How to increase Header avatar size?

مُستضاف لدينا؟ تتوفر مكونات السمة للاستخدام في خططنا القياسية، والأعمال، والمؤسسات.

[davidkingham]

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.

[ariznaf (fernando)]

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.

[orchardstreet]

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

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.

[zuker (Matías)]

@ariznaf

مكوّن رائع، كنا نبحث عنه.

لكن سيكون من الرائع تغيير حجم شارة الصورة الرمزية أيضًا، إذا كنت تستخدمها في موقعك (كما نفعل نحن).

شكرًا لك.

هل وجدت طريقة للقيام بذلك؟

[jrgong]

@dax لقد وجدت مشكلة صغيرة تتعارض مع إضافة الرسائل السريعة.
يستهدف كود CSS التالي إشعار الشارة الخاص بإضافة الرسائل السريعة أيضًا:

.d-header-icons .unread-private-messages {
    right: auto;
    left: -10%; /* <--- هذا هو السبب */
}

ربما إضافة عنصر #… إلى محدد CSS

[Joshua_Kogan]

هل وجدت حلاً للنسخة المحمولة؟

[davidkingham]

لا، لم أجد طريقة للقيام بذلك للأسف.

[dax (Daniela)]

@davidkingham

كيف يمكنني تغيير حجم صورة الموضوع على الجوال باستخدام هذا؟

سألقي نظرة هذا الأسبوع إذا توفّر لديّ وقت.

[dax (Daniela)]

@davidkingham

كيف يمكنني تغيير حجم صورة الموضوع على الجوال باستخدام هذا؟

@zuker

هل وجدت طريقة للقيام بذلك؟

هناك إعداد جديد لتكوين الحجم على الجوال من 45 بكسل (الافتراضي) إلى 80 بكسل.

قم بتحديث المكون لرؤية الإعداد الجديد.

[davidkingham]

شكرًا لك يا دانييلا، لدي اقتراح آخر. سيكون رائعًا إذا كان هناك خيار إما لإبقاء صور الرموز المميزة للردود مفعّلة للحجم الكبير أو الكبير جدًا، بحيث يمكنني تقليل حجمها عبر CSS. أو خيار لتقليل حجم صور الرموز المميزة للردود في الإضافة. أحاول تحقيق ذلك، ولكن بالطبع، الصورة الرمزية الأكبر تكون ضبابية بسبب تكبير الصورة الرمزية متوسطة الحجم.

[Denis_Heraud]

إضافة رائعة! شكرًا لك!

@Dax المشكلة الوحيدة التي أراها حاليًا هي في الرأس الذي بلون أغمق. تم ضبط التحويم على الأبيض وهو يعمل بشكل جيد مع زر البحث ومع قائمة الهامبرغر، ولكن عندما يتم ضبط الصورة الشخصية على حجم أكبر قليلاً، يصبح حجم التحويم أصغر من الصورة الشخصية. كيف يمكنني إصلاح ذلك؟

[dax (Daniela)]

هذا المكون لا يغير ألوان الموقع بأي شكل من الأشكال، يجب أن يكون هناك سمة أخرى تستخدمها لكتابة ألوان الخلفية فوقها.

[ariznaf (fernando)]

مكون رائع.
يسهل التحكم في حجم وشكل صورتك الرمزية دون تعديل CSS في سمة موقعك (ما قد يسبب مشاكل عند ترقية السمة).

لا، لا يوجد تغيير في الألوان.

نستخدمه ونحن راضون عنه.

[Denis_Heraud]

@dax ربما لم أشرح نفسي جيدًا. الأمر لا يتعلق باللون، بل يتعلق بحجم الحاوية. إذا مررت الماوس فوق أيقونة الصورة الرمزية الخاصة بك في الزاوية العلوية اليمنى من الصفحة هنا على ميتا، ستظهر لك مربع ملون بخاصية :hover، ويكون المربع أكبر من الصورة الرمزية.

ومع ذلك، إذا قمت بتكبير الصورة الرمزية باستخدام هذه الإضافة، فإن حجم مربع :hover يصبح الآن أصغر من الصورة الرمزية ويبدو قليلاً غير متناسق.

[dax (Daniela)]

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

Remove background on header avatar

[Denis_Heraud]

ألا يمكن ببساطة استهداف

.header-dropdown-toggle #current-user

باستخدام CSS؟

[dax (Daniela)]

لا، الأمر ليس بهذه البساطة.

سألقي نظرة خلال الساعات القادمة

[Denis_Heraud]

أحاول تحقيق ذلك باستخدام CSS، ولكن بما أن جميع أيقونات الرأس تستخدم نفس الفئة:

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

يبدو أنها إما مفعلة جميعًا أو معطلة جميعًا. كيف تمكنت من جعل أيقونة الصورة الشخصية فقط لا تنشط عند :hover؟

[Denis_Heraud]

ك ملاحظة جانبية، تمكنت من الحصول على تأثير جيد جدًا في CSS من حيث وجود حالة :hover على الصورة الرمزية (إطار أبيض). الآن لو أمكنني فقط جعل خلفية عنصر li لا تضيء مع بقية العنصر…