it-swarm.asia

طرق العرض وعروض الشرائح و الترحيل في Drupal 7

الموقف كما يلي: لدي شريحة نوع محتوى ، وأريد عرض الشرائح الثلاث الأحدث في عرض الشرائح. تحتاج الشرائح إلى التدوير ، كما يجب أن يتم التحكم في الشرائح بواسطة جهاز النداء. يجب أن يحتوي جهاز النداء على ثلاث رصاصات/روابط/صور ليتمكن من القفز إلى شريحة معينة في عرض الشرائح. يجب أيضًا أن يكون جهاز النداء أسهم لليمين ولليسار لزيادة الشريحة وإنقاصها في عرض الشرائح.

يتم استخدام هذه التقنية في كل مكان حول الويب ، ولكن لا يمكنني معرفة كيفية إعداد هذا بشكل صحيح باستخدام عروض الشرائح وطرق العرض. أي مؤشرات من جميعكم من ذوي الخبرة دروباليتس هناك موضع ترحيب.

ابتهاج ، ليه.

8
Lester Peabody

(1) الوحدات المطلوبة (الإصدار: Drupal7.0)

Views
Views Slideshow
Chaos tool suite
Libraries
Link Field
Token

(2) تثبيت الوحدات

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

قم بتنزيل جميع الوحدات من Drupal وتثبيته في الدليل yoursitename/sites/all/modules. انتقل إلى http://www.yoursitename.com/node#overlay=admin/modules وتمكين هذه الوحدات على النحو التالي ؛

(1) طرق العرض (2) طرق عرض واجهة المستخدم (3) عرض شرائح المشاهدات (4) عرض شرائح المشاهدات: دورة (5) أدوات الفوضى (6) رابط (7) مكتبات (8) رمز (اختياري) (3) إنشاء ذاكرة تخزين مؤقت للصور

في Drupal7 imagecache هو جزء من الوحدة الأساسية ويسمى أنماط الصور. لذلك دعونا ننشئ مخبأين للصور من هنا ، واحدة للصورة المنزلق بالحجم الكامل والأخرى للصورة المصغرة. في هذا البرنامج التعليمي ، أستخدم أبعاد 935x293 (بكسل) لصورة شريط التمرير بالحجم الكامل وأبعاد 210x100 (بكسل) للصورة المصغرة. ملاحظة: تعتمد هذه التهيئة csn على احتياجاتك.

  • إعدادات صورة شريط التمرير بالحجم الكامل

انتقل إلى http://www.yoursitename.com/node#overlay=admin/config/media/image-styles وانقر على رابط إضافة نمط جديد (1) حدد اسمًا لنمط الصورة وانقر عند إنشاء زر نمط جديد (2) في شاشة التكوين التالية ، حدد النمط الجديد الذي تريده ثم انقر فوق زر إضافة (في هذا البرنامج التعليمي ، اخترت تغيير حجم النمط) (3) في الشاشة التالية ، قم بتعيين العرض والارتفاع وانقر فوق تأثير الإضافة زر. (قد تختلف الإعدادات حسب النمط الذي تختاره). لقد قمت بتعيين العرض 935 والارتفاع 293 بكسل.

افعل نفس العملية للصورة المصغرة أيضًا. (بالنسبة لأبعاد الصورة المصغرة ، قمت بتعيين العرض على أنه 210 والارتفاع 100 بكسل.) (4) إنشاء نوع محتوى جديد

دعنا ننشئ نوع محتوى جديدًا ، من شريط قائمة لوحة التحكم على الهيكل ثم أنواع المحتوى ، ثم انقر على الرابط إضافة نوع محتوى جديد.

(1) أعطي اسمًا يمكن قراءته بواسطة الإنسان ، وقد أطلقت عليه اسم Slider المميز (سيتم إنشاء اسم الماكينة تلقائيًا استنادًا إلى الاسم القابل للقراءة البشرية) (2) قدم وصفًا موجزًا ​​وملائمًا (3) إعدادات نموذج الإرسال ، أتركه الإعدادات الافتراضية (4) خيارات النشر ، راجعت المنشور فقط (جميع الإعدادات الأخرى غير محددة) (5) إعدادات العرض ، قمت بإلغاء تحديد معلومات التأليف والتاريخ. (6) إعدادات التعليق ، قمت بتعيين مخفي (معطل) (7) إعدادات القائمة ، أترك الإعدادات الافتراضية. (8) انقر فوق حفظ وإضافة زر الحقول (5) إنشاء حقول جديدة

