Batch Multiple Picture Into Word via Quarto

Memasukkan sejumlah gambar ke Word sekaligus menggunakan Quarto

Nama
Sebagai
TSM

Penulis

Diterbitkan

Senin, 05 Desember 2022

Diperbarui

Senin, 05 Desember 2022

Tutorial ini memproses gambar dalam folder dan memindahkannya seluruh gambar ke dalam bentuk dokumen Microsoft Word beserta heading dan caption setiap gambarnya. Dokumen hasil kompilasi tersebut bisa digunakan sebagai lampiran.

Catatan

Dokumen ini mereplikasi pekerjaan yang serupa di dokumen INR-1: Tutorial: Batch Multiple Picture Into Word via HTML.

1 Pros & Cons

Berikut yang harus diketahui mengenai keuntungan/kelemahan terkait tutorial ini.

1.1 Pros

  • Dokumen yang sudah dibuat (.qmd atau .md) bisa dikompilasi ke berbagai format seperti .pdf atau .html.
  • Dengan Quarto juga bisa mengubah dokumen tersebut dalam format presentasi (.pptx atau .html). Sehingga lebih fleksibel saat ingin pindah ke format lainnya.

1.2 Cons

  • Saat kompilasi ke .docx, caption gambar dalam bentuk teks dan setiap angkanya bukan merupakan objek yang dapat diperbarui di Word.
  • Harus membiasakan dengan markdown dan VSCode (sebagai editor).
  • Harus menginstall Quarto di mesin.
  • Caption hasil kompilasi / render akan rata kiri (left alignment). Untuk mengubahnya bisa memodifikasi style output dokumen.

2 Persyaratan / Persiapan

Berikut daftar persyaratan atau hal yang harus dipersiapkan sebelum melakukan tutorial ini.

2.1 Program

Berikut daftar program yang digunakan dan yang harus terinstall di mesin:

  1. Windows 10/11 dengan powershell (clip.exe).
  2. Microsoft Excel (v2210).
  3. Visual Studio Code / VSCode.
  4. Quarto CLI.
  5. Extension VS Code: Quarto

Alternatif Download (Untuk Lokal) bisa diakses di XAGANT::TSM\_apps

  1. VSCode: VSCodeUserSetup-x64-1.73.1.exe
  2. Quarto: quarto-1.2.269-win.msi

2.2 Nama File (Gambar)

  • Informasi heading dan caption tersedia di nama gambar.
  • Pola mengikuti {Nama Proyek},{STG-XXY}_{KETERANGAN}__CS__Summation-str.jpg. Koma (,) harus tersedia di nama file sebagai pemisah. Double underscore __ sebelum CS digunakan sebagai pemisah antara Caption.
  • Heading menggunakan {STG-XXY}.
  • Caption menggunakan {STG-XXY} {KETERANGAN}.

2.3 Tips

  • Mengubah karakter spesial nama gambar menjadi - atau _. Agar dapat dikompilasi menjadi format PDF. Gunakan regex [^a-zA-Z 0-9-,_].
  • Hindari menggunakan nama file yang memiliki spasi . Ubah menjadi _. Agar tidak perlu mengubahnya menjadi %20 (URL-encode).

2.4 Contoh Dokumen

Contoh hasil akhir tutorial ini bisa dilihat di STAGNATZ dengan alamat STAGNATZ::TSM Taruma\D\02 DEVELOPMENT\fiakodev\fiako-batchimage.

3 Tutorial

