إذا كان لديك العديد من الصور في منشور Discourse، يمكنك الآن ترتيبها تلقائيًا في شبكة جميلة. كل ما عليك فعله هو وضعها بين علامتي [grid] ... [/grid]، وسيتم ترتيب الصور بدقة. هذه ميزة أساسية اعتبارًا من هذا الالتزام، وهي ممكّنة على جميع مثيلات Discourse.
هذه الميزة مشابهة لبعض مكونات الثيم (Masonry Image Gallery, Tiles Image Gallery). الاختلاف الرئيسي هو أن ترتيب الصور في الشبكة سيتم بمحاذاة في أعلى وأسفل العنصر. بعض الملاحظات الفنية الإضافية:
على الهاتف المحمول، تكون الشبكة افتراضيًا بعمودين، وعلى سطح المكتب بثلاثة أعمدة.
إذا كان هناك 4 عناصر بالضبط في الشبكة، فسيتم ترتيب الصور في عمودين.
يمكن أيضًا استخدام عناصر غير صور (مثل مقاطع الفيديو)، ولكن النتائج لن تكون متوافقة تمامًا.
يتم ترتيب العناصر في الشبكة لضمان أن تكون ارتفاعات الأعمدة قريبة من بعضها البعض قدر الإمكان، وبالتالي، لا يتم دائمًا الحفاظ على ترتيب الصور.
يمكن أيضًا تمكين أو تعطيل الشبكة عن طريق النقر على أيقونة تبديل صغيرة بجوار الصورة الأولى في مجموعة من الصور في معاينة المنشئ:
صحيح، لا ينبغي أن يؤثر ذلك. أعتقد أنه يتم اختيار الصورة الأولى الموجودة في المنشور كصورة مصغرة (باستثناء الصور الرمزية والرموز التعبيرية وما شابه ذلك). أيضًا، لا يمكنني رؤية سيناريو لا تكون فيه الصورة الأولى التي تم تحميلها هي الصورة الأولى في الشبكة (يمكن أن يحدث إعادة الترتيب فقط للصور اللاحقة في القائمة).
للأسف، لا، هذا لا يعمل مع الصفحات المنشورة. ميزات ما بعد الكتابة المشابهة التي تعمل بالـ Javascript لا تعمل أيضًا مع الصفحات المنشورة (الصناديق المضيئة، الاستطلاعات، جدول المحتويات).
يجب أن يعمل هذا. بالطبع، قم بعمل نسخة احتياطية وابحث بعناية عن أي نتائج غير مرغوب فيها في منشورات المِصْطَبَة السابقة…
posts = Post.where('raw LIKE ?', '%<div>data-masonry-gallery>%')
posts.each do |p|
p.update!(raw: p.raw.gsub(/<div>data-masonry-gallery>(.*?)<\/div>/m, '[grid]\1[/grid]'))
p.rebake!
end
مع تفعيل الإعداد التلقائي… هذا لا يحتوي على <div> data-masonry-gallery</div> في الوضع الخام، لذا أعتقد أن النص البرمجي لن يعمل. ولكن في هذه الحالة، لا يوجد تعارض بينهما.
هل هناك أي خطط لجعل الشبكات تلقائية؟ إذا حدث هذا، يمكنني ببساطة إعادة خبز المشاركات والحفاظ على تخطيط الشبكة. حتى ذلك الحين، أعتقد أنه يمكنني إخفاء زر الشبكة واستخدام مكون السمة بأمان.
هل لدى أي شخص في CDCK تأثير على مطوري Chrome؟ دعم CSS Masonry لـ Grid؟
يجب أن يكون Masonry شيئًا خاصًا بـ CSS بالفعل. إنه أحد التصميمات القليلة التي تتيح لك احترام نسب العرض إلى الارتفاع المختلفة لمجموعات الصور (أو أي محتوى عنصر آخر) بطريقة لطيفة.
من المهدر وغير المجدي تشغيل هذا باستخدام JavaScript في كل مكان …
أنا متحمس لدعم Safari للـ masonry، لديهم سجل أفضل في نقل الميزات من المسودة – تجريبي – مدعوم بالكامل. دعم Firefox masonry كان خلف علامة لمدة تزيد عن عامين الآن. من المحتمل أن يكون دعم Safari هو المحرك الرئيسي لـ Chrome لمواكبة ذلك.
نعم، ولكن ليس بدون علامات [grid]. تحويل الصور تلقائيًا إلى شبكة بدون علامات سينتهك مواصفات CommonMark، ونحن نفضل بشدة تجنب ذلك. (في مسودتي الأولى الداخلية لهذه الميزة، بدأت بشبكة تلقائية.)
بدلاً من ذلك، ما أفكر فيه كخطوة تالية هنا هو أنه يمكننا إضافة أغلفة [grid] تلقائيًا لتحميلات الصور المتعددة، ربما 3+ تحميلات. سيكون هذا مفيدًا بشكل خاص لتحميلات الهاتف المحمول، حيث أن إضافة العلامات يدويًا على الهاتف المحمول أمر صعب، ومن المحتمل أنك إذا كنت تقوم بتحميل 3+ صور في وقت واحد من هاتفك، فهي صور ومرشحات معقولة لتخطيط الشبكة.
ليس لدينا أي خطط حتى الآن لموعد إضافة هذا، ولكنه بالتأكيد شيء نود القيام به.
HTML المطبوخ وحده لا يكفي. تتطلب الشبكة وجدول المحتويات والميزات المماثلة أيضًا JS الذي يتفاعل مع HTML لإنشاء هذه الميزة. ويعيش هذا JS في تطبيق Ember، ولا يمكن استخراجه بسهولة للصفحات المنشورة غير التابعة لـ Ember.
لقد جربت هذا بالأمس وتم ترشيحي لتقديم ملاحظاتي وأفكاري هنا في هذا الموضوع…
أعجبني أنه “سحري تلقائي” بمعنى أنه يضبط شبكة بنفسه
قد تكون ميزة إضافية لطيفة لترتيب الصور دون الحاجة إلى نسخ/لصق الصور حول القائمة - ربما فقط إضافة أرقام في بداية كل صورة؟
أعجبني أنه يمكنك بسهولة تبديل الشبكة في المعاينة، ولكن لإعادتها، تحتاج إلى إعادة إضافة الرمز، ويبدو أن هذا مجال لتحسين التجربة بحيث يظهر رمز الشبكة عندما تضيف أكثر من صورة واحدة لتمكين التبديل تشغيل/إيقاف حسب الحاجة.
ميزة مستقبلية محتملة أخيرة ستكون القدرة على اختيار صورة معينة “لتسليط الضوء عليها” أو تمييزها ضمن الشبكة بحيث تظهر أكبر من غيرها أو تبرز بطريقة ما.
بشكل عام، خيار رائع جديد لإضافة صور متعددة دون أن تطغى الصور على المنشور
هذه المشكلة:
دعم CSS Masonry الآن لـ Chrome و Edge!