هنا في هذا المثال أقوم بإنشاء ملفين فقط ، وهما حقل الصورة وحقل الارتباط. سنستخدم حقل الصورة لتحميل صورة شريط التمرير وحقل الارتباط لإنشاء رابط مخصص حيث نريد ربط شريط التمرير الخاص بنا.

إعدادات حقل الصورة

(1) Label: Slider Image
(2) Field: slider_image
(3) Field type: image
(4) Widget (form element): image
(5) Click Save button, and on the field settings page leave default settings and click on Save field settings button.
(6) On the image field configuration settings page you can configure as you wish.

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

باستخدام نفس الطريقة قم بإنشاء حقل الارتباط أيضًا.

إعدادات حقل الارتباط (1) التسمية: ارتباط المنزلق (2) الحقل: slider_link (3) نوع الحقل: ارتباط (4) عنصر واجهة المستخدم (عنصر النموذج): رابط (5) انقر فوق الزر حفظ ، لتكوينات حقل الارتباط ، اترك كل شيء إلى الإعدادات الافتراضية . لقد أعدت الحقل كما هو موضح أدناه ؛ حقل العنوان حقل الصورة حقل الارتباط حقل النص (يمكنك حتى إزالة هذا الحقل إذا لم يكن ذلك ضروريًا) إدارة العرض في علامة التبويب إدارة العرض ، يمكنك تكوين كيفية إخراج الحقل المطلوب دبلجه. لقد قمت بتعيين حقل الارتباط على أنه مخفي وقمت أيضًا بتعيين تسمية الصورة على أنها مخفية Drupal7: إدارة الحقول (6) إنشاء ميزة شريط تمرير المحتوى

لقد قمت بإنشاء أربعة محتوى منزلق مميز لهذا البرنامج التعليمي.

(1) انقر فوق إضافة رابط محتوى (2) إنشاء محتوى منزلق مميز (3) قم بإعطاء اسم عنوان مناسب (4) تحميل صورة شريط التمرير (5) قم بإعطاء أسماء الحقول البديلة وعنوان العنوان (6) قم بإعطاء عنوان الارتباط وعنوان url حيث تريد شريط التمرير المراد ربطه (7) اترك جميع الإعدادات الأخرى كإعدادات افتراضية باستثناء حقل المسار إذا أردت ، يمكنك إعطاء اسم مستعار لعنوان URL مألوف لتحسين محركات البحث. (8) احفظ المحتوى.

بنفس الطريقة قم بإنشاء المزيد من محتويات Slider المميزة (لقد قمت بإنشاء أربعة محتويات) (7) إنشاء طريقة عرض جديدة

حان الوقت الآن لإنشاء عرض الشرائح الجديد. من قائمة لوحة التحكم ، انقر على الهيكل ثم انقر على طرق العرض.

(1) انقر فوق إضافة رابط عرض جديد (2) منح اسم العرض ، لقد سميت باسم Slider المميز (سيتم إنشاء اسم الماكينة تلقائيًا) (3) قدم وصفًا للعرض بشكل صحيح (4) اختر إظهار المحتوى من نوع Slider المميز (المحتوى الخاص بك أكتب اسم). (5) قم بإلغاء تحديد إنشاء صفحة ثم حدد إنشاء كتلة (6) اكتب عنوان كتلة واختر تنسيق العرض كعناصر "عرض شرائح" لعناصر "الحقول" في الصفحة 5 (يمكنك إدخال عدد العناصر التي تريد عرضها) (7 ) انقر على الزر "متابعة وتحرير" إعدادات حقل طرق العرض أولاً دعنا نضيف حقل رابط (يجب أن يكون الرابط هو الحقل الأول لكي يعمل كل شيء بشكل صحيح) ، لذا انقر على أيقونة إضافة ومن مجموعات التصفية حدد المحتوى إضافة محتوى: رابط ، انقر فوق "زر إضافة وتكوين" في نافذة التكوين التالية ، قم بإلغاء تحديد "إنشاء تصنيف". استبعاد "تحقق" من العرض. انقر فوق "تطبيق زر"

