 |
ملخص | يضيف معرض صور (أو عدة معارض) إلى منشور |
 |
المستودع | GitHub - NateDhaliwal/discourse-post-image-carousel: Adds a image carousel in posts |
 |
دليل التثبيت | كيفية تثبيت سمة أو مكون سمة |
 |
جديد على سمات Discourse؟ | دليل المبتدئين لاستخدام سمات Discourse |
تثبيت مكون السمة هذا
يضيف هذا المكون معرض صور مدعوم بـ Splide/Swiper في المنشورات. تتمتع معارض Swiper بميزات إضافية مثل الصور المصغرة والرسوم المتحركة المختلفة.
Swiper:
Swiper مع تمكين الصور المصغرة:
Splide:
تمت إضافة زر إلى شريط أدوات المنشئ لإضافة معارض، مع صورة عنصر نائب:
علامات المعارض هي كالتالي:
[wrap="Carousel" autoplay=true/false interval=<duration in ms>/false loop=true/false thumbs=true/false thumbs_loop=true/false]
![image1]()
![image2]()
![image3]()
...
[/wrap]
لتسهيل عملية إنشاء المعارض، سيؤدي النقر على الزر الموجود في شريط أدوات المنشئ إلى فتح نافذة منبثقة (شكرًا لمكونات Discourse GIFs TC!)، حيث يمكنك اختيار تكوين المعرض:
يمكنك بعد ذلك إضافة المزيد من الصور في [wrap].
الإعدادات (لكل معرض) هي كالتالي:
enable_thumbnails: عرض الصور المصغرة للصور أسفل المعرض.
enable_loop: جعل المعرض يتكرر إلى البداية عند وصوله إلى النهاية.
enable_thumbnail_loop: جعل الصور المصغرة للمعرض تتكرر عند وصولها إلى النهاية.
إذا كان لديك عدد قليل جدًا من الصور، فإن تمكين هذا الإعداد يمكن أن يتسبب في حركة متقطعة وغير سلسة للمعرض. يُنصح بوجود المزيد من الصور قبل تمكين هذا.
enable_autoplay: السماح للمعرض بالتشغيل تلقائيًا.
autoplay_interval: عدد المللي ثانية للانتظار قبل تشغيل الشريحة التالية. يُستخدم بالاقتران مع enable_autoplay. إذا تركت هذا فارغًا، فسيكون الافتراضي 5000.
الإعدادات
الإعدادات (العامة) هي كالتالي:
carousel_software: البرنامج الذي ستستخدمه المعارض (Swiper/Splide)؛ يُفضل Swiper وهو الافتراضي.
image_carousel_placeholder: الصورة الافتراضية للمعرض عند إنشائه. افتراضيًا، تكون صورة عنصر نائب عادية مضمنة:
show_pagination_buttons: عرض نقاط الترقيم أسفل المعرض لتوفير سهولة التنقل بين الصور.
image_transition_animation: [لـ Swiper فقط] رسوم متحركة للصور عند الانتقال إلى التالية؛ الافتراضي هو “slide”، والخيارات هي:
- cube
- fade
- cards
- flip
- slide (الافتراضي)
pagination_button_color: لون نقاط الترقيم؛ ترك هذا فارغًا يستخدم افتراضيات Swiper/Splide.
active_pagination_button_color: لون نقطة الترقيم عندما تكون حاليًا عند تلك الشريحة؛ ترك هذا فارغًا يستخدم افتراضيات Swiper/Splide.
ملاحظات
الدعم الحالي لـ Splide في هذا المكون لا يسمح بالصور المصغرة ورسوم الانتقال المتحركة. سأكون سعيدًا بقبول طلبات السحب (PRs) للصور المصغرة لـ Splide (وهي أكثر تعقيدًا).
إذا أراد أي شخص تنفيذ صور مصغرة عمودية، فلدي رمز في المستودع لذلك (معلّق) لا يعمل بشكل جيد جدًا. يسعدني قبول طلبات السحب (PRs) لإضافة هذا (أو البناء على التنفيذ الحالي).
شيء آخر، أنا أستكشف حاليًا طريقة لإضافة صور المعرض داخل نافذة الإنشاء، ولكني أواجه مشكلة موصوفة هنا. سأكون ممتنًا إذا استطاع شخص ما الرد هناك!
شكر
شكرًا لـ @Arkshine على الإلهام هنا. أفهم أنه أنشأ المستودع هنا (ومع ذلك، اخترت عدم الإشارة إلى هذا المستودع لهذا المكون).
آمل أن يكون هذا مفيدًا لشخص ما!
لم أنشر بعد لأنني أعمل على عرض المحرر الغني (prosemirror) ويستغرق الأمر وقتًا لفهم كل هذه الأشياء الجديدة.