حجم وشخصية الأفاتار

[Discourse]

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

تثبيت مكون الموضوع هذا

نظرًا لأن هذا مكون موضوع official (رسمي) تحافظ عليه فريق Discourse، يمكن تقديم طلبات Support (الدعم)، و Contribute > Bug (الأخطاء)، و Contribute > UX (تجربة المستخدم)، و Contribute > Feature (الميزات) في الفئات ذات الصلة هنا على 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.

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

• يغير حجم الصورة الرمزية في آخر المواضيع حجم الصورة الرمزية في صفحة /latest. ستكون جميع الصور الرمزية مرئية حتى حجم متوسط. من حجم كبير فصاعدًا، سيتم عرض صورة رمزية للمستخدم الأخير الذي كتب في الموضوع فقط.
• يعمل حجم صورة الرأس بشكل جيد حتى حجم 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)]

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

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

شكرًا لك.

[orchardstreet]

رائع جداً
أتمنى لو أمكنني تحديد حجم صورة الموضوع إلى 53 رغم ذلك :(.

كما هل ينطبق هذا على الصور الرمزية في div لصاحب الموضوع الموجود في بعض ترتيبات الفئات في الصفحة الأمامية؟ لا يبدو ذلك، لكن سيكون رائعاً لو كان كذلك.

[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 لا تضيء مع بقية العنصر…