Pada dasarnya pembuatan dokumen .docx ini memanfaatkan quarto untuk mengkonversi dokumen markdown menjadi format .docx via pandoc (engine yang digunakan oleh quarto). Jadi, langkah akhirnya adalah membuat dokumen markdown yang berisikan gambar menuju folder tersebut. Untuk gambar sendiri, di dokumen markdown menggunakan sintaks ![{CAPTION}]({ALAMAT-GAMBAR}). Hanya saja untuk dokumen markdown quarto harus diberi label gambar {#fig-label-gambar}, sehingga sintaks lengkapnya adalah ![{CAPTION}]({ALAMAT-GAMBAR}){#fig-label-gambar}.

3.1 Persiapan

  • Simpan gambar-gambar dalam satu folder. Dalam contoh ini gambar disimpan di folder FOLDER-GAMBAR (Gambar 1).

Gambar 1: FOLDER GAMBAR

3.2 Ambil Daftar Nama Gambar

  • Buka Command Prompt (CMD) atau terminal pada folder tersebut dengan cara mengetikkan cmd di Windows Explorer (atau cara lainnya) (Gambar 2).

Gambar 2: Ketik CMD di address bar

  • Ketik perintah dir *.jpg /b | clip yang artinya melihat daftar file dengan extension .jpg dengan format sederhana /b (Gambar 3) kemudian | hasilnya di simpan ke clipboard dengan clip (Gambar 4).

Gambar 3: Tampilan perintah dir *.jpg /b

Gambar 4: Menyimpan perintah sebelumnya ke clipboard

3.3 Buat Dokumen Quarto

  • Buka folder satu level keluar dari folder gambar. Pada contoh ini, folder tutorial merupakan folder sebelum folder FOLDER-GAMBAR.

Gambar 5: Folder tutorial

  • Buka VS Code dengan folder tersebut (tutorial). Membuka context menu (klik kanan) dan memilih “Open with Code” (Gambar 6).

Gambar 6: Membuka folder kerja (workspace) dengan “Open with Code”

  • Setelah membuka VS Code, buat dokumen baru dengan extension .qmd (menggunakan .md juga bisa jika ingin sambil melihat preview built-in dari VS Code). Pada contoh ini dibuat dokumen daftar-gambar.qmd.

Gambar 7: Membuat dokumen .qmd

3.4 Menggunakan image-concatenator.xlsx

  • Mengingat pada tahap Bab 3.2, kita menyimpan daftar gambar di clipboard. Buka dokumen image-concatenator.xlsx. (Ulangi tahap Bab 3.2 jika clipboard tertimpa dengan yang lain).

  • Pada A2 sheet INPUT paste daftar gambar yang tersimpan di clipboard (Gambar 8).

Gambar 8: Paste daftar gambar ke sel A2

  • Salin seluruh kolom D:D dari image-concatenator di sheets OUTPUT_FINAL (Gambar 9). Pastikan FOLDER IMAGES sudah diatur dengan nama folder gambar (Pada contoh) dan ditambah karakter / diakhir folder.

Gambar 9: Salin seluruh kolom D:D

Penting

Pastikan nama folder tidak memiliki karakter spesial atau spasi. Jika karakter spesial tidak bisa dibaca langsung di markdown, ubah karakter tersebut dengan URL-encode.

Catatan

Pada Gambar 9 tertulis nama folder FOLDER_IMAGES/ yang seharusnya FOLDER-GAMBAR/ (sesuai dengan nama folder kumpulan gambar).

  • Paste hasil salin ke dokumen .qmd yang telah dibuat.

Gambar 10: Paste di dokumen .qmd

3.5 Kompilasi

  • Sebelum mengkompilasi dokumen quarto .qmd ke word, sebaiknya ditambahkan informasi YAML front matter di dokumen. Front matter merupakan bagian teratas dari dokumen yang dicirikan dengan batas ---. Front matter tersebut bisa menyimpan informasi mengenai dokumen dan konfigurasinya.

  • Taruh front matter berikut ke paling atas dokumen. Contohnya seperti pada Gambar 11.

---
title: "Lampiran GAMBAR"
date: 2022-12-05
author: TSM

format:
    docx:
        toc: true
        toc-title: Daftar Isi
        number-sections: true
        reference-doc: template-laporan.docx
        fig-align: center
crossref: 
    chapters: true
language: _language.yml
---

Gambar 11: Front matter dokumen

Penting

Pastikan dokumen template-laporan.docx dan _language.yml dalam satu folder dengan dokumen daftar-gambar.qmd.

  • Ubah konfigurasi sesuai kepentingan. Jika tidak ingin menampilkan title, date, atau author. Bisa mengubah baris tersebut menjadi komentar dengan menambah karakter # di depan baris. Seperti ini contohnya.
# title: "Lampiran GAMBAR"
# date: 2022-12-05
# author: TSM
  • Buka terminal di dalam vscode dengan menekan Ctrl + ` (atau via cmd di explorer juga bisa). Hasilnya seperti pada Gambar 12.
Catatan

Jika terminal dalam vscode belum diatur, maka terminal yang digunakan adalah powershell. Untuk mengaturnya menjadi Command Prompt, buka Command Palette (Ctrl + Shift + P), pilih Terminal: Select Default Profile, dan pilih Command prompt.

Gambar 12: Pastikan terminal yang dibuka adalah Command Prompt atau cmd

  • Ketik perintah quarto render daftar-gambar.qmd --to docx. Perintah tersebut me-render / mengompilasi (quarto render) dokumen quarto (daftar-gambar.qmd) menjadi word (--to docx). Dokumen output akan dinamai sama dengan dokumen kuarto, sehingga output-nya daftar-gambar.docx (Gambar 13).

Gambar 13: Hasil merender dokumen

3.6 Selesai

  • Dokumen output yaitu daftar-gambar.docx dan dapat diakses di folder yang sama dengan dokumen quarto-nya (Gambar 14).

Gambar 14: Hasil render dokumen quarto

4 Adaptasi / Penyesuaian

  • Penyesuaian bisa diatur dengan memodifikasi image-concatenator.xlsx.

Jika terdapat pertanyaan, bisa langsung menghubungi saya.