برنامج تعليمي شامل حول وحدة ColorBox النمطية لدروبال 9 (وكيفية تمديدها)

نشرت: 2020-09-29

تلعب الصور دورًا مهمًا في تحسين تجربة المستخدم لموقع الويب. أظهرت دراسة أن 90٪ من المعلومات التي ننقلها إلى أدمغتنا هي معلومات مرئية. تعمل العديد من مواقع الويب حول هذه النظرية وحدها وتضرب المستخدمين بأطنان من الوسائط الغنية مثل الصور وملفات الفيديو. يتجاهل معظمهم جانب العرض لملفات الوسائط هذه وينتهي بهم الأمر بتجربة مستخدم مخيبة للآمال. ما يحتاجون إليه هو أداة مثل ColorBox وهي مكون إضافي jQuery خفيف الوزن للغاية يسمح لك بعرض الصور بأناقة وبشكل حدسي. الأنماط والوظائف قابلة للتخصيص بدرجة كبيرة عبر CSS و Javascript. وحدة Drupal ColorBox متوافقة مع دروبال 6 و 7 و 8 والآن دروبال 9 أيضًا! في هذه المقالة ، ستتعلم كيفية تكوين وتنفيذ وتوسيع وحدة ColorBox لدروبال 9.

ColorBox لدروبال

تتكامل وحدة ColorBox مع المكون الإضافي ColorBox jQuery في دروبال. البرنامج المساعد خفيف الوزن قابل للتخصيص لـ jQuery. من بين وحدات "box" المنافسة الأخرى التي يتم استخدامها لأغراض مماثلة (Thickbox ، و Lightbox2 ، و Shadowbox ، و Greybox ، وما إلى ذلك) ، تعد وحدة ColorBox هي الأكثر شيوعًا ولديها أكبر عدد من عمليات التثبيت. لا ينتهي استخدام Drupal ColorBox فقط بعرض الصور التي تم تحميلها بشكل جميل. كما أنه يدعم التصميم لمقاطع الفيديو ، وملفات pdf ، والعقدة ، والتصنيف ، ونماذج الويب ، والمحتوى ذي الإطارات المضمنة والمزيد. يمكن التحكم في التصميم من خلال CSS بحيث يكون المظهر قابلاً للتخصيص بدرجة كبيرة. يمكن أيضًا تخصيص الوظائف بسهولة عبر ملف JS دون الحاجة إلى لمس HTML. وهو يدعم تجميع الصور أيضًا ويقوم بتحميل الصور القادمة مسبقًا

خطوات تثبيت وحدة ColorBox

1. قم بتثبيت وحدة ColorBox باستخدام الملحن.

 composer require 'drupal/colorbox:^1.6'
composer require 'drupal/colorbox:^1.6'

2. قم بتنزيل المكون الإضافي ColorBox 1.x.
1. باستخدام الأمر Drush
(ملاحظة: إذا كنت تستخدم الأمر drush لتثبيت مكون ColorBox الإضافي ، فيجب عليك تمكين الوحدة ثم تشغيل الأمر أدناه)

 drush colorbox-plugin
drush colorbox-plugin

2. قم بتنزيل المكون الإضافي ColorBox يدويًا
قم بتنزيل المكون الإضافي Colorbox وفك ضغطه في المكتبات /. تأكد من أن المسار إلى ملف البرنامج المساعد يبدو كما يلي:

 “/libraries/colorbox/jquery.colorbox-min.js”
“/libraries/colorbox/jquery.colorbox-min.js”

3. قم بتمكين وحدة Drupal ColorBox.

 drush en -y colorbox
drush en -y colorbox

تهانينا! أنت الآن جاهز لاستخدام ميزات وحدة ColorBox.

تكوين وحدة ColorBox

قم بتكوين وحدة Drupal ColorBox بالانتقال إلى Configuration -> Media -> Colorbox settings .

كيفية إنشاء معرض صور باستخدام ColorBox

1. لإنشاء معرض صور ، نحتاج أولاً إلى إضافة حقل صورة لأحد أنواع المحتوى. اختر اسم التصنيف ثم انقر فوق الزر حفظ ومتابعة.

2. الخطوة التالية هي تكوين الإعدادات الميدانية. يمكننا إضافة الصورة الافتراضية في حالة عدم تحميل الصور. نص بديل لغرض الوصول وعنوان. يشير العدد المسموح به من إعدادات القيم إلى الحد الأقصى للتحميل للحقل. حدد الخيار المطلوب ثم انقر فوق زر حفظ إعدادات الحقل.

3. سنقوم بعد ذلك بتعيين التكوينات الأخرى لحقول الصورة هذه مثل امتدادات الملفات المسموح بها ، ودليل الملفات ، ودقة الصورة القصوى والدنيا ، والحد الأقصى لحجم التحميل ، والبدائل والعنوان للصورة ، ثم انقر فوق حفظ الإعدادات.