بعد ذلك ، دعنا نضيف حقل صورة ، لذلك انقر على أيقونة إضافة ومن مرشح المجموعات حدد المحتوى إضافة محتوى: حقل الصورة (ملاحظة: تأكد من اختيار حقل الصورة الذي قمنا بتجميعه لنوع محتوى شريط التمرير هذا فقط.) انقر فوق "إضافة وتكوين زر "في نافذة التهيئة التالية قم بإلغاء تحديد" إنشاء تسمية ".

المنسق: الصورة (إذا قمت بتثبيت Colorbox أو Lightbox يمكنك اختيارهما هنا!) نمط الصورة: الحجم الكامل (اختر ذاكرة التخزين المؤقت التي قمت بإنشائها في الخطوة أعلاه) رابط الصورة إلى: لا شيء إعدادات النمط: اترك الإعدادات الافتراضية لا يوجد سلوك نتيجة: اترك الإعدادات الافتراضية إعادة كتابة النتائج: تحقق من إخراج هذا الحقل كارتباط مسار الارتباط: [view_node] (ملاحظة: قم بالتمرير قليلاً ويمكنك رؤية أنماط الاستبدال التي تم إنشاؤها بواسطة وحدة Core Token ، (إذا لم نقم بتعيين حقل الارتباط على أنه أول لا يمكن رؤية خيار حقل الرابط هنا) انسخ [view_node] فقط ثم مرر لأعلى والصقه في حقل مسار الرابط.) انقر على "تطبيق زر"

أخيرًا ، نحتاج إلى حقل واحد آخر للصورة المصغرة ، لذا دعنا ننقر على رمز الإضافة ومن مجموعات التصفية حدد المحتوى إضافة المحتوى: حقل الصورة (ملاحظة: تأكد من اختيار حقل الصورة الذي قمنا بتجميعه لنوع محتوى شريط التمرير هذا فقط.) انقر على زر "إضافة وتكوين" في نافذة التكوين التالية وقم بإلغاء تحديد "إنشاء تسمية" وتحقق من EXCLUDE FROM DISPLAY، Formatter: Image (إذا قمت بتثبيت Colorbox أو lightbox يمكنك اختيارهم هنا!) نمط الصورة: صورة مصغرة (اختر ملف ذاكرة التخزين المؤقت قمت بإنشائه في الخطوة أعلاه) رابط الصورة إلى: لا شيء إعدادات النمط: اترك الإعدادات الافتراضية لا يوجد سلوك نتيجة: اترك الإعدادات الافتراضية إعادة كتابة النتائج: تحقق من إخراج هذا الحقل كرابط رابط مسار: [view_node] (ملاحظة: قم بالتمرير قليلاً يمكنك رؤية أنماط الاستبدال التي تم إنشاؤها بواسطة وحدة Core Token ، (إذا لم نقم بتعيين حقل الرابط كأول مرة لا يمكننا رؤية خيار حقل الرابط هنا) قم بنسخ [view_node] فقط ثم قم بالتمرير لأعلى ولصقه في حقل مسار الارتباط. ) انقر فوق "زر تطبيق"

إعدادات عرض الفلاتر

في views3 يتم إنشاء المرشحات في البداية بينما نختار نوع المحتوى والإعدادات الأخرى! إذا كنت بحاجة إلى أي ملف إضافي ، يمكنك إنشاؤه هنا!

إعدادات نمط المشاهدات

انقر فوق تنسيق عرض الشرائح | يستقر وفي نافذة configuratioin التالية تعيين على النحو التالي ؛ (1) نوع القائمة: قائمة غير مرتبة (2) فئة الغلاف: اترك الإعدادات الافتراضية (3) النمط> الجلد: deafult (4) العروض التقديمية> نوع عرض الشرائح: دورة (5) خيارات الدورة تحتاج إلى تنزيل المكوّن الإضافي لدورة jQuery ونسخ jquery. cycle.all.min.js إلى Sites/all/libraries/jquery.cycle يمكنك العثور على المكون الإضافي على http://malsup.com/jquery/cycle .

في اللغة الإنجليزية البسيطة قم بإنشاء مجلد باسم "مكتبات" في الموقع/كل الدليل ثم قم بإنشاء مجلد آخر باسم "jquery.cycle" في هذا الدليل وأخيرًا قم بنسخ ولصق "jquery.cycle.all.min.js" فقط في هذا الدليل.

