معرض صور Masonry

أتفق مع ما تقوله. لست مطورًا لـ Discourse، لذلك لا أعرف ما هو ممكن أو غير ممكن.

إعجابَين (2)

تم إصلاح خطأ GitLab الآن. شكرًا للإبلاغ عنه @Jagster! :star:

إعجابَين (2)

فضولاً، كيف تعمل هذه القطعة:

    &::before,
    &::after {
      content: "";
      flex-basis: 100%;
      width: 0;
      order: 2;
    }

أرى أنها تحرك الأشياء ولكنني لا أفهمها تمامًا :thinking: عنصران زائفان، بدون أي عرض، كلاهما في الموضع الثاني…؟

أهلاً @chapoi!

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

بدونهما، يمكن أن تبدأ الأعمدة في الاندماج إذا اختلفت ارتفاعات الأعمدة كثيرًا.

العناصر 3 و 6 و 9 في الصورة أعلاه تم تعيينها لتكون في العمود 3 (مع تعيين خاصية الترتيب إلى 3). ولكن إذا أزلنا العناصر الزائفة، سيبدأ العمود 3 مباشرة أسفل العمود 2 (حتى مع الترتيب 3). انظر الصورة أدناه. تم تمييز “العمود 3” باللون الأخضر.

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

ومع ذلك، تعمل العناصر الزائفة كأعمدة، لذلك سيتحقق flexbox من العنصر الزائف (بدلاً من العمود الحقيقي) بحثًا عن مساحة فارغة. وبما أن العناصر الزائفة لها ارتفاع بنسبة 100%، فلن يجد flexbox أي مساحة فارغة، وبالتالي سيبدأ العمود 3 حيث نريد أن يبدأ.

آمل أن يكون هذا واضحًا ومفهومًا. :sweat_smile:

إعجابَين (2)

حل ذكي جداً!

للأسف لم أتوصل إلى ذلك بنفسي. :grin:

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

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

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

للأسف لم أجد طريقة جيدة بما فيه الكفاية للتعامل مع جهاز مقلوب.

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

6 إعجابات

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

هل هذا خطأ أم مجرد شيء لن يعمل بسبب الروابط؟

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

أهلاً @Octoberon! لم يتم تصميمه للعمل مع الروابط/onebox، لذا فهذه هي المشكلة على الأرجح. تم تصميمه لفتح نافذة منبثقة عند النقر على الصورة. على الرغم من أنني تلقيت طلبًا مشابهًا منذ فترة.. :thinking:

بالمناسبة، كيف أضفت الرابط إلى الصورة؟

إعجابَين (2)

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

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

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

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

هل يواجه أي شخص آخر مشاكل مع ميزة التشغيل التلقائي؟ لقد اختبرناها باستخدام الإصدارين 3.1 و 3.2 المستقرين، وفي كلتا الحالتين لم تعمل ولم يتم إنشاء أي معارض حجرية على الرغم من إعداد الفئات بشكل صحيح.

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

مرحباً @jrgong! غريب، يبدو أنه يعمل لدي. هل لديك رابط لمنشور لا يعمل؟

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

لم أتمكن من رؤية هذا المنشور لأنك بحاجة إلى تسجيل الدخول. آسف.

أعتقد ربما كان لدي في وقت ما تسجيل دخول إلى هذا الموقع التجريبي (صحيح؟)، ولكن على أي حال لا يمكنني العثور عليه الآن.

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

مرحباً
عذرًا، هذا الرابط يعمل: 350ml Challenge Just4Fun 🚀 Auf geht's 🚀 [Finale] - #91 von Hoppsi - Contests - Forum | Cannabisanbauen.net

إعجابَين (2)

أفترض أنك قمت بتمكين هذه الفئة تلقائيًا ولديك الحد الأدنى لعدد الصور المطلوبة مضبوطًا على 3 (نظرًا لوجود ثلاث صور في المنشور).

لاحظت وجود سطر فارغ بين الصور. هل قمت بتمكين الإعداد السماح بسطر فارغ تلقائيًا؟

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

نعم، تم تمكين كلا الإعدادين طوال الوقت

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

لم أتمكن من إعادة إنتاج هذه المشكلة. الشيء الوحيد الذي يمكنني التفكير فيه هو ما إذا كان هناك مكون سمة آخر (أو إضافة) مثبت لا يعمل بشكل جيد مع معرض صور Masonry..

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