จัดการรูปภาพประกอบเนื้อหา article


นอกเหนือจากเนื้อหาตัวอักษรที่จะบอกผู้ชมว่าเว็บไซต์ของคุณจัดทำขึ้นเพื่อจุดประสงค์ใด อีกหนึ่งสิ่งที่ขาดไม่ได้บนเว็บไซต์เช่นกัน ก็คือ รูปภาพ นั่นเองค่ะ

โดยในหน้าเมนูประเภท บทความ/สินค้า จะมีพื้นที่ให้คุณสามารถใส่ รูปภาพประกอบเนื้อหา เป็นมาตรฐานได้หน้าละ 7 รูป ซึ่งรองรับทั้งการอัพโหลดรูปภาพ และใส่ URL หน้าวีดีโอจาก Youtube เพื่อให้ผู้เข้าชมคลิกดูวีดีโอบนเว็บไซต์ของท่านได้ทันที 

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



 


1. วิธีอัพโหลดรูปภาพประกอบเนื้อหา / แสดง VDO จาก Youtube

สามารถเพิ่มหรือแก้ไขรูปภาพประกอบเนื้อหาเพื่อใส่รูปภาพหรือ URL วีดีโอจาก Youtube.com ได้ โดยมีขั้นตอนดังนี้

1.1. วิธีอัพโหลดรูปภาพ  โดยนำเมาส์ไปชี้ที่บริเวณรูปภาพที่ต้องการ จะปรากฎสัญลักษณ์   จากนั้นคลิกเลือก "เพิ่ม/แก้ไขรูปภาพ


ระบบจะปรากฎหน้าต่างให้เลือก Upload ภาพใหม่ (หรือเลือกแก้ไขภาพเดิมที่อัพโหลดไปแล้ว) จากนั้นคลิกเลือกรูปภาพที่ต้องการและคลิก Open

ข้อแนะนำ : ขนาดของรูปที่เหมาะสมคือ 310x180 pixels และขนาดของไฟล์รูปต้องไม่เกิน 5 MB


จะปรากฎรูปภาพที่อัพโหลด ท่านสามารถตั้งค่าข้อมูลรูปภาพเพิ่มเติม โดยคลิกตัวเลือก "เพิ่ม/แก้ไขรูปภาพ" อีกครั้ง


จากนั้นจะปรากฎหน้าต่าง "จัดการรูปภาพ" ซึ่งสามารถกำหนดการตั้งค่าได้ ดังนี้


 

     1). คำอธิบายภาพ คือ ส่วนสำหรับใส่ข้อความอธิบายรายละเอียดที่เกี่ยวข้องกับรูปภาพแบบคร่าว ๆ จะปรากฎเมื่อนำเมาส์ไปชี้ที่รูปภาพนั้น ๆ หรือเมื่อคลิกดูรูปภาพประกอบเนื้อหาขนาดใหญ่ จะปรากฎคำอธิบายนี้ที่ใต้รูปภาพด้วยค่ะ


ตัวอย่างการแสดงผลคำอธิบายภาพเมื่อนำเมาส์ไปชี้ที่ภาพและคลิกดูภาพขนาดใหญ่ตามลำดับ

     2). ALT Text : เป็นส่วนสำหรับใส่ข้อความอธิบายรูปภาพที่จะช่วยให้ Search Engine รับรู้ความหมายของภาพนั้นๆ เนื่องจาก Search Engine ไม่สามารถเก็บข้อมูลรูปภาพจากหน้าเว็บไซต์จากการดูว่าภาพ ที่แสดงคือภาพอะไร ดังนั้นจำเป็นจะต้องใช้ Tag พิเศษ เรียกว่า Alternative Text หรือ Alternate tag นี้ เพื่อใช้ในการอธิบายรูปภาพให้ Search Engine ทราบค่ะ
 

     3). เลือกประเภทการจัดการขนาดของรูปภาพ  สามารถเลือกประเภทการจัดการขนาดของรูปภาพได้ 2 รูปแบบ คือ ตัดส่วนที่เกินออก หรือ ย่อขนาดรูปภาพ

รูปแบบที่ 1 ตัดส่วนเกินออก

รูปแบบที่ 2 ย่อขนาดรูปภาพลง


หากเลือกใช้แบบตัดส่วนเกินออก สามารถคลิกที่ภาพค้างไว้และลากเมาส์ เพื่อจัดตำแหน่งการแสดงผลได้ตามต้องการค่ะ

     ซึ่งทั้ง 2 รูปแบบจะแสดงผลที่หน้าเว็บไซต์แตกต่างกัน แต่เมื่อคลิกที่รูปภาพเพื่อดูขนาดจริง ระบบจะแสดงรูปภาพเป็นขนาดต้นฉบับค่ะ


     การแสดงผลรูปภาพประกอบเนื้อหาบนหน้าเว็บไซต์ในกรณีที่ใส่รูปไม่ครบทั้ง 7 รูป เมื่อแสดงผลบนหน้าเว็บไซต์จริง ระบบจะแสดงผลรูปภาพประกอบเนื้อหาเฉพาะตำแหน่งที่ได้อัพโหลดรูปภาพจริงเท่านั้น  ไม่ได้นำตำแหน่งที่เป็นกรอบมาแสดงผลบนหน้าเว็บไซต์ค่ะ 

