ابنوا معرض صور.
هنا تبنون معرض صور: عنوان موسّط وثلاث صور جنبًا إلى جنب بنص بديل وعرض شرائح على شريط رمادي. استخدموه لعرض مكان أو فعالية بالصور. ولعرض مشاريع بوصف لكل منها، اتبعوا بناء معرض أعمال بدلًا من ذلك.
يبني الفيديو معرض لوحات طلاب لجامعة.
قبل أن تبدؤوا
- يملك دوركم صلاحية التحرير باستخدام DXPR Builder.
- تحمل مكتبة الوسائط ست صور على الأقل، مقصوصة بالنسب نفسها.
- الصفحة مفتوحة في المنشئ. فلصفحة جديدة، انتقلوا إلى المحتوى > إضافة محتوى > صفحة هبوط (
/node/add/landing_page) وانقروا حفظ.
الخطوة 1: إضافة الترويسة
- انقروا إضافة العناصر على الصفحة الفارغة واختاروا القسم من تبويب التخطيط.
- مرّروا المؤشر فوق القسم وافتحوا المزيد > الإعدادات. تحت فئات HTML اختاروا توسيط النص، ثم انقروا حفظ.
- انقروا + على القسم واختاروا النص من تبويب المحتوى.
- اكتبوا «معرض الفنون الطلابية» كـ عنوان 2، وأضيفوا سطرًا واحدًا من المقدمة وانقروا حفظ. يطبع القالب عنوان الصفحة كالعنوان 1 للصفحة. ولجعل هذا العنوان هو العنوان 1 بدلًا منه، راجعوا بناء صفحات صديقة لتحسين محركات البحث.
الخطوة 2: إضافة شبكة الصور
- مرّروا المؤشر فوق القسم وانقروا إضافة قسم تحت. انقروا + على القسم الجديد واختاروا صفًا؛ فيأتي بعمودين متساويين.
- انقروا أيقونة الشبكة (تخطيط الأعمدة) للصف، واختاروا الإعداد المسبق 1/3 + 1/3 + 1/3 وانقروا حفظ.
- انقروا + في العمود الأول واختاروا صورة.
- انقروا اختيار صورة، وابحثوا في مكتبة الوسائط مع تطبيق المرشحات، وانقروا صورة وانقروا إدراج المحدد.
- افتحوا لوحة SEO واكتبوا سمة Alt: ما يجب أن يعرفه من لا يستطيع رؤية الصورة. انقروا حفظ.
- كرّروا للعمودين الثاني والثالث.
الصور المقصوصة بالنسب نفسها تُبقي الصف متساويًا.
الخطوة 3: إضافة عرض الشرائح
- أضيفوا قسمًا ثالثًا مع إضافة قسم تحت وافتحوا المزيد > الإعدادات الخاصة به. اختاروا توسيط النص تحت فئات HTML وخلفية رمادية فاتحة في لوحة النمط. انقروا حفظ.
- انقروا + على القسم واختاروا معرض الصور.
- انقروا اختيار صورة، وابحثوا في المكتبة، وانقروا ثلاث صور وانقروا إدراج المحدد، ثم انقروا حفظ.
- انقروا + على القسم مجددًا واختاروا نصًا؛ فيهبط فوق الكاروسيل. اكتبوا «عرض الشرائح» كـ عنوان 2 وانقروا حفظ.
الخطوة 4: الحفظ والمعاينة
- انقروا حفظ على شريط أدوات المنشئ.
- افتحوا قائمة العرض (أيقونة العين) واختاروا معاينة.
للمضي أبعد
غير معروض في الفيديو:
- التسميات التوضيحية: ضعوا بطاقة في العمود وأضيفوا عنصر نص بالتسمية في داخلها. ثم أضيفوا الصورة داخل البطاقة؛ فتهبط فوق التسمية.
- الصور بالحجم الكامل: اضبطوا رابط الصورة على الملف بالحجم الكامل وهدف رابط الصورة على نافذة جديدة.
- النمط: على كل صورة، اضبطوا نصف قطر الحدود على 4 والظل المنسدل على 1 في لوحة النمط لرفع ناعم.
- توقيت عرض الشرائح: اضبطوا الفاصل الزمني على الكاروسيل، بالمللي ثانية. وتحت إخفاء، حدّدوا إخفاء عنصر ترقيم الصفحات أو إخفاء زرّي السابق/التالي لإزالة عناصر التحكم تلك.
- معرض يملأ نفسه: على البنية > طرق العرض > إضافة عرض، أنشئوا عرضًا من وسائط الصور بمعروض كتلة بتنسيق الشبكة. أدرجوه من تبويب طرق عرض Drupal، وتظهر الرفوعات الجديدة وحدها.
ما سترونه
يفتتح العنوان الموسّط الصفحة، تليه ثلاث صور جنبًا إلى جنب. وعلى الشريط الرمادي تحته، يعرض عرض الشرائح صورة واحدة في المرة وينتقل إلى التالية كل خمس ثوانٍ.
إذا لم تظهر الصور كما هي معروضة
- إدراج المحدد لا يضيف صورة. كانت المكتبة ما زالت تُعاد تحميلها بعد تطبيق المرشحات، فنقرتكم لم تحدّد الصورة. انتظروا حتى تستقر الشبكة، وتأكدوا من أن الصورة تعرض علامة تحديد، وانقروا إدراج المحدد مجددًا.
- مكتبة الوسائط فارغة. لا صور مرفوعة بعد، أو متصفح الوسائط غير مُعَد. راجعوا الصور لا تُرفَع أو تختفي.
- الصور الثلاث بارتفاعات مختلفة. نسبها مختلفة. قصّوها بالنسب نفسها، وارفعوها مجددًا واختاروا النسخ الجديدة.
- ذهبت تغييراتكم بعد إعادة التحميل. غادرتم الصفحة قبل نقر حفظ على شريط أدوات المنشئ. وإذا عرض الحفظ خطأ، راجعوا التغييرات لا تُحفَظ.
ما الخطوة التالية؟
- عنصر الصورة لكل إعدادات الصورة
- عنصر معرض الصور لخيارات عرض الشرائح
- معرض الأعمال لشبكة مشاريع بمرشح