مساعدة في إعداد صور قائمة الفئات

مرحبًا!

أود عرض صور الفئات في قائمة الفئات بنفس الطريقة التي تُعرض بها صور المستخدمين في عرض “المشاهدة الأخيرة” الفئات - ميتا ديسكورش.

تمكنتُ من الحصول على النتيجة التي أريدها إلى حد ما من خلال التجريب في وضع فحص كروم.

هل تعتقد أن هذا ممكن تحقيقه باستخدام CSS أم أنني بحاجة إلى تعديل قوالب HTML؟

الموقع حي على APF - Auberge du Pixel Fringant (apfcommu.ga) إذا أردت رؤيته حيًا.

شكرًا لوقتك :slight_smile:

مرحبًا!

أعتقد أن ذلك مرجح جدًا، ويبدو أنك قد وجدت الحل بالفعل من خلال التجربة في متصفح كروم. لذا، إذا كان سؤالك أكثر تحديدًا حول “أين يجب تطبيق تعديلاتي؟”، فستجد مثالًا هنا:

والمزيد من الأمثلة هنا: Search results for 'category-list' - Discourse Meta

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

ليس حقًا، لقد غششت عن طريق نقل بعض عناصر HTML.

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

أوه، فهمت الآن، عذراً مني :sweat_smile:
لذا، وبما أنني لست ماهراً في CSS ولا أعتقد أنه يجب عليك اتباع مسار position: relative، فإنك في حال قررت إعادة ترتيب العناصر عبر HTML، فستجد هذا أكثر فائدة:

وهناك أيضاً: https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/navigation/category.hbs
ولكن لإجراء بعض التعديلات على: discourse/app/views/categories/index.html.erb at main · discourse/discourse · GitHub
فستحتاج على الأرجح إلى إضافة (plugin).

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

أنا أيضًا لست جيدًا جدًا في CSS.

شكرًا على الموارد، سأحاول الاطلاع عليها عندما يتوفر لدي المزيد من الوقت.

من المرجح أن أحتاج إلى اتباع مسار الإضافات..

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

سأستخدم هذا المكون الجديد:

سيمنحك هيكلاً نظيفاً لـ CSS، وسيبدو متطابقاً على سطح المكتب والجوال مع استخدام محددات فئات متشابهة جداً.

4 إعجابات