หัวข้อต่อมา หลังจากเราสร้างโพสผ่านหัวข้อ Contents แล้ว 

ทีนี้มาว่ากันที่การใส่รูป แทรกรูปในโพสค่ะ

 

1.ดูในเครื่องมือช่วยพิมพ์นะ จะเห็นเครื่องหมายแทรกรูปอยู่ตามรูปค่ะ

(หลักการเหมือนกับโพสรูปในเวปทั่วไป จะวางภาพไว้ตรงไหน ให้ทิ้งเคอเซอร์ไว้ตรงนั้น)

2.หลังจากกดเครื่องหมายใส่ภาพแล้ว เราจะได้หน้าต่างนี้มา 

ยังไม่ต้องสนใจอะไรค่ะ ให้เลือกสัญลักษณ์ที่วงกลมเอาไว้ทางด้านมุมขวา

 

3.จากนั้น จะถูกพาเข้ามายังหน้า file browser หรือว่าหน้ารวมคลังไฟล์ต่าง ๆ ของเราที่เราจะโหลดมาไว้บนเวปดังภาพนี้

4.ต่อมาคลิ๊กที่ปุ่ม Upload (ที่วงสีแดงเอาไว้) ที่พอเราคลิ๊กที่ปุ่ม Upload แล้ว จะมีเมนูย่อย ๆ คลี่ออกมาแบบนี้

 

ให้ทำตามนี้นะ 1. เลือก Choose File - เป็นการเลือกภาพที่เราจะโหลดเข้าเวป จากในเครื่องของเราเอง (ควรตั้งชื่อไฟล์เป็นภาษาอังกฤษ ไม่ก็ตัวเลขไปเลย) 

จากนั้นเลือก 2.Upload เพื่อส่งรูปที่ต้องการเข้าเวปค่ะ

 

5.หลังจากโหลดภาพเข้ามาไว้ในเวปเสร็จแล้ว เราจะเห็นภาพที่เราเพิ่งโหลดเข้าเวปมาโผล่อยู่ในรายการด้านล่าง (ระบบจะไฮไลท์สีเหลืองเอาไว้ ว่าไฟล์ไหนที่เราเพิ่งโหลดเข้ามา พร้อมกับพรีวิวรูปเล็ก ๆ ที่มุมขวาล่าง)

 

6.พอเราเลือกรูปที่เพิ่งโหลดเข้ามาเสร็จแล้ว จากนั้นที่ต้องทำต่อไปคือ เลือกคำสั่งด้านบนทางขวา Send to TinyMCE ดังรูป

 

7.เราจะถูกส่งกลับเข้ามายังหน้าต่างว่าง ๆ ในตอนแรก โดยครั้งนี้ จะมีภาพที่เราเพิ่งเลือกโหลดเข้ามาแสดงอยู่ด้วย แบบนี้

ซึ่งจะเห็นว่ามีบรรทัดว่าง ๆ อยู่ 2 อัน (ตามลูกศรสีแดงในรูป) ซึ่งเราจะกรอกอะไรลงไปหรือไม่ก็ได้ (แนะนำว่าควรจะกรอกไป จะ copy จากบรรทัดบนมาใส่ให้หมดเลยก็ได้) จากนั้นกด Insert 

เราก็จะได้ภาพที่เราต้องการมาแทรกอยู่ในกล่องข้อความของเราตอนพิมพ์อยู่แบบนี้

 

นี่เป็นวิธีการแทรกรูปแบบง่าย ๆ น่าจะจับหลักได้นะ ไม่ยาก

<script type="text/javascript" src="/modules/tinymce/tinymce/jscripts/tiny_mce/themes/advanced/langs/en.js?S"></script>

ๆ ... ลองดูค่ะ อาจจะวุ่นวายตอนแรก ๆ นะ แต่สักพักจะชิน

......

 

แถมท้ายวิธีการแทรกรูปไป จัดหน้าตอนพิมพ์ไป

คือบางทีเราก็ต้องการให้รูปกับตัวหนังสืออยู่ปน ๆ กันอย่างเป็นระเบียบ และนี่คือวิธีทำนะคะ

 

กลับไปดูในขั้นตอนที่ 7 นะคะ เริ่มจากตรงนั้น (เป็นตอนใกล้ ๆ ที่เรากำลังจะได้รูปจับมาลงในกล่องข้อความแล้ว) แต่ยังไม่กด Insert ค่ะ

ให้ดู tab ด้านบนนะ จะมีให้เราเลือกอยู่ ให้เลือกไปที่ Appearance

 

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

สังเกตุดูความสัมพันระหว่างตรงที่ลูกศรชี้นะ จะเป็นการจัดวางภาพ ส่วนทางขวาจะเป็นการแสดงให้เห็นว่าตัวที่เราเลือกไปนั้น ภาพกับตัวหนังสือจะได้ผลลัพท์ออกมาแบบไหน

ดูตรงส่วน Alignment (การจัดวาง) นะ แล้วลองเลือกดู พร้อมกับดูพรีวิวทางขวามือไปด้วย

เราลองเลือกแบบเอาภาพชิดขอบด้านซ้ายดู แบบนี้

เราก็จะเห็นว่า หลังจากเอาภาพไปชิดซ้ายแล้ว เรายังสามารถพิมพ์ต่อมาจากภาพได้เลย

จากนั้น ถ้าได้ผลเป็นที่พอใจแล้ว กด Insert เพื่อแทรกภาพเข้ากล่องข้อความตามปรกติได้เลยค่ะ

 

และข้างล่างนี้เป็นส่วนของการแสดงผลแบบเลือกเอาภาพชิดด้านซ้าย และพิมพ์ต่อได้เลยค่ะ

 

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

 

ลองเล่นกันดูนะคะ 

ปล.อีกอันที่สำคัญมาก ต้องตั้ง Input Format ให้เป็น Full HTML เท่านั้น รูปถึงจะขึ้นนะคะ อย่าลืมเชคตรงนี้ล่ะ =)

 

 

• 846 reads