مشكلة في محاذاة صور صناديق الفئات

مرحباً، أنا أستخدم سمة Air، وهي تبدو رائعة!

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

تحديث. هذا ما هو مكتوب على شاشة التحميل - نسبة العرض إلى الارتفاع الموصى بها 1:1 مع حد أدنى للحجم 200 بكسل. إذا تُركت فارغة فلن تظهر أي صورة. - لقد جعلتها أيضًا 1000 × 1000 ولا يوجد تغيير، لذلك أعتقد أن هذه قد تكون مشكلة في طريقة عمل السمة. بصرف النظر عن عدم عرض الصورة على حواف المربع، فإنها تُظهر أيضًا جزءًا من الخلفية الزرقاء السابقة خلف صورتي.

أي أفكار أو اقتراحات؟

مرحباً - هل هذا على نسختك التجريبية المستضافة؟ إذا كان الأمر كذلك، فلن تتمكن من تعديل CSS في خطة Starter الخاصة بنا، للأسف.

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

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

يوجد margin-top: .5em في العنصر الأب div، مما يؤدي إلى إزاحة العنصر الأب والصورة الابنة للأسفل.

يمكنك محاولة تجاوز هذا السلوك:

 categories-list .category .category-logo.aspect-image {
    margin-top: 0;
}

أعتقد أن هذه المشكلة يجب أن يكون لها حل رسمي.

إعجابَين (2)

مرحباً Coin-coin le Canapin،

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

أتفق معك، أعتقد أن هذا يحتاج إلى النظر فيه في السمة. قد أنشر مشاركة على صفحة السمة لمعرفة ما إذا كان يمكن إصلاحها.

مرحباً هوك،
هل هناك طريقة يمكنني من خلالها الإشارة إلى شخص ما من فريق Air Theme في هذا المنشور لمحاولة حل هذه المشكلة.
لقد جربت CSS الذي ذكره مستخدم آخر في هذا المنشور ولكنه لم يبدو أنه يعمل.
تحياتي
بيك

مرحباً بيك، لقد قمت بتعيين مصمم للنظر في الأمر ولكن لا يمكنني إعطائك إطارًا زمنيًا، آسف، إنها عطلة نهاية الأسبوع.

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

لا مشكلة. شكراً جزيلاً لك.

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

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

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

لدي إصلاح هنا → DEV: fix image size by jordanvidrine · Pull Request #49 · discourse/discourse-minimal-category-boxes · GitHub

إذا قمت بتحديث مكون السمة “modern category boxes” المثبت على سمة “air”، فيجب أن يحل ذلك مشكلتك.

شكرا!

4 إعجابات

مرحباً جوردان،

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

إذا كان هناك CSS أحتاج إلى استخدامه، فأين يجب أن أضعه حيث أن CSS الذي حاولت إضافته من قبل لم يبدو أنه يعمل ولست متأكداً مما إذا كان ذلك بسبب عدم السماح بالتغييرات على السمة أو إذا كنت لا أعرف ما أفعله لأنني جديد على discourse.

شكراً
بيك

مرحباً جوردان،
أردت فقط أن أطلعك على آخر المستجدات.

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

شكراً مرة أخرى على كل مساعدتك.

مرحباً مرة أخرى يا جوردان،

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

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

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.