การแสดงผลรูปภาพประกอบเนื้อหาในส่วนจัดการเว็บไซต์ การแสดงผลรูปภาพประกอบเนื้อหาบนหน้าเว็บไซต์ปกติ

 

 1.2. วิธีแสดงผล VDO จาก Youtube ในตำแหน่งของรูปภาพประกอบเนื้อหาทั้ง 7 รูป

เบื้องต้น ท่านสมาชิกสามารถ Copy URL ที่ต้องการ จากช่อง Address bar ในหน้าชม Video จากเว็บไซต์ Youtube ได้ดังรูปค่ะ

 

จากนั้น นำเมาส์ไปชี้ที่บริเวณ์รูปภาพที่ต้องการ จะปรากฎสัญลักษณ์   จากนั้นคลิกตัวเลือก "เพิ่ม/แก้ไขรูปภาพ" และคลิกตัวเลือกปุ่ม "Youtube Video" ในหน้าต่างที่ปรากฎ


จะปรากฎหน้าต่าง ให้คุณ วาง URL ของ Video ที่คัดลอกมาจาก Youtube จากนั้นคลิกปุ่ม ดึงข้อมูล ซึ่งระบบจะแสดงผลภาพตัวอย่างของวีดีโอ (ใช้ภาพที่เป็นค่าเริ่มต้นของวีดีโอตามที่เจ้าของวีดีโอกำหนดใน Video ต้นฉบับจาก Youtube ค่ะ) สุดท้ายคลิก "เลือกใช้"

 

 

 


 
2. วิธีสลับตำแหน่งของแต่ละรูป 

สามารถลากและวาง (Drag & Drop) เพื่อเปลี่ยนสลับตำแหน่งของรูปภาพประกอบเนื้อหาแต่ละรูปได้ ทั้ง 7 รูป



3. วิธีคลิกซ่อน-แสดงรูปภาพ
 

ในกรณีที่ต้องการแสดงผลเฉพาะเนื้อหา คุณสามารถกดซ่อนรูปภาพประกอบเนื้อหาทั้ง 7 รูปได้ โดยการนำเมาส์ไปวางในบริเวณรูปภาพ จะปรากฎสัญลักษณ์   ให้คลิกเพื่อซ่อนกลุ่มรูปภาพ

 

ในกรณีที่ซ่อนกลุ่มรูปภาพประกอบเนื้อหาไว้ และเปิดแสดงผลอีกครั้ง ให้นำเมาส์ไปวางในบริเวณด้านซ้ายของข้อมูลในพื้นที่เนื้อหาหลัก จะปรากฎสัญลักษณ์  ให้คลิกเพื่อแสดงผลรูปทั้ง 7 รูปค่ะ



4. คลิกรูปเล็กเพื่อชมรูปใหญ่ได้

ผู้ชมสามารถคลิกดูรูปภาพประกอบเนื้อหาจากรูปเล็กเป็นรูปใหญ่ได้ ซึ่งรูปขนาดใหญ่จะแสดงผลตามขนาดภาพต้นฉบับค่ะ

โดยจะมีปุ่มให้คลิกแสดงรูปภาพไปข้างหน้าเพื่อชมภาพถัดไปและย้อนกลับเพื่อชมภาพก่อนหน้านี้ได้



5. ตัวเลือกสลับตำแหน่งรูปภาพเนื้อหา ซ้าย-ขวา

สามารถสลับตำแหน่งรูปภาพประกอบเนื้อหาและเนื้อหา จากซ้ายไปขวา  และขวาไปซ้ายได้ค่ะ


 




คู่มือการใช้งาน

