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

ساهم تجربة المستخدم
1

category background image doesn’t scale correctly in mobile ux,

here is the background image in desktop:

png_fixed
png_fixed432×464 22.8 KB

the same image in a topic for mobile ux:

jpg_fixed
jpg_fixed270×480 51.3 KB

إعجاب واحد (1)
2

I’m not aware of anyway to add background images to topic pages based on the topic category (which is what the second screenshot looks like) except via a theme.

Category images only show up on top of their pages and on the categories topic-list. How are you adding these images? Can you please share a link to a page where I can see this?

إعجابَين (2)
3

here are two samples:

https://padpors.com/c/PP-Porch/Library

https://padpors.com/c/PP-Porch

even in safe-mode and when the themes are deactivated, you can see the background image in a topic page. e.g. of safe-mode activated page:

https://padpors.com/t/آیا-تا-حالا-تجربه-ای-از-کار-داوطلبانه-بین-المللی-توی-حوزه-کامپیوتر-داشتین؟/10482/?safe_mode=no_custom%2Cno_plugins%2Conly_official

5

thanks, but I’m a little bit confused:

we used the category setting to add the background and not a theme.

image
image781×635 62.6 KB

إعجابَين (2)
6

Ah, I see what you mean, this was a feature that I hadn’t used before so apologies for the confusion :sunflower:

I’ll take a look and see what I can do to make it look nicer :+1:

6 إعجابات
8

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

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

9

تمكنت من معرفة كيفية القيام بذلك وأود مشاركة التقنية التي نجحت معي. لإضافة الصورة الموجودة في https://some.url كخلفية للفئة ذات المعرّف category-off-topic-rwby، استخدمت كود CSS التالي في مكون السمة:

body[class~="category-off-topic-rwby"] {
    #background {
    background: url(https://some.url);
    background-position: center center;
    background-size: cover;
    z-index: -1;
    opacity: .50;
    min-width: 100vw;
    width: auto;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    }
}

هذا الكود يُمركز الصورة الموجودة في https://some.url ويُزيل تشبع ألوانها (باستخدام خاصية opacity)، كما يجعلها ثابتة بحيث لا تتحرك مع التمرير في الصفحة. النتيجة:

PNG
PNG1333×1147 364 KB

3 إعجابات
10

أظن أنك تستخدم جهازًا يعمل بنظام iOS؟ إذا كان الأمر كذلك، فإن المشكلة ليست بالكامل من جانب Discourse. فأجهزة iOS لا تحترم خاصية background-attachment: fixed;، وهي خاصية CSS تُستخدم حاليًا في Discourse لتحقيق تأثير خلفية ثابتة للجسم عند تعيين صور للفئات.

السبب في تجاهل أجهزة iOS لهذه الخاصية يعود إلى مخاوفها بشأن إعادة الرسم المستمرة التي تسببها.

إليك بعض الأمثلة لما أعنيه:

إذا استخدمت لونًا صلبًا في CSS كخلفية، فإن الشيء الوحيد الذي يتم إعادة رسمه أثناء التمرير هو شريط التمرير - التظليل الأخضر.

حتى الآن كل شيء على ما يرام. ومع ذلك، بمجرد إضافة صورة حقيقية ودمجها مع background-attachment: fixed;، يتعين على المتصفح إعادة رسمها باستمرار للحفاظ على مكانها مع كل تمرير.

لاحظ كيف يتم إعادة رسم الخلفية مع كل تمرير؟ هذا هو السبب في أن أجهزة iOS لا تحترم هذه الخاصية.

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

هذه المشكلة موجودة في قائمتي منذ فترة، لكنني سأحاول إدراج إصلاح خلال الأسابيع الثلاثة القادمة.

إذا لم تستطع الانتظار حتى ذلك الحين، فإليك ما أعتزم تنفيذه، ويمكنك تجربته في سمة موقعك.

3 إعجابات