Merubah ukuran gambar dinamis dengan PHP

 754 view     30 November 2017     Admin    Tutorial 
  #Resizeimage     #Tutorial     #Website    

Share:


Merubah ukuran gambar dinamis dengan PHP

Ketika saya pertama kali mendesain ulang blog saya kembali pada tahun 2006, saya dihadapkan pada prospek yang menakutkan untuk melalui dan mengubah ukuran semua gambar dari posting saya sebelumnya, menyesuaikannya dengan desain baru yang saya dapatkan. Untungnya, gambar yang digunakan dalam desain saya sebelumnya cukup kecil agar sesuai dengan lebar kolom baru tanpa masalah. Tapi bagaimana jika seseorang dengan ratusan posting tiba-tiba memutuskan untuk mengubah desain mereka, dan semua gambar lama mereka tidak sesuai dengan tata letak? Saya tidak siap untuk menghadapi hal itu di masa depan, jadi setelah sedikit berburu, saya menemukan solusi pemeriksaan masa depan dengan menggunakan ukuran gambar PHP dan sedikit kebaikan mod_rewrite.

Jadi bagaimana cara kerjanya?

Pertama, mari kita lihat contoh kerja sehingga Anda dapat melihat bagaimana keseluruhan panci ini keluar. Saya telah mengambil gambar yang ada, dalam hal ini di lokasi "/projects/img-resising/lightboxes.jpg" (lihat gambar aslinya). Dengan menggunakan gambar tunggal ini, dan menautkannya menggunakan URL yang sedikit berbeda, saya dapat menampilkan versi berikut:

1. Tampilan asli 

http://www.bangsos.com/assets/imgnews/201701021122.jpg

 

2. Ukuran sedang

http://www.bangsos.com/assets/imgmedium/imgnews/201701021122.jpg

 

3. ukuran kecil

http://www.bangsos.com/assets/imgsmall/imgnews/201701021122.jpg

 

Perhatikan sebuah pola di sana? Yap, menurut bagian pertama dari URL saya dapat menampilkan satu dari tiga versi ukuran yang berbeda dari satu gambar (Anda dapat menambahkan sebanyak yang Anda inginkan, tapi saya hanya memilih untuk menentukan tiga)

Solusinya datang dalam dua bagian; Yang pertama adalah skrip PHP yang menangani perubahan ukuran dan caching gambar JPG, dan yang kedua adalah seperangkat aturan mod_rewrite Apache yang memuat skrip saat URL tertentu digunakan. Misalnya perhatikan link gambar berikut:

Bagian "/ img-large" pada awal parameter src diperhatikan oleh aturan mod_rewrite, yang kemudian melewati bagian yang tersisa dari parameter, "/myimages/my-image.jpg", ke skrip PHP beserta nilai lebar (ditentukan sebelumnya sebagai parameter pada aturan mod_rewrite). Gambar di lokasi ini kemudian diubah ukurannya dengan cepat, dan hasilnya dikirim kembali ke browser.

Asal-usul skrip

Skrip awalnya berasal dari pos Timothy Crowe di veryraw.com tentang isu yang sama (yang juga menyertakan beberapa modifikasi yang dibuat oleh Trent Davies). Saya mengambil naskah dan menambahkan beberapa tambahan seperti antialiasing, sharpening, dan kemampuan untuk referensi gambar dari lokasi manapun di direktori situs Anda.

Instruksi penggunaan

Penggunaan naskah ini membawa beberapa prasyarat. Anda harus mengaktifkan mod_rewrite di server Anda, menjalankan PHP, dan memiliki akses untuk mengedit file .htaccess Anda. Kita mulai!

1. Tambahkan folder cache

Di folder root situs Anda, buat folder baru yang disebut "cache". Ini akan digunakan untuk menyimpan versi cache dari gambar sehingga tidak perlu diproses setiap kali ada panggilan (Catatan: gambar akan diproses ulang jika lebih baru dari versi cache). Anda perlu mengatur hak akses pada folder ini ke '777' sehingga script dapat menulis salinan cache.

2. Copy file script ke server anda

Download salinan file skrip "images.php", dan letakkan di folder akar situs Anda. Download naskahnya »

3. Edit file .htaccess Anda

Di folder root situs Anda, Anda harus memiliki file bernama ".htaccess", dan ini adalah di mana aturan mod_rewrite Anda akan pergi. Ini adalah file tersembunyi, jadi jika Anda menggunakan klien FTP untuk terhubung ke server Anda, Anda mungkin perlu mengaktifkan opsi untuk 'melihat file tersembunyi'. Buka file ini di editor teks, dan tambahkan kode berikut ini:

contoh kode di file .htaccess :

 

RewriteEngine On
RewriteBase /   
RewriteRule ^imgverysmall/([A-Za-z0-9/_-]+).(jpg|gif|png)$ images.php?i=x&max_width=50&imgfile=$1.$2  [L]
RewriteRule ^imgsmall/([A-Za-z0-9/_-]+).(jpg|gif|png)$ images.php?i=x&max_width=100&imgfile=$1.$2  [L]
RewriteRule ^imgmedium/([A-Za-z0-9/_-]+).(jpg|gif|png)$ images.php?i=x&max_width=230&imgfile=$1.$2  [L]
RewriteRule ^imglarge/([A-Za-z0-9/_-]+).(jpg|gif|png)$ images.php?i=x&max_width=470&imgfile=$1.$2   [L]

 

Dalam contoh ini ada tiga aturan penulisan ulang yang ditentukan, satu untuk setiap ukuran gambar yang ditunjukkan di atas. Ada dua hal penting yang perlu diperhatikan disini; Di dekat awal setiap aturan adalah tempat awalan URL dikhususkan (di sini saya telah menggunakan 'img-small /', 'img-medium /' dan 'img-large /', namun Anda dapat memodifikasi setelan ini). Ini adalah awalan URL yang akan Anda tambahkan untuk setiap link gambar yang Anda inginkan secara dinamis ukurannya. Bagian kedua yang perlu diperhatikan adalah parameter "max_width" di dekat akhir setiap aturan. Ini menetapkan lebar maksimum untuk gambar yang diubah ukurannya menggunakan setiap URL. Di sinilah Anda menentukan seberapa lebar Anda ingin gambar Anda berakhir setelah pengubahan ukuran.

Catatan: Anda dapat menambahkan sebanyak mungkin aturan yang Anda inginkan di sini, agar sesuai dengan kebutuhan Anda (misalnya Anda mungkin ingin menambahkan aturan untuk awalan URL seperti 'thumbnail /' atau 'product-image /')

4. Ujilah!

Lemparkan gambar ke situs Anda di suatu tempat dan coba telusuri ke sana, tambahkan salah satu awalan URL yang Anda tetapkan di file .htaccess Anda di awal URL (misalnya http://yoursite.com/img-large/myimagepath/myimage. jpg)

Anda harus mendapatkan gambar dengan ukuran bagus sebagai gantinya. Jika semuanya berjalan dengan baik, Anda dapat menggunakan referensi ini untuk browsing langsung ke gambar (seperti yang Anda coba) atau dalam tag gambar (seperti pada contoh di atas).

 

[Download file]

 

 

Sumber : sneak.co.nz


Share:


Comments