Pengelolaan gambar Mainroad

Spesifikasi gambar Hugo di Mainroad, jenis dan ukuran

Konten Halaman

Mainroad adalah sebuah tema untuk generator situs statis Hugo dan selain tampilannya yang menarik, tema ini memiliki penanganan gambar yang sangat baik

Seperti yang Anda lihat, situs ini menggunakan pendekatan yang sama, yaitu menulis teks dalam format markdown, menambahkan gambar, lalu dengan menggunakan Hugo menghasilkan sekumpulan file html, js, dan css yang terlihat menarik.

topimage

Di mana

Thumbnail didefinisikan dalam front matter halaman

thumbnail: img/thumb.jpg

Keterlihatan thumbnail dikonfigurasi dalam config.toml

[Params.thumbnail]
  visibility = ["list", "post"]

Ada beberapa kesulitan dengan Mainroad

  • Mainroad mencari gambar thumbnail di folder /static, bukan di dalam page bundle.
  • Secara default satu gambar digunakan untuk thumbnail halaman daftar dan gambar utama halaman detail.
  • Thumbnail tidak diubah ukurannya, hanya dicopy ke folder public.

Ketidaknyamanan…

  • Hal di atas menyebabkan penggunaan bandwidth yang sangat tidak efisien ketika gambar halaman detail digunakan sebagai thumbnail
  • Sangat tidak nyaman (bagi saya) menyimpan gambar di folder static, bahkan dalam struktur pohon postingan yang sejajar, bukan dalam page bundle

Jenis dan ukuran gambar

Thumbnail

  • kecil untuk daftar (tampilan mobile) 73x53
  • sedang untuk daftar (tampilan desktop) 235x171

Halaman detail - internal

  • maksimal desktop 678x495
  • ipad pro 597x436
  • iphone xr 374x273
  • iphone 14 max 390x285
  • ipad mini 479x350

Solusinya

Adalah menyimpan

  • di folder static - gambar thumbnail untuk daftar sedang (tampilan desktop) 235x171
  • memiliki set thumbnail yang telah ditentukan sebelumnya - seperti 10 dari jenis tersebut, dan gunakan yang paling sesuai atau rotasi
  • di dalam page bundle - gambar desktop 678x495
  • dalam teks halaman merujuk ke mereka ![img](localimg.png)
  • konfigurasi keterlihatan thumbnail = [“list”]

Tautan yang berguna