Hugo Image Markdown Cheat Sheet

1️⃣ Basic Resize

Resize gambar ke ukuran tertentu.

![](img/photo.jpg "sizes=300x200")

2️⃣ Resize + Crop

Crop gambar ke posisi tertentu.

![](img/photo.jpg "sizes=300x200|crop=center")
![](img/photo.jpg "sizes=300x200|crop=top")
![](img/photo.jpg "sizes=300x200|crop=smart")

3️⃣ Resize + Title

Menambahkan tooltip / title.

![](img/photo.jpg "title=Liburan|sizes=400x300")

4️⃣ Resize + Crop + Title

Gabungkan title dan crop.

![](img/photo.jpg "title=Gunung|sizes=600x400|crop=smart")

5️⃣ Resize + Crop + Title + Class

Tambahkan CSS class untuk styling.

![](img/photo.jpg "title=Gunung|sizes=600x400|crop=center|class=shadow-xl rounded-lg")

6️⃣ Default (Responsive tanpa parameter)

Jika tidak ada parameter, Hugo akan pakai default responsive sizes.

![](img/photo.jpg)
![](img/photo.jpg "")

7️⃣ Alt Text Otomatis

Markdown alt tetap bekerja, bisa dikombinasikan parameter:

![Kucing Lucu](img/cat.jpg "sizes=300x200|crop=center")

8️⃣ Advanced: Mode Auto Resize

Jika ingin pakai mode square, portrait, atau landscape:

Square

![](img/avatar.jpg "mode=square|base=300")

Portrait

![](img/poster.jpg "mode=portrait|base=300")

Landscape

![](img/hero.jpg "mode=landscape|base=300")

base menentukan ukuran dasar, mode akan generate beberapa responsive size secara otomatis.

9️⃣ Multi-parameter Summary

"title=Tooltip|sizes=WxH|crop=center|class=CSS_CLASS|mode=square|base=300"