การแทรกรูปใน Hugo นั้น สามารถทำได้มากกว่าหนึ่งวิธี แต่ละวิธีก็มีข้อดีข้อเสีย มาดูรายละเอียดกัน
การแทรกรูปใน Hugo
เป็นที่ทราบกันอยู่แล้วว่า Hugo ใช้ markdown ในการแสดงผล ซึ่งจริงๆแล้ว นอกจากการใช้ markdown แล้ว เราก็สามารถใช้ html ธรรมดาช่วยในการแสดงผลได้เช่นกัน แต่ในส่วนของการแสดงภาพนั้น มีเรื่องปลีกย่อยที่ต้องทราบกันอยู่บ้าง
การแทรกรูปด้วย markdown
เราสามารถทำได้ด้วยคำสั่ง markdown ดังนี้
ซึ่งวิธีนี้มีข้อดีคือใช้คำสั่งใน markdown เช่นเดียวกับคำสั่งอื่นๆในไฟล์เดียวกันนี้
การใช้ HTML
เราสามารถใช้คำสั่งในแท็ก img ปกติได้เลย ดังนี้
<img src="location ของภาพ">ปัญหาที่เกิด
ด้วยวิธีข้างต้นทั้งสองวิธีนี้ เราไม่สามารถควบคุม properties อื่นของภาพได้ เช่น width ซึ่งจริงๆแล้วเป็นสิ่งที่ค่อนข้างจำเป็นเสียด้วย
แก้ปัญหาด้วย shortcode ของ Hugo
Hugo มีคำสั่งในการสร้าง shortcode ที่ช่วยขยายความสามารถของ markdown ได้ เช่น เกี่ยวกับภาพนี้ เราสามารถใช้ shortcode เพื่อกำหนดความกว้างของภาพได้อย่างง่ายดาย
{{< figure src="location ของภาพ” width="50%” >}}
