Apa Itu Watermark ?
Watermarking atau pemberian tanda air adalah proses memasang logo atau penggalan teks pada dokumen atau file gambar, dan ini merupakan proses yang penting dalam melindungi hak cipta dan pemasaran karya digital1
Menambahkan tanda air ke project akan memastikan bahwa jika apa pun yang di buat menjadi viral, merek yang kita buat diakui.
Sebagian situs web dan perusahaan media akan otomatis menambahkan watermark saat pengguna menyimpan gambar yang mereka terbitkan. Reddit, misalnya, akan menambahkan tanda airnya sendiri ke gambar yang Anda unduh dari aplikasi Reddit.
Cara Menambahkan Watermark di Hugo
muali dari HUGO v0.80.0, mereka telah menambahkan dukungan untuk gambar overlay, dan dengan adanya dukungan tersebut kita dapat menambahkan watermark dengan mudah pada gambar yang kita post di Hugo. Jadi, pastikan kalian telah menginstal v0.80 atau lebih tinggi di sistem kalina
kalian dapat memeriksanya dengan mengetik hugo version di Terminal atau Command prompt Anda.
Untuk watermark kali ini akan kita pasang pada gambar postingan blog, seperti cover, gambar artikel, dll. Kali ini kita hanya perlu mengedit sedikit kode yang ada pada tema hugo agar sedikit berfungsi
Pada postingan kali ini kita akan membuat watermark pada gambar di sudut kanan bawah.
Ubah Page Bundle
Agar watermark muncul pada gambar postingan silahkan edit Page Bundle kalian seperti ini :
. (site-root)
├── content
│ ├── post-one
│ │ ├── index.md
│ │ └── images
│ │ ├── image_one.jpeg
│ │ ├── image_two.jpeg
│ │ └── image_three.jpeg
│ └── post-two
│ ├── index.md
│ └── images
│ └── image_one.jpeg
└── themes
Tambahkan Gambar Watermark
Untuk penempatan gambar watermark, tambahkan folder images pada folder assets. Pada postingan ini saya membuat watermark dengan nama file logo.png. untuk contoh direktorinya seperti ./assets/images/icon.png
Edit File render-image.html
Hugo menawarkan Markdown Render Hooks yang sangat berguna. Ini memungkinkan template khusus untuk menggantikan fungsi rendering.
Untuk menemukan file render-image.html kita bisa liat pada direktori berikut
. (site root)
├── layouts
│ └── _default
│ └── _markup
│ └── render-image.html
└── themes
Jika sudah, maka edit dan gantikan isi kode yang ada pada file tersebut dengan kode di bawah ini.
<!-- contents of render-image.html -->
{{- $link := split .Destination "#" }}
{{- $image := (.Page.Resources.ByType "image").GetMatch (printf "*%s*" (index $link 0)) }}
{{- $logo := (resources.Get "images/logo.png") }}
{{- if and $image $logo }}
{{- $size := math.Round (mul $image.Height 0.30) }}
{{- $size := cond (ge $size 80) ($size) (80.0) }}
{{- $logo := $logo.Resize (printf "%.0fx jpg" $size) }}
{{- $image := $image.Filter (images.Overlay $logo (sub $image.Width $logo.Width) (sub $image.Height $logo.Height) ) }}
{{- $finalUrl := cond (isset $link 1) (printf "%s#%s" ($image.Permalink) (index $link 1)) ($image.Permalink) -}}
<img src="{{ $finalUrl | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" {{ end }} />
{{- else }}
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" {{ end }} />
{{- end }}
Untuk menggunakan watermark kita cukup menggunakan script markdown postingan sebagai berikut.
