ทำ slide banner บน drupal 7

จะเขียนเก็บไว้นานละแต่งานยุ่งๆ ก็เลยไม่ได้เขียนซะทีวิธีการทำ slide banner ในหน้าเว็บ drupal ของเรา จะให้มันหมุนแบบไหนก็เลือกได้ตามสะดวกพร้อมคลิกที่ banner ไปยัง url อื่นๆที่เราต้องการได้ด้วย มาดูวิธีการทำกันครับ

อันนี้เป็นหนึ่งวิธีการทำ slide banner เท่านั้นนะครับ เป็นวิธีที่ผมคิดว่าง่ายดีเลยอยากจดเก็บไว้ซะหน่อย

สิ่งที่ต้องเตรียม

  1. Module views
  2. Module views_slideshow
  3. Module libraries_api
  4. Module Link
  5. โหลด jquery.cycle.all.js จาก https://github.com/malsup/cycle มาเก็บไว้

วิธีการทำ slide banner บน drupal 7

  1. ติดตั้ง module ต่างๆให้พร้อม views, views_slideshow, libraries_api, link
  2. สร้างโฟลเดอร์ชื่อ libraries ใน sites/all/
  3. สร้างโฟลเดอร์ชื่อ jquery.cycle ใน sites/all/libraries/
  4. นำไฟล์ jquery.cycle.all.js ที่โหลดมาใส่ไว้ใน sites/all/libraries/
  5. สร้าง content type ไว้สำหรับทำเนื้อหา banner ไว้ 1 อัน
    banner content type
  6. ทำการลบ field body ออกแล้วสร้าง field image และ field link เพิ่มขึ้นมา ดังรูป
    field banner
  7. ใน field image ให้กำหนดค่า Number of values ไว้แค่ 1 ก็พอ เพื่อให้เราอัพโหลดรูปแค่ 1 รูป ในส่วนค่าอื่นๆตามสะดวก
  8. ใน field link ให้กำหนดค่า Link Title เป็น No Title ส่วนค่าอื่นๆตามสะดวก
  9. เพิ่มเนื้อหาของ banner ได้เลยครับเอาสัก 2-3 อันก็ได้
  10. ไปที่ admin/structure/views เพื่อทำการสร้าง block ไว้แสดงผลตัว banner ของเรา
    add new views
  11. กำหนดค่าเริ่มต้นดังนี้
    views banner
    view name : ชื่อของ views ที่เราสร้าง
    Show content ให้เลือกไปยัง content type ที่เราสร้างมาในข้อ 5 นั้นก็คือ banner
    Block title : ปล่อยวางไว้
    Display format : เลือกเป็น Slideshow และให้แสดงในรูปแบบ fields
    Items per pager : กำหนดจำนวนเนื้อหาใน block นี้ ผมกำหนดเป็น 5 เนื้อหาล่าสุดมาแสดง (จำนวนนี้กำหนดตามสะดวกนะครับว่าจะให้แสดง banner กี่อัน)
  12. ต่อจากนี้เป็นการกำหนดในส่วนของ views แล้วนะครับว่าจะให้มันแสดงออกมายังไงในรูปแบบไหน ให้เรามาดูในส่วนของหัวข้อ FIELDS ก่อน
    views field
  13. ทำการเพิ่ม field image และ field link ของ content type banner ก่อน
    add field banner
  14. จากนั้นให้เราติ้กเอา Create a label ออกจากทั้งสอง field ที่เราเพิ่มเข้ามา แต่ในส่วนของ field link นั้น Formatter ให้เรากำหนดเป็น URL, ass plain text
    edit field link
  15. ทำการจัดเรียง field ใหม่โดยคลิกที่ rearrange และเรียงให้ field image อยู่ล่างสุดดังรูป
    rearrange views
  16. ให้คลิกไปที่ field Title และ field link เพื่อทำการแก้ไขโดยติ้กในช่อง  Exclude from display ซะเพื่อให้ field ดังกล่าวไม่ต้องแสดงออกมา
    exclude form display
  17. คลิกที่ field image เพื่อทำการแก้ไข โดยเลื่อนลงมาดูในส่วนของ REWRITE RESULTS และติ้กช่อง Output this field as a link เพื่อทำการแก้ไขการแสดงผลในส่วนลิงค์ของรูปภาพ
    rewrite link views
  18. ในหัวข้อ Link path และ Text title ให้เรานำค่าจาก REPLACEMENT PATTERNS ด้านล่างมาใช้งาน ซึ่งแน่นอนว่าในส่วนของ Link path ให้ใช้ [field_link_banner] และ Text title ให้ใช้ [title]
    REPLACEMENT PATTERNS
    Output this field as a link
  19. ในส่วนของการปรับแต่งค่า slide ต่างๆให้ปรับที่หัวข้อ FORMAT และคลิกที่ settings ของ format slideshow นะครับ
    settings slide show
  20. ทำการ save views ที่เราสร้างขึ้นมาใหม่ และไปที่ admin/structure/block เพื่อจัดการ block ให้แสดงในส่วนต่างๆของเว็บต่อไป

ผมเขียนวิธีการพอไว้โดยสังเขปนะครับคงไม่ลงลึกขนาดว่าอธิบายทุกๆช่องใน views ว่าทำไรได้บ้าง ลองนำไปปรับแต่งใช้งานกันดูสงสัยสอบถามได้นะครับ :)

1

Add new comment

Fri, 07/21/2017 - 05:35

PharmaEurope.net sells real legit anaboіc sterօids.
All their stuff is authentіc and of very hiɡh quɑlity -
here you can buy testosterone, anadгol, trenbolone, human growth
hormone, cytomeⅼ, T3, annd moгe without prescription