يمكن ترتيب الصور أفقيًا (من اليسار إلى اليمين) أو عموديًا. الترتيب الأفقي مثالي للصور من المجلات أو قصص الهزلية أو ما شابه. أيضًا، عند الضغط على “التالي” في وضع الإضاءة، ستظهر الصورة الصحيحة.
الصورتان أدناه توضحان الفرق. الصورة على اليمين تستخدم الترتيب الأفقي.
الترتيب الافتراضي هو أفقي، لكنه يمكن تغييره من الإعدادات. كما يمكن تغيير ترتيب معرض معين بإضافة vertical أو horizontal (يمكن استخدام v/h أيضًا) إلى السمة في المحرر هكذا: <div data-masonry-gallery="vertical">.
→ يبدو هذا المكون مشابهًا جدًا لمعرض صور Tiles الخاص بـ Joe (Tiles image gallery). هل هذا نسخة طبق الأصل أم ماذا؟
لقد استخدمت Tiles لفترة طويلة وأحببته كثيرًا. لذا نعم، يمكنك بالتأكيد القول إنه متأثر به بشدة . لكن هناك الكثير من الاختلافات، لذا قررت مشاركته. فيما يلي قائمة ببعض الاختلافات:
لا توجد تبعيات.
لا يوجد jQuery.
الترتيب الأفقي.
الصور الصغيرة لن تكسر التخطيط.
معاينة صحيحة أثناء التعديل.
إمكانية تحديد صفوف متعددة مع فواصل أسطر عند إضافة معرض.
استخدام دالة API decorateCookedElement بدلًا من decorateCooked.
التنويحات والتحسينات موضع ترحيب!
ستظهر الصور الصغيرة في المعرض، لكن لن يتم إنشاء عرض إضاءة (lightbox). هذا هو السلوك الافتراضي لـ Discourse. ومع ذلك، يمكن تغيير ما يُعتبر صورة صغيرة عن طريق تعديل الإعدادات أقصى عرض للصورة وأقصى ارتفاع للصورة. القيم الافتراضية هي 690 بكسل و500 بكسل على التوالي.
يستخدم هذا المكون إصدار API 0.8.42. إذا لم تقم بالتحديث منذ مايو 2020، فيجب عليك التحديث لاستخدامه.
مكون رائع. لقد كنت أبحث عن بديل لمعرض صور “تيلز” منذ فترة!
ما هي آراؤك بشأن إضافة خيار المعرض التلقائي لتطبيقه على جميع الصور؟ بشكل أساسي، كلما وُجدت 3 صور أو أكثر دون أي عناصر أخرى بينها، يتم تمكين عرض المعرض الطوبالي تلقائيًا. (جرب “تيلز Image Gallery” شيئًا مشابهًا في فرع auto-tiles الخاص بها).
نعم، لقد رأيت ذلك الفرع. إنها ميزة حقًا مثيرة للاهتمام. لا أعرف ما إذا كانت الطريقة التي تم بها تنفيذها في Tiles تعمل على هذا المكون، أو ما إذا كانت هناك حاجة إلى بعض الكود الآخر. لكن سأبحث فيها بالتأكيد!
إذا كان لديك Tiles مثبتة على موقعك وتريد التبديل إلى Masonry، فيجب عليك تغيير سمة divs المعرض إلى data-masonry-gallery في جميع منشورات المعرض القديمة لديك. وذلك إذا كنت ترغب في أن تظل منشورات معرضك القديمة تظهر بشكل صحيح، لكن لا ترغب في تثبيت المكونين معًا.
فكرت في مشاركة كيفية القيام بذلك، حيث قمت بالتبديل على موقعي الخاص. ربما يكون ذلك مفيدًا لشخص ما.
الطريقة الأكثر وضوحًا هي تحرير المنشورات يدويًا. وهذا يعمل طالما لم يكن لديك عدد كبير من المنشورات التي تحتاج إلى تغييرها، رغم أنه قد لا يزال مزعجًا العثور على كل منشور. لكن لا تقلق، استكشف البيانات لإنقاذك! قم بتشغيل SQL التالي وستحصل بالضبط على ما تحتاجه.
SELECT user_id, topic_id, post_number
FROM posts p
WHERE raw ~~ '%data-theme-tiles%'
إذا كان هناك عدد كبير جدًا لتعديله يدويًا، فيمكنك استخدام rake لاستبدال كل نص. للقيام بذلك، تحتاج إلى الدخول عبر SSH إلى خادمك وتشغيل:
cd /var/discourse
./launcher enter app
rake posts:remap["data-theme-tiles","data-masonry-gallery"]
يمكنك قراءة المزيد حول هذا الحل في هذا المنشور. يرجى ملاحظة التحذير من ذلك المنشور بخصوص أمر rake posts:remap:
من المرجح أيضًا وجود طرق أخرى للقيام بذلك. على سبيل المثال، إذا كنت ترغب في ذلك، فيمكنك تعديل كود المكونات بحيث يبحث عن السمتين معًا.
تلك الميزة شبه مكتملة. قمت بتعديل الكود من Tiles، ويحتاج فقط إلى إجراء المزيد من الاختبارات (مع سيناريوهات/تعديلات مختلفة للموقع). سأحاول إيجاد الوقت للقيام بذلك قريبًا، ولكن من المتوقع إضافتها خلال أسبوع. لو كان لدي وقت أكثر .
يُشكّل TC “Slick Image Gallery” جميع المشاكل المشابهة لـ “Tiles Image Gallery”، مثل كسر الصور الصغيرة للتخطيط وعدم قدرة المعاينة على إبطاء المعرض بشكل صحيح، وما إلى ذلك.
ليس لدي أي خطط للقيام بذلك في الوقت الحالي. ربما لاحقًا إذا توفرت لديّ الوقت.. إذا كان الأمر يتعلق بإصلاح بسيط، فقد أقوم بإنشاء طلب سحب (pull request).
لقد أضفت أيضًا سمة div المسماة grid (أو g) لتنسيق شبكي (على الرغم من اسم المكون )، والتي تجعل كل صف بارتفاع ثابت (بناءً على ارتفاع أعلى صورة في الصف). قد يكون هذا مفيدًا إذا كانت لديك صور ذات ارتفاعات متقاربة.
نحن نختبر حاليًا الإصدار المستقر 2.8. ميزة auto enabled categories لا تعمل عند تحديد فئة معينة. لقد حاولنا إضافة معرف الفئة أو اسم الفئة المختصر للفئة. عندما تُترك ميزة auto enabled categories فارغة، فإنها تعمل.
هذه الميزة مدمجة الآن في نواة Discourse، انظر الإعلان بشأن شبكات الصور في Discourse.
→ فماذا تقصد بـ “تخصيص الترتيب”؟
→ يبدو هذا المكون مشابهًا جدًا لمعرض صور Tiles الخاص بـ Joe (Tiles image gallery). هل هذا نسخة طبق الأصل أم ماذا؟
. لكن هناك الكثير من الاختلافات، لذا قررت مشاركته. فيما يلي قائمة ببعض الاختلافات:ستظهر الصور الصغيرة في المعرض، لكن لن يتم إنشاء عرض إضاءة (lightbox). هذا هو السلوك الافتراضي لـ Discourse. ومع ذلك، يمكن تغيير ما يُعتبر صورة صغيرة عن طريق تعديل الإعدادات
.
)، والتي تجعل كل صف بارتفاع ثابت (بناءً على ارتفاع أعلى صورة في الصف). قد يكون هذا مفيدًا إذا كانت لديك صور ذات ارتفاعات متقاربة.