การเลือก Theme และตกแต่งเว็บไซต์
VelaEasy Smart Theme
วิธีเพิ่มเมนู บทความ / สินค้า article
วิธี Drag & Drop สลับตำแหน่งเมนูด้านบนและด้านข้าง พร้อมเพิ่มเมนูระดับ 2
วิธีเพิ่มเมนูระดับที่ 3,4,5
วิธีจัดเก็บข้อมูลเข้าคลังเนื้อหา (ไม่แสดงในเมนู)
วิธีแก้ไขและลบเมนู
วิธีตั้งค่า SEO สำหรับแต่ละหน้า
วิธีเพิ่ม เมนูลิงก์
วิธีเพิ่มและใช้งานระบบเว็บบอร์ด
วิธีเพิ่มหน้ารวมเว็บบอร์ด
วิธีเพิ่มอัลบั้มรูป
เพิ่มเมนู Landing Page
วิธีเพิ่ม เมนูข้อความ
วิธีเพิ่มเมนู Tag
วิธีการใช้งานฟังก์ชัน "Tags" ในหน้าแก้ไขเมนู
วิธีเพิ่มเมนู สมาชิก (สำหรับสมัครและให้สมาชิกล็อกอิน)
วิธีการใช้งาน "ระบบสมาชิก"
วิธีเพิ่ม Section "Slideshow"
วิธีเพิ่ม Section "Banner"
วิธีเพิ่ม Section "พื้นที่เนื้อหาเสริม"
วิธีเพิ่ม Section "Text"
วิธีเพิ่ม Section "HTML"
วิธีเพิ่ม Section Attachment (อัพโหลดไฟล์เอกสารแนบในเนื้อหา)
วิธีแสดง Section "ราคาสินค้าและปุ่มสั่งซื้อ"
วิธีเพิ่ม Section "Social Buttons"
วิธีเพิ่ม Section "แบบฟอร์มติดต่อกลับ"
วิธีเพิ่ม Section "Comment" : แบบฟอร์มความคิดเห็น
วิธีเพิ่ม Section "Show Boxes" : เพิ่มกล่องแสดงรายการสินค้าและบริการบนหน้าเว็บไซต์
วิธีเพิ่ม Section "รายการที่เกี่ยวข้อง"
วิธีเพิ่ม Section "รายการย่อยภายใต้หัวข้อนี้"
วิธีเพิ่ม Section "รายการอื่นภายใต้หัวข้อเดียวกัน"
กำหนดรูปแบบโดยรวม
วิธีใส่โลโก้หลักของเว็บไซต์
วิธีใส่โลโก้ที่เมนูด้านบน
วิธีการใส่รูปภาพพื้นหลังส่วนหัว (แบนเนอร์ของเว็บไซต์)
วิธีการใส่รูปภาพประกอบส่วนหัว (ภาพเล็กบนภาพส่วนหัว 7-9 ภาพ)
วิธีการใส่รูปภาพพื้นหลังเว็บไซต์
วิธีการใส่ภาพพื้นหลังให้กับพื้นที่ "เมนูด้านบน" และ "เมนูด้านข้าง"
วิธีการกำหนดค่าทึบแสงของพื้นหลัง
วิธีจัดตำแหน่งเมนูด้านบนและสลับกับพื้นที่ส่วนหัว
วิธีซ่อนพื้นที่ด้านข้าง
วิธีเพิ่ม Widget "Link Banner"
วิธีเพิ่ม Widget "แบบฟอร์ม"
วิธีเพิ่ม Widget "HTML"
วิธีเพิ่ม Widget "Search Box" ช่องค้นหาข้อมูลบทความ/สินค้า
วิธีเพิ่ม Widget "Member Box"
วิธีสลับตำแหน่ง Sidebar Widget กับเมนูด้านข้าง
วิธีการตั้งค่า "พื้นที่ด้านล่าง" ของเว็บไซต์
วิธีเพิ่มลิงก์เมนูลัด ในพื้นที่ด้านล่างของเว็บไซต์ (Footer Link)
วิธีแก้ไขเว็บไซต์ใน Safe Mode
ระบบ Chat
วิธีเข้าดูรายการสั่งซื้อ
วิธีการเข้าดูรายการติดต่อกลับ
วิธีเข้าดู "รายงานการขาย"
เมนูตั้งค่า ทั่วไป article
เมนูตั้งค่า "ร้านค้า" และระบบตะกร้าสินค้า
วิธีใช้งานระบบ Stock สินค้า
วิธีตั้งราคาค่าขนส่งสินค้า
เมนูตั้งค่า เครื่องมือของ Google
เมนูตั้งค่า Social Networks
เมนูตั้งค่า โค้ดและสคริปต์
เมนู อีเมล POP3
เมนู อีเมล Forwarding
บริหารเว็บไซต์ผ่าน Smart Phone ด้วย VelaHandy
วิธีเลือกภาษาบนหน้าเว็บไซต์
วิธีเปลี่ยนรหัสผ่าน article
ดาวน์โหลดเอกสารประกอบคอร์สอบรม Introduction to ReadyPlanet VelaEasy Website System
คู่มือการใช้งานฟังก์ชันพิเศษในแพ็กเกจ XL และ แพ็กเกจ Easy
ขั้นตอนสำคัญสำหรับยืนยันการจดโดเมนเนมใหม่และแก้ไขข้อมูลผู้ดูแลโดเมน