(6) Transittion: Fade (7) الإجراء: الإيقاف المؤقت عند التمرير (8) تعديلات Internet Explorer: افتراضي (9) الأدوات: يمكنك اختيار أحدهما أو أسفله أو كلاهما (أختار الجزء السفلي هنا ، والإعدادات المتقدمة على النحو التالي ؛) (10) الحاجيات السفلية> جهاز النداء> نوع جهاز النداء: الحقول (11) حقل جهاز النداء: المحتوى: الصورة (ملاحظة: آخر واحد أضفناه للإبهام ، لا تخطئ لأن كلا المجالين سيطلق عليهما الاسم نفسه.) (12) تنشيط الشريحة والتوقف مؤقتًا على Pager Hove: تم فحصه وضوابطه وعداد شريط التمرير دون تحديد. (13) انقر فوق الزر تطبيق.

تنسيق إعدادات إظهار الحقول

Inline fields: Choose the thumbnail field as inline.
Click Apply button. (Note: Well it actually doesn't change much in appearance but it does change in the code. Next step use the firebug and find the class and add some styles to display properly.)

(8) إنشاء منطقة مخصصة (خطوة اختيارية)

(1) في ملفهم ، افتح ملف your_theme_name.info وأضف منطقة جديدة مثل هذه الموضحة أدناه ؛ المناطق [featured_slider] = شريط التمرير المميز وحفظ ملف .info. (2) افتح ملف السمات page.tpl.php وأضف هذه الشفرة حيث تريد عرض الشريحة كما هو موضح أدناه ؛

يمكنك أيضًا إنشاء قالب صفحة أمامي مخصص مثل page - front.tpl.php بحيث لا تحتاج إلى إجراء أي تغييرات على قالب page.tpl.php الافتراضي. [9] تمكين وتكوين الكتلة

الآن ستكون هذه الكتلة مرئية في منطقة تعطيل الكتل ، لذلك من قائمة لوحة التحكم ، انتقل إلى الهيكل> الحظر وقم بتمكين الكتلة إلى منطقة المظاهر الافتراضية أو المنطقة المخصصة التي أنشأناها (مميزة_slider). (تختلف المناطق باختلاف السمة التي تستخدمها.)

إعدادات تكوين القالب بعد تمكين الكتلة ، تحصل على رابط لتكوين الكتلة ، لذا انقر على الرابط تكوين وعلى قسم الإعدادات المعين على النحو التالي ؛

(1) حظر العنوان (إذا كنت لا تريد عرض عنوان blobk فقط اكتب) (2) مرة أخرى تحصل على جميع إعدادات المنطقة الخاصة بالموضوع المحدد. في إعدادات الرؤية (3) صفحات> إظهار الكتلة في صفحة محددة: اختر فقط الصفحات المدرجة واكتب بحيث يتم عرض هذا الحظر فقط على الصفحة الأمامية. نصائح CSS لعرض الصور المصغرة المضمنة

أضف رموز CSS هذه إلى ورقة أنماط المظاهر لعرض الصور المصغرة المضمنة. .views-slideshow-control-bottom .views-slideshow-pager-field-item {float: left؛ الهامش: 20 بكسل 6 بكسل ؛ } قم بإجراء التعديلات اللازمة.

14
user842

ألق نظرة على هذا البودكاست لوسائل الإعلام الخردلية: طرق عرض شرائح عرض Theming .

أثناء البث الصوتي ، يراجع بوب بعض أساسيات عرض شرائح طرق العرض بالإضافة إلى كيفية تصميم الإخراج. يعتمد على Drupal 6 ، ولكن أعتقد أن معظم الأساسيات والدروس ستكون متشابهة. مع القليل فقط من CSS ، يمكن أن يظهر عرض الشرائح Ton أفضل. أوصي بشدة بمشاهدة هذا البودكاست إذا كنت تريد عرض شرائح لطيف المظهر.

2
Laxman13

إذا كنت تريد معرفة المزيد من عروض شرائح العرض (على سبيل المثال مع الصور المصغرة) ، يجب أن ترى هذا البرنامج التعليمي الجيد: http://www.brightwebsitedesign.com/how-to-install-views-slideshow-module-on- drupal7

1
gbwebservice