การแทรกรูปใน Blog จะไม่สามารถอัปโหลดไฟล์เข้าสู่ Server ของ HCI Lab ได้โดยตรง โดยจะต้องทำการฝากไฟล์ไว้กับ Google Drive แล้วดึงรูปภาพเข้ามาแสดงผลใน Blog
ขั้นตอนที่ 1 : อัปโหลดและตั้งค่าสิทธิ์การเข้าถึง (Upload and Set Permissions)
- Upload : ลากไฟล์ไปยัง GDrive ใน Directory ที่ต้องการ
- Share : คลิกขวาที่ไฟล์ เลือก
Share>Share - Access : ที่หัวข้อ General access เลือก
Anyone with the linkและปรับ Role เป็นView - Copy : คลิกที่
Copy linkจากนั้นกดDone
ขั้นตอนที่ 2 : ดึง File ID เพื่อเตรียมสร้าง Direct URL
ในขั้นตอนที่ 1 หลังจาก Copy link แล้วจะได้ URL หน้าตารูปแบบประมาณนี้
https://drive.google.com/file/d/1234ABCDEFG56789/view?usp=sharingจากนั้นให้ทำการหาค่า File ID จาก URL ดังกล่าว โดย File ID จะอยู่ระหว่าง /d/ และ /view จะได้ว่า File ID = 1234ABCDEFG56789 (ตัวอย่าง)
ขั้นตอนที่ 3 : เลือกใช้รูปแบบ Direct Link ที่ต้องการ
วิธีการแทรกรูปใน Blog ให้เลือก Blocks ชื่อ Image จากหมวด MEDIA ดังรูปจากนั้นจากลงไปยังตำแหน่งที่ต้องการแล้วคลิกเลือก
จากนั้นจากลงไปยังตำแหน่งที่ต้องการแล้วคลิกเลือก Insert from URL ดังรูป
ใส่ URL ของรูปที่ได้ทำการอัปโหลดไว้ที่ GDrive โดยรูปแบบของ URL มี 2 รูปแบบดังนี้
รูปแบบที่ 1
รูปแบบของ URL ในรูปแบบที่ 2 จะมีรูปแบบดังนี้
https://lh3.googleusercontent.com/d/File IDจากตัวอย่างเมื่อนำ File ID มาใส้จะได้ผลลัพธ์ดังนี้
https://lh3.googleusercontent.com/d/=1234ABCDEFG56789รูปแบบที่ 2
รูปแบบของ URL ในรูปแบบที่ 1 จะมีรูปแบบดังนี้
https://drive.google.com/uc?export=view&id=File IDจากตัวอย่างเมื่อนำ File ID มาใส้จะได้ผลลัพธ์ดังนี้
https://drive.google.com/uc?export=view&id=1234ABCDEFG56789ตัวอย่างการแทรกรูปจาก Google Drive
Link ที่แชร์จาก Google Drive (https://drive.google.com/file/d/19C_s8R6nFQ742zKBII8WdFsSJT4PPdvo/view?usp=sharing) เมื่อนำมาปรับให้เป็น Direct Link ตามรูปแบบที่ 1 จะได้ผลดังนี้
https://lh3.googleusercontent.com/d/19C_s8R6nFQ742zKBII8WdFsSJT4PPdvo
ตัวอย่างการแทรกคลิป Video
ยังไม่รองรับ Link ไฟล์ Video ที่แชร์จาก GDrive แบบรูปภาพในข้างต้นแต่ยังสามารถแทรกคลิปจาก Youtube ได้ปกติ
การใช้ YouTube Embed ได้ผลดังนี้
การใช้ Embed ได้ผลดังนี้