4. الآن ، انتهينا من تكوين حقل الصورة. لنقم بتعيين خيار التنسيق لحقل الصورة الذي تم إنشاؤه لـ ColorBox. انتقل إلى إدارة عرض نوع المحتوى ثم قم بتعيين خيار التنسيق من القائمة المنسدلة على أنه ColorBox. يتيح لنا النقر فوق الترس الموجود بجوار خيار التنسيق تخصيص الصورة المعروضة. بمجرد تحديث جميع الخيارات ، انقر فوق زر التحديث ثم انقر فوق خيار الحفظ.

5. الآن دعنا نضيف بعض المحتوى إلى معرض صور ColorBox الخاص بنا عن طريق النقر فوق إضافة محتوى. يمكننا تغيير ترتيب الصور التي تم تحميلها بناءً على أوزان الصور. ثم اضغط على زر الحفظ. سيبدو عرض المحتوى على النحو التالي.

6. أخيرًا ، يؤدي النقر فوق أي من الصور إلى عرض الصورة داخل نموذج ColorBox كما هو موضح أدناه.

يمكنك أيضًا أن تفعل الشيء نفسه مع حقل الفيديو المضمن.

كيفية التكامل مع وحدة ColorBox المضمنة

تسمح وحدة Colorbox Inline للمستخدم بفتح المحتوى الموجود بالفعل على الصفحة داخل ColorBox.

1. قم بتثبيت الوحدة النمطية المضمنة colorbox

 composer require 'drupal/colorbox_inline:^1.2'
composer require 'drupal/colorbox_inline:^1.2'

2. قم بتمكين الوحدة النمطية باستخدام أمر drush / تمكين يدويًا من خلال دروبال UI

 drush en -y colorbox_inline
drush en -y colorbox_inline

3. افتح الصورة في ColorBox modal الموجود على الصفحة باستخدام ارتباط

4. انتقل لإضافة محتوى -> أي نوع محتوى به حقل نصي

قم بتغيير تنسيق النص من html أساسي إلى html كامل

6. ثم اضغط على زر حفظ.

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

عند عرض هذه الصفحة ، يمكنك مشاهدة ارتباط بالصورة. وعند النقر فوق ارتباط عرض الصورة ، ستظهر نافذة ColorBox المنبثقة كما هو موضح في الصورة أدناه.

كيفية دمج ColorBox مع وحدة تحميل ColorBox

تسمح وحدة ColorBox Load للمستخدمين بتحميل المحتوى في ColorBox باستخدام Ajax. باستخدام هذه الوحدة ، يمكن للمستخدمين تحديد سلسلة من المسارات التي عند تقديمها ستفتح ColorBox بالمحتوى. يعتمد ذلك على وحدة NG Lightbox لواجهة إدارة المسارات. يمكن استخدام هذه الطريقة لعرض العقد والصفحات ونماذج الويب والمزيد.
قم بتثبيت وحدة تحميل colorbox

 composer require 'drupal/colorbox_load:^1.2'
composer require 'drupal/colorbox_load:^1.2'

قم بتمكين الوحدة باستخدام أمر drush / التمكين يدويًا من خلال دروبال UI

 drush en -y colorbox_load
drush en -y colorbox_load

تنفيذ نافذة تسجيل دخول منبثقة باستخدام وحدة ColorBox Load .

1. قم بتكوين وحدة ColorBox Load بالانتقال إلى Configuration -> Ng Lightbox (Under Media). يمكننا تكوين المسارات التي نريد توفير العرض المعياري لـ ColorBox وعرض نموذج ColorBox وفئة خيارات العرض المبسط وخيارات العارض. (اختر خيارك حسب الرغبة).

2. الآن يمكننا رؤية تطبيق Drupal ColorBox modal لصفحة تسجيل الدخول من خلال النقر على زر تسجيل الدخول في الصفحة الرئيسية.

كيفية دمج ColorBox مع طرق عرض دروبال

بالنسبة لبعض مواقع الويب ، قد نحتاج إلى ميزة يمكنها عرض نموذج ColorBox لقائمة من الصور. يمكن القيام بذلك بمساعدة وحدة المشاهدات.
1. انتقل إلى الهيكل -> وجهات النظر -> إضافة عرض.
2. أضف حقل الصورة لعرض وتكوين المنسق إلى ColorBox والإعدادات الأخرى وفقًا لذلك ثم احفظ العرض.

3. الآن ألق نظرة على العرض الذي قمت بإنشائه للتو (في حالتي ، قمت بإنشاء عرض كصفحة). يمكنك مشاهدة قائمة بالصور وعند النقر فوق أحدها ، تظهر الصورة الفردية في نافذة ColorBox المنبثقة.