Dokumentasi Penggunaan Image di Hugo

Putra Jaya | 29 Nov 2025 | 2 Menit | Hugo

Daftar Isi

1️⃣ Render Hook: `render-image.html`

Render hook ini digunakan otomatis ketika kamu menulis gambar di Markdown, misal:

![Alt text](img/photo.jpg "title=Liburan|sizes=300x200|crop=center|class=rounded")

Parameter	Default	Contoh	Keterangan
`title`	`""`	`"Foto Liburan"`	Digunakan sebagai `title` HTML, juga bisa sebagai tooltip
`sizes`	`""`	`"300x200"` atau `"300x200 center"`	Resize gambar menggunakan Hugo Image Processing
`crop`	`""`	`"center"`, `"top"`, `"smart"`	Menentukan anchor crop (ditambahkan ke sizes)
`class`	`"rounded-sm drop-shadow-sm/100"`	`"rounded-lg"`	Menambahkan CSS class tambahan
`alt`	Markdown alt	`"Kucing Lucu"`	Digunakan di tag `<img>`

Resize + Crop

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

Resize + Crop + Title

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

Resize + Crop + Title + Class

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

Akan memakai default sizes: 320x, 768x, 1024x, 1280x, 1536x.

Partial ini yang benar-benar melakukan image processing. Bisa dipanggil manual juga jika dibutuhkan.

Parameter	Tipe	Default	Contoh	Keterangan
`src`	string	`required`	`"img/photo.jpg"`	Path gambar (local atau remote)
`alt`	string	`"Image"`	`"Kucing Lucu"`	Alt text
`title`	string	`""`	`"Foto Liburan"`	Title untuk tooltip
`sizes`	slice	default responsive	`(slice "400x" "800x" "1200x")`	Ukuran yang dipakai untuk resize
`class`	string	`"rounded-sm drop-shadow-sm/100"`	`"rounded-lg"`	CSS class tambahan
`mode`	string	`""`	`"square"`, `"portrait"`, `"landscape"`	Mode auto resize
`base`	int	`300`	`300`	Digunakan bersama mode untuk menentukan ukuran

Default

{{ partial "images/Image" (dict "src" "img/photo.jpg") }}

Custom Resize

{{ partial "images/Image" (dict
"src" "img/banner.jpg"
"sizes" (slice "400x" "800x" "1200x")
) }}

Mode Square

{{ partial "images/Image" (dict
"src" "img/avatar.jpg"
"mode" "square"
"base" 300
) }}

Mode Portrait

{{ partial "images/Image" (dict
"src" "img/poster.jpg"
"mode" "portrait"
"base" 300
) }}

Mode Landscape

{{ partial "images/Image" (dict
"src" "img/hero.jpg"
"mode" "landscape"
"base" 300
) }}

Jika sizes tidak ditentukan, akan dipakai default responsive sizes: "320x", "768x", "1024x", "1280x", "1536x"
Parameter mode (square, portrait, landscape) akan otomatis membentuk ukuran berdasarkan base.
Partial menangani gambar lokal dan remote. Remote akan dicoba resources.GetRemote, tapi bisa error jika file tidak ditemukan.
alt diambil dari Markdown secara otomatis, tapi bisa di-override via title= jika perlu.

Partial menghasilkan markup <picture> dengan: