Saya akan membuat sistem konfigurasi gambar terpusat agar mudah diganti. Mari saya periksa semua tempat yang menggunakan gambar.
Mari saya cari semua referensi gambar di seluruh website dan isi folder public.
Mari saya periksa komponen lain yang mungkin menggunakan gambar (hero, navbar, profile).
Saya sudah memahami seluruh sistem. Gambar digunakan di about.tsx, lib/showcase.ts (untuk showcase di projects.tsx), dan case-studies.tsx. Saya akan membuat satu file konfigurasi terpusat lib/images.ts sebagai sumber tunggal semua gambar, lalu menghubungkan semua komponen ke sana.
Sekarang hubungkan lib/showcase.ts ke konfigurasi terpusat.
Sekarang update about.tsx agar memakai konfigurasi terpusat.
Sekarang update case-studies.tsx agar memakai konfigurasi terpusat.
Semua komponen kini mengambil gambar dari satu sumber. Mari verifikasi website tetap menampilkan gambar dengan benar.
Semua gambar tetap tampil normal di semua section (About, Case Studies, dan Showcase). Mari bersihkan screenshot verifikasi.
Selesai. Sekarang semua gambar website diatur dari satu file terpusat: lib/images.ts. Untuk mengganti foto ada dua cara, keduanya saya tulis sebagai panduan di bagian atas file tersebut:
- Paling mudah — timpa file lama di folder
/publicdengan foto baru memakai nama file yang sama (tidak perlu menyentuh kode sama sekali). - Atau — taruh foto baru di
/public, lalu ubah satu baris path dilib/images.ts(misalabout: '/about.png'→about: '/foto-baru.jpg').
Komponen About, Case Studies, dan Showcase (14 karya) kini semuanya menarik path dari siteImages, jadi cukup edit di satu tempat dan perubahan langsung berlaku di seluruh website.
Saya akan menyimpan foto baru ini menggantikan foto About. Karena sistem gambar terpusat memakai path /about.png, saya akan menimpa file tersebut langsung.
The current About photo is a dark design workspace. The new image is a professional portrait of a young man in a black suit against a gray background. Now I'll overwrite the file.
Foto About sudah berhasil diganti dengan potret profesional baru. Karena sistem gambar terpusat menggunakan path /about.png, perubahan langsung berlaku tanpa perlu mengubah kode apa pun. Mari verifikasi tampilannya.
Foto About sudah berhasil diganti dengan potret profesional baru dan tampil dengan baik di section About. Mari bersihkan screenshot verifikasi.
Selesai. Foto About sudah diganti dengan potret profesional baru (pria mengenakan setelan jas hitam dengan latar abu-abu) dan tampil sempurna di section About. Karena memakai sistem gambar terpusat dengan path /about.png, penggantian cukup dengan menimpa file tanpa perlu mengubah kode sama sekali.
