Mengatasi Foto Produk yang Kabur pada Toko Online
Merujuk pada proyek toko lokomedia versi 1.3.4, dimana apabila Anda meng-upload foto produk yang ukurannya tidak sesuai dengan settingan pada toko lokomedia, maka fotonya akan terlihat kabur. Misalnya Anda akan meng-input produk samsung galaxy tab yang fotonya berukuran 445 x 280, tentu hasilnya foto tersebut akan terlihat kabur di halaman utama. Lihat gambar berikut:
Mengapa bisa terjadi seperti itu? Perlu diketahui bahwa foto yang ditampilkan di halaman depan adalah foto hasil thumbnail (pengecilan ukuran foto dari ukuran foto yang asli), jadi kalau fotonya 445 x 280 (tinggi x lebar) akan menghasilkan foto thumbnail dengan ukuran 55 x 34 (nama file fotonya adalah small_namafile.jpg ada di folder foto_produk).
Nah, foto yang ditampilkan di halaman depan di set tingginya 110 (lebarnya tidak ditentukan), maka tentu saja foto samsung galaxy tab yang tingginya hanya 34 dipaksa harus tampil 110 akan terlihat pecah/kabur, karena perbedaan prosentase perubahan ukuran gambarnya lebih dari 50% (34 menjadi 110), lain halnya kalau tinggi fotonya 130 atau 90, kalau ditampilkan dengan tinggi 110 masih terlihat bagus. Terus gimana dong solusinya?
Hilangkan settingan tinggi 110 untuk tampilan produk di halaman depan, caranya buka file tengah.php, lalu cari pada baris ke-73, hapus height='110', lalu simpan perubahan pada file tengah.php. Maka tentu sekarang tampilan foto samsung galaxy tabnya sudah jelas. Lihat gambar berikut:
Dalam sudut pandang ilmu design grafis, tampilan pada gambar diatas mengurangi seni keindahan dan kurang rapi, jadi disitulah maksud mengapa tinggi produk di set sama semua, dalam kasus ini 110, maksudnya agar produk dapat tampil rapi dan enak dipandang.
Kalau trik yang saya gunakan agak manual, dimana foto yang kurang proporsional akan saya resize (ubah dulu ukurannya) menggunakan Photoshop/Fireworks, misalnya saya ubah ukurannya menjadi 250 x 150, sehingga akan menghasilkan foto thumbnail berukuran 55 x 90 dan masih bagus ketika ditampilkan pada tinggi 110 (90 menjadi 110). Lihat gambar berikut:
Itulah trik dari saya yang terbilang masih manual, semoga Anda menemukan trik yang lebih efisien. O iya, perlu diketahui juga bahwa berapapun ukuran foto yang Anda upload, maka akan di resize dalam bentuk kecilnya (thumbnail) dengan ukuran lebarnya 55px sedangkan tingginya mengikuti proporsional dari lebar. Apabila ingin men-settingnya lain dari 55px, silahkan buka file fungsi_thumb.php yang ada di folder config, cari di function UploadImage.
66 Komentar
TQ om lukman.......
Mas saya mau tanya, knapa tinymcpuk nya bagian insert imagenya g bisa waktu coba saya upload ya? solusinya bgmn ya? Terima kasih
Juara 3.... LOKOMEDIA JAYA TERUUUUUUUUUUUSSSSS.......
kalo saya merubah img src nya mas..
sebelumnya begini :
<img src='foto_produk/small_$r[gambar]' border='0' height='110 title='gambar' />
lalu saya rubah jadi begini :
<img src='foto_produk/$r[gambar]' border='0' height='130' width=150 title='gambar' />
jadi gambar yg belum di resize jd thumbnail yg saya tampilkan..
terimakasih om Lukman.. nice info
Terima kasih Pak Lukman atas pencerahannya...
Maju dan Jaya CMS LOKOMEDIA...I Love Indonesia
tambahan modul nih om lukman:
Buat temen2 lokomers ini saya buatkan satu modul untuk cms lokomedia, yaitu modul daftar pelanggan Pak lukman sudah membuatkan kita membership (yaitu sistem keanggotan bagi pelanggan kita) tapi bagaimana cara kita mengetahui berapa jumlah pelanggan kita? dan siapa saja pelanggan kita? lalu jika ada pelanggan yang nakal, bagaimana cara memblokirnya?
untuk mendownloadnya silahkan ikuti link berikut ==> http://toko-muslim.web.id/downlot.php?file=modul%20pelangga n.rar
iya om saya juga merubah scriptnya:
sebelumnya begini :
<img src='foto_produk/small_$r[gambar]' border='0' height='110 title='gambar' />
lalu saya rubah jadi begini :
<img src='foto_produk/$r[gambar]' border='0' height='110' title='gambar' />
jadi keterangan small_ nya saya hapus, walhamdulillah hasilnya tetep bagus
@fajar: memang namanya editor are tidak bisa dimasuki image secara langsung harus lewat pihak ketiga. Misal imageshack.com nah setelah diupload disana, copy pastekan linknya di image editor tinymcpuk
//Membaca file
$sql=mysql_query("SELECT * FROM produk WHERE id_produk='$_POST[id]'");
$r=mysql_fetch_ array($sql);
$data=$r[gambar];
$pathfile='../.. /../foto_produk/'.$data;
$pathfile2='../../.. /foto_produk/small_'.$data;
// Hapus produk
if ($module=='produk' AND $act=='hapus'){
if (file_exists($pathfile) AND isset($data)) {
unlink("$pathfile");
}
if (file_exists($pathfile2) AND isset($data)) {
unlink("$pathfile2");
}
mysql_query("DELETE FROM produk WHERE id_produk='$_GET[id]'");
header('location:../../media.php?module='.$module );
}
ada yg ngerti fungsi unlink? td berfungsi neh mohon pencerahannhya, kl
didatabasenya terhapus tapi di foldernya foto_produk atau foto_berita
masih ada tidak tehapus terima kasih...
agan mixer itu ga bisa didownload,
wah kapan ya bisa support paypal dan sejenisnya
@coffepark: fungsi unlink adalah fungsi untuk memutuskan link (<a href.....) saja tidak berfungsi untuk menghapus data di direktori foto.
@aryo seno: yang di www.toko-muslim.web.id memang sengaja tidak bisa diklik kanan. Coba download di www.kursusdonat.com untuk paypal saat ini belum bisa karena prosedurnya yang cukup rumit
mas mixwr roti@mau naya donk mas gmna ya cara koneksi coment fessbuk di cms lokomedia kaya web mas bisa di share ga heheehehhe
mixer roti: tapi kl file seperti mp3 .xsl. doc kalau saat action hapus di databasenya terhapus dan filenya pun ikut terhapus juga jd tdk terjadi pembengkakan data tp file dengan extention gif.jpg dll aneh file nya didatabasenya terhapus tp di foldernya masih ada tp yh terimakasih atas sarannya mungkin bagi yang bisa bantu kirim ke planet@coffeeparkclothes.com saran anda sangat membatu kami ...
Wah, thanx pak Lukman utk updatenya. Sangat membantu.
@coffepark : fungsi unlink itu memang untuk menghapus file yang ada di hosting atau direktori hosting.
untuk fungsi unlink anda sudah benar unlink("$pathfile");
tapi anda pastikan dulu jika $pathfile itu sudah benar menuju ke file yang akan di hapus...
semoga membantu ^_^
Oke Mas poeji terimkasih sarannya informasi anda sangat membantu sekali ..... salam hangat
Mau tanya nih saya udah upload web di idwebhost terus pas saya coba upload image dihalaman admin ko tidak bisa yah error di (function.move-uploaded-file) padahal di server local saya udah jalan .. di setiap fungsi upload image pasti gak bisa... mohon bantuannya ya master"" ;)
@Agung : apakah folder untuk menaruh file-file gambar sudah di berikan permission foldernya menjadi 755???
kalo boleh tau caranya gmana mas?
@poeji kalo boleh tau caranya gmana mas?
Paklukman, di update toko yg 1.3.4 kok gk bisa bikin laporan, muncul pesan (Tidak ada transaksi/order pada Tanggal xxxxx) padahal udah ada transaksi.
mohon kepada pk lukman untuk memberi pencerahan.
jaya terus lokomedia
@poeji udah bisa mas ternyata emang permission foldernya bukan 755 tapi 777
gmana cara membuat tabel tambahan warna pada keranjang belanja? udah di coba tp gagal terus
oh ya satu lagi nih andai customer pengen login membatalkan atau mengedit pesanannya ga ada halamn buat costumer
tambah ilmu lagi. makasih bangat
Mohon maaf lahir dan batin untuk semua
Thanks infonya segera dipraktekkkan
gan buku barunya kapan lagi muncul... gak sabar ngoleksi nih
Minta bantuannya dong.. begini saya mau pisahin antara barang yang diskon sama yang engga udah bisa saya pake if else dengan fungsi (empty) nah masalahnya saya ingin ngebates misal produk yang engga diskon ditampilin 8 dan yang diskon 4 kalo saya pake fungsi limit misal limit 8 nah yang tamil cuma 2 yang diskon karna dari semua data di bates dari 1-8 sedangkan dari 1-8 cuma ada 2 diskon sisanya yang gak diskon saya tuh pengen ngebates 8 data yang enggak diskon dan 4 data yang diskon nah saya kebingungan gimana caranya mohon bantuannya ya master "" cara ngebatesnya...
Mantaf infonya :)
hati2 ada bug di form pencarian, jika anda coba mencari file lewat form pencarian, maka "module=detailberita" tidak bisa jalan. Artinya jika anda mengklik judul berita, maka yang akan muncul hanya templatenya saja sedangkan isinya tidak muncul. Dulu saya kira website saya kena hack, ternyata dilocalhost pun itu bisa terjadi. Mohon buat om lukman dicarikan solusinya karena saya yakin yang mengalami hal ini bukan saya saja. thanx
@all : mohon kritik dan sarannya untuk design webku yg versi mobile. Versi mobile trsbut bisa di akses dgn mengklik mobile pd webku atau dgn mengakses melalui HP masing2 atau pake emulatornya opera yg bs d coba di http://bit.ly/9pylnT
thank sebelumnya ^_^
http://qazuma.blogspot.com/
mohon bantuan : input produk baru data tidak tersimpan, pd CMS toko lokomedia 1.3.4, menu dan modul yang lain tidak maslah. tks untuk bantuannya.
oooo... ^^
saya mau tanyaaa...saya pake tinymce ke editor web sayaaa...tapi pas pindah baris atau pake tag "<br>".....gak mau masuk ke database......alias "Not Found"....mohon solusinyaaa
@sate: tag nya salah harusnya <br /> kalau cuma <br> gak dikenali sama html tidy. Atau pake aja "enter" kok susah2 amad.....
memang om lukman top banget memberi solusi
nice info..
mantaapp
numpang lewat ya para master.........
www.anekaquran.com
@alquran: wooiii lebay banget dehhh lo.... klo mo promo web jangan di sinilah....
Pemasangan Yahoo Messenger di Toko Online tidak berfungsi kenapa?
Firefox tidak mengetahui cara membuka halaman ini karena protokol alamat tidak terkait dengan program apapun.
Mohon penerangan dari para master,
Ada yang pernah buat search untuk multi kolom? Jadi orang bisa cari nama barang di kolom nama barang, dan cari harga murah dikolom murah, dan cari katalog, serta diskon. terima kasih atas percerahannya.
mantab infonya...
Ijin download CMS toko online nya mas Lukman.
Saran untuk mas Rizal, mohon solusi agar template New Griya Gaya nya lebih cepat loadingnya, sy test di gtmetrix skornya masih rendah sekali.
Review Lokomedia : http://jackysan.info/lombok-online/cara-membuat-toko-online -dengan-cms-lokomedia/
Mastah mastah... mau tanya, scriptnya gmana kalo misalnya saya mau di detail produknya, pho to produk tersebut bisa diklik dan ngezoom seperti di home ???
Mohon pencerahan... newbie :D
baik, terima kasih untuk berbagi seperti sebuah blog yang sangat baik yang telah memberi saya beberapa ideas.I indah ingin mendapatkan update lebih seperti.
maksudnya kalau pake CMS lokomedia ya?
Agan2..knp ya..ko websaya gak bisa dklik harus di ketik manual di browser, coba gan masuk kesini pasti gak bisa www.distrosoftware.co.cc mohon pencerahan nya..
coba di buka agan2.. gmn ada masukan..atau pendapat, www.dissof.tk
terimakasi info ny......
mantap gan...
wah, jujur masih bingung hehehehe
berhati2lah dengan orang yg bernama: Andrea Adelheid
Awas anda tertipu!!
nice infor, very informative..
Master semua bantu dong
cara menghapus data orderan yang gak jadi ?
terimakasih para master
Cara agar gambar yg di upload agar tidak terlalu melebar melebihi batas yang kita tentukan (ukuran tampilan sesuai keinginan kita), sehingga gambar kelihatan rapi
nama file kiri.php, bagian Modul detail berita
misal kita ingin width = 600 ;
SCRIPT
$imgurl="foto_berita/$d[gambar] ";
$size = GetImageSize($imgurl);
if (isset($info["APP13"])) {
$iptc = iptcparse($info["APP13"]);
var_dump($iptc);
}
$img_x = $size[0];
$img_y = $size[1];
$img_type = $size[2];
$img_sizes = $size[3];
if ($size[0]<600) {
$lebar=$img_x;
}
if ($size[0]>=600) {
$lebar=600;
}
// Apabila ada gambar dalam berita, tampilkan
if ($d['gambar']!=''){
echo "<p><span class=image><img src='foto_berita/$d[gambar]' width=$lebar border=0></span></p>";
Bagaimana script untuk membuat multiple upload Image untuk Script Toko Online CMS Loko Media. Agar saya bisa mengupload gambar produk2 saya lebih dari 1 gambar (misal: 3 gambar) tampak depan, tampak samping, dan tampak dari sisi lain sesuai kebutuhan. Karena saat ini Script Toko Online CMS LokoMedia hanya menyediakan 1 slot form buat upload gambar.
Saya pernah mencoba membuat multiple upload image dengan menambahkan 2 kolom tambahan di tabel produk, yaitu gambar2 dan gambar 3. Dan kemudian menambah form upload utk gambar 2 & gambar 3 juga menambah perintah query insert utk kedua field tambahan tersebut. Nama file berhasil disimpan kedalam database, namun gambar yang di upload tidak saya temukan di folder foto_produk. sehingga saya kesulitan untuk menampilkan gambar2 tambahan untuk produk saya tersebut.
Mohon Pencerahan & bantuan dari Agan2 sekalian,, Thks.. :)
@Kang Ibell: Kemungkinan ada script yang belum di ubah pada folder config di file fungsi_thumb.php.
Semoga membantu....
@Kang Ibell: Mencoba menjawab sesuai kemampuanku...Anda berarti bikin function image lagi seperti yg sebelumnya dgn nama function brbeda dan folder imageny jg brbeda dgn yg sblmny.
Mungkin para master ada yg mau nambahin....
nice info gan
sangat informatif sekali gan
Terimakasih om Lukman.. nice info
Terimakasih banyak kang...
atau bisa juga dengan cara duplicate image. alias tanpa merubah script. caranya :
- setelah selesai upload, image terpecah menjadi 2 (besar & kecil) dan masuk ke folder foto_produk.
- caranya klik dan copy image yg gambarnya gede/utuh kemudian rename dengan nama yg sama persis dengan gambar satunya yg ukuranya kecil, kemudian paste. otomatis gambar akan replace dan menjadi gambar gede semua cuma atribut namanya saja beda. dan lihat hasilnya... nggak repot kok