Solusi hugo gagal eksekusi markdown render hook template amp-img

23 Jan 2021
#tips
#markdown
#code
#go

Fitur Markdown render hook pertama muncul pada versi Hugo 0.62.0 (rilis 23 December 2019) ternyata menimbulkan bug yang tak berkesudahan hingga Hugo versi 0.80.0 (rilis 31 December 2020).

Apa sih istimewa fitur Markdown render hook? Baca saja artikel semi tutorial yang sudah terbit sebelumnya tentang mamfaat ‘Markdown render hook solusi untuk custom output image, link dan heading’.

Terus bug yang sudah berjalan selama 1 tahun penuh belum juga teratasi bisa menimbulkan efek samping apa saja? 😭

Hingga versi terbaru saat ini (versi 0.80.0), Hugo gagal mengeksekusi markdown render hook custom output render-image.amp.html khusus mencetak tag <amp-img> dalam partial template single.amp.html.

Fauzans-Mac-mini:insertapps fauzan$ hugo env
// Hasil print hugo env di terminal atau cmd
Hugo Static Site Generator v0.80.0-792EF0F4 darwin/amd64 BuildDate: 2020-12-31T13:36:47Z
GOOS="darwin"
GOARCH="amd64"
GOVERSION="go1.15.1"
Fauzans-Mac-mini:insertapps fauzan$

Akhlis, salah satu pengguna Hugo, termasuk orang yang pertama sekali melempar issue ini di forum discourse gohugo, dua bulan setelah fitur Markdown render hook dirilis.

Hingga akhirnya sang kreator Hugo Bjørn Erik Pedersen menandai issue ini menjadi Bug NeedsInvestigation laman Github Hugo dengan nomor issue 7160. 😱

Sebenarnya, bug ini tidak terlalu berpengaruh kalau website tidak merender link khusus AMP.

[outputs]
  page = ["HTML", "AMP"]

Hal ini berbeda buat kami di Insertapps, setelah berhasil mendevelop dan merender page khusus AMP, sedikit kecewa dengan bug ini. 😫

Untuk melihat demo page khusus AMP yang berhasil kami kembangkan klik https://insertapps.com/amp/blog/simple-sidebar-menu/.

Pasalnya, setelah berhasil validasi page AMP, beberapa posting yang ada gambar tambahan dalam body posting, diberi pentungan warning ❗ oleh sistem Google Search Console Tools. 😖

Google search console New AMP issue detected

Pentungan merah tanda error validasi link AMP, disebabkan template render-image.amp.html tidak mampu merubah semua tag versi desktop mejadi tag versi AMP.

Solusinya bagaimana?

Kami kembali menggunakan format seperti shortcode embed script Codepen. 😎

// Insert hugo shortcode custom output <amp-img>

{{ < img "/images/blog/Hugo_cover-image.jpg" "Title Text" > }}
// Note: no space between brackets with less symbol

Pertama buat dua file template baru, dengan nama file img.html dan satu lagi img.amp.html

Kedua file baru simpan dalam folder themes/layout/shortcode/:

themes/your-name-theme
└── layouts
    └── shortcode
        ├── img.html
        ├── img.amp.xml
        └── codepen.html

Untuk file img.html insert kode berikut:

<figure class="center">
	<img class="img-fluid" 
		 src="{{ .Site.BaseURL }}{{ .Get 0 }}"
		 alt="{{ .Get 1 }}">
	<figcaption class="muted italic">
		{{ .Get 1 }}
	</figcaption>
</figure>

Untuk file img.amp.html, insert kode berikut:

{{ $imageSrc := .Get 0 }}
{{ $imgSize := imageConfig ( printf "static//%s" $imageSrc ) }}
<amp-img src="{{ .Site.BaseURL }}{{ .Get 0 }}" alt="{{ .Get 1 }}"
	class="center"
	width="{{ $imgSize.Width }}"
	height="{{ $imgSize.Height }}"
	layout="responsive">
</amp-img>

Penjelasan kode pada template img.amp.html 👍

Baris kode {{ $imageSrc := .Get 0 }} adalah sebuah variable yang menampung data lokasi gambar, yang di ambil dari imputan shortcode image.
Kode imageConfig sebuah function Hugo yang bertugas mengekstrak data ukuran gambar. ✨
Terakhir kode $imgSize adalah variable yang menampung data-data ukuran gambar, melalui print out width="{{ $imgSize.Width }}" dan height="{{ $imgSize.Height }}".

So, kalau memanggil gambar ke dalam body posting, sementara abaikan dulu shortcode ![]() bawaan Goldmark standarisasi CommonMark. 😤

![Yout text for alt image](https://insertapps.com/assets/hero.jpg "Hugo shortcode template")

Replace dengan format berikut: 👊

{{ < img "images/blog/2021/01_hugo-shortcode-template.jpg" "Hugo shortcode template" > }}
// Note: no space between brackets with less symbol

Begitulah solusi pengganti Markdown render hooks yang siap merender tag <amp-img> hingga terbebas dari warning validari page AMP.

Cara simple ini dapat kalian gunakan, sambil menunggu pengembang Hugo menyelesaikan Bug mata kail gagal menangkap tag AMP-IMG. 👏

Sharing

Comment