เพิ่ม FileField และ ImageField ให้กับ Content Type

เมื่อเราจะเข้าไปจัดการกับ Fields ของ content types ยังมี Fields อีกบางประเภท ที่ยังไม่ถูกติดตั้งมากับ CCK นั้นก็คือ Imagefield และ Filefield ในบางครั้งที่เราต้องการให้ Content ของเรามีการแทรกรูปภาพ หรือไฟล์ ลงไปด้วย

การติดตั้ง Imagesfield และ Filefield นั้นจะต้องติดตั้ง Modules ดังนี้

  • CCK Module
  • FileField Module

และมี Module ที่เกี่ยวข้องกันอีก คือ ImageCache ไว้สำหรับจัดกาีรกับรูปภาพ ซึ่งไม่ต้องติดตั้ง Module นี้ก็สามารถใช้งานได้

เริ่มต้น เราต้องดาวน์โหลด FileField Module และ ImageField Module ก่อน และทำการคัดลอก Modules ทั้ง 2 ตัวนี้ไปไว้ใน /Modules เข้าไปทำการเปิดใช้งาน Modules โดยเข้าไปที่เมนู Administer > Site building > Modules ทำการ Enable Modules ทั้ง 2 ตัวนี้

เราจะมาทดสอบการสร้าง ImageField ให้กับ Announcement โดยเราจะสร้าง Content type ขึ้นมาใหม่โดยกำหนดชื่อว่า Announcement แล้วเพิ่ม ImagesField เข้าไปให้แสดงรูปภาพประกอบด้วย

ขั้นตอนแรก ต้องเพิ่ม Content type เข้าไป โดยไปที่เมนู Administer > Content management > Content types เลือก Add content type

ทำการป้อนค่้าดังนี้

Name : Announcement

Type: announcement

Description : Announcement news this web site

Title field label : หัวข้อข่าว

Body field label : เนื้อหาข่าว

ทำการบันทึกโดยเลือก Save content type แ้ล้วเราจะได้ Content type ชนิด Announcement ขึ้นมาดังรูป

หลังจากสร้าง Content type เสร็จแล้วให้เข้่าไปที่ manage fields ของ Announcement

ทำการเพิ่ม new field ดังนี้

lebel : รูปภาพข่าว

field name picturenews

type : file

Form element : Image

เมื่อทำการป้อนค่าแล้ว เลือกที่ Save

จากนั้นจะเข้่าสู่การกำหนดค่าของ field ที่เราได้สร้่างขึ้นมา

ทำการป้อนค่าดังนี้

Permitted upload file extensions: gif jpg jepg png bmp

ทำเครื่องหมายถูกที่ Use default image

Upload image: เลือกไฟล์ที่เราจะกำหนดให้เป็นไฟล์เริ่มต้น สำหรับผม ผมได้สร้างไฟล์นี้ขึ้นมาเพื่อกำหนดเป็นค่าเริ่มต้นไว้ ผมก็จะเลือกไฟล์ที่ทำได้สสร้างไว้

เลือก Save field settings ถือเป็นการเสร็จสินการเพิ่ม field ชนิด image ให้กับ Announcement ต่อไปนี้เราจะมาทดสอบการเพิ่ม เนื้อหา ให้กับ Announcement กัน โดย เข้าไปที่เมนู Create content > Announcement ตัวอย่างดังรูป

ทำการป้อน หัวข้อข่าว เนื้อหาข่าว และเลือกรูปภาพข่าว จากนั้นเลือก Save เพียงแค่นี้ Announcement ของเราก็สามารถเพิ่มรูปภาพเข้าไปได้แล้ว จากข่าวที่ผมเพิ่มเข้าไป แสดงผลได้แบบนี้

เห็นมั้ยละครับ การเพิ่ม ImageField ไม่ยากอย่างที่คิด ส่วนการเพิ่ม Filefield ก็ทำเหมือนกัน Imagefield นี่แหละ แต่ไอ้ตอนที่เลือก Form element ให้เลือก เป็น File ก็แค่นั้นเองครับ คราวหน้าผมจะมาบอกกับการจัดการขนาด กับรูปภาพที่สร้างขึ้นมาจาก Imagefield นะครับ

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: