Latest Posts

Monday, September 28, 2015

Bagaimana Cara Menghilangkan Broken Image Pada Tampilan Membercard SLims 7

  



Pertanyaan dari mbak salmida sihombing.

2015-09-23 13:12 GMT+07:00 Salmida Haryanti Sihombing
bang, mohon pencerahannya.. saya dah inbox di Fb, gimana cara ngilangin image retak di tanda tangan, stempel dan juga fhoto pada member card slims ? ini dia hasilnya bang..

Gambar.


Kalau anda mau, bacalah dahulu artikel saya sebelumnya Membuat Member Card Menjadi Vertikal [ Portrait ] & Memodifikasi Tampilannya | SLiMS 7 [ Cendana ].

Maaf, saya baru sempat menjawab pertanyaannya...langsung saja ya.

Langkah-langkahnya sebagai berikut :

1. Pada SLims, buka direktori /admin/modules/membership kemudian copy paste file member_card_generator.php

*ini untuk jaga-jaga kalau hasil editan kita bermasalah, sudah ada backup file sebelumnya.


2. Bila tidak terbiasa dengan winSCP maka bisa juga dengan WordPad sebagai editornya, lalu buka  file member_card_generator.php, ini berarti saya anggap anda memasang SLims pada XAMP atau WAMP server di komputer Windows.


3. Untuk menghilangkan image retak di tanda tangan, stempel. Cari baris syntax berikut ini, lalu di beri tanda comment dengan format /*baris syntax*/

Baris Tandatangan & Stempel

$html_str .= '.officials{z-index:15;top: 0px;font-size: 8px;margin: 0px;}'."\n";
$html_str .= '.sign_file_div{z-index:16;position: absolute;left: -10px;top: 10px;width:107px;height: 25px;}'."\n"; 
$html_str .= '.stamp_file_div{z-index:17;position: absolute;left:-20px;top: 5px;width: 40px;height: 40px;}'."\n"; 
$html_str .= '.stamp_div{z-index:11;position: absolute;left: 10px;top:100px;margin-bottom: 34px;width: 118px;}'."\n";
$html_str .= '.stamp{z-index:12;text-align: left;margin: 0px;}'."\n";

$html_str .= '<div class="stamp_div">';
$html_str .= '<div class="stamp_file_div"><img class="" height="35px" width="35px" src="'.SWB.'files/membercard/'.$sysconf['print']['membercard']['stamp_file'].'"></img></div>';
$html_str .= '<div class="sign_file_div"><img class="" height="30px" width="100px" src="'.SWB.'files/membercard/'.$sysconf['print']['membercard']['signature_file'].'"></img></div>';
$html_str .= '<p class="stamp city">'.$sysconf['print']['membercard']['city'].', '.$card['register_date'].'</p><p class="stamp title">'.$sysconf['print']['membercard']['title'].'</p><br>';
$html_str .= '<p class="stamp officials">'.$sysconf['print']['membercard']['officials'].'<br />'.$sysconf['print']['membercard']['officials_id'].'</p></div></div></td>';



Hasilnya menjadi,

Bagian Tandatangan & Stempel

/*$html_str .= '.officials{z-index:15;top: 0px;font-size: 8px;margin: 0px;}'."\n";*/
/*$html_str .= '.sign_file_div{z-index:16;position: absolute;left: -10px;top: 10px;width:107px;height: 25px;}'."\n";*/
/*$html_str .= '.stamp_file_div{z-index:17;position: absolute;left:-20px;top: 5px;width: 40px;height: 40px;}'."\n";*/
/*$html_str .= '.stamp_div{z-index:11;position: absolute;left: 10px;top:100px;margin-bottom: 34px;width: 118px;}'."\n";*/
/*$html_str .= '.stamp{z-index:12;text-align: left;margin: 0px;}'."\n";*/

/*$html_str .= '<div class="stamp_div">';*/
/*$html_str .= '<div class="stamp_file_div"><img class="" height="35px" width="35px" src="'.SWB.'files/membercard/'.$sysconf['print']['membercard']['stamp_file'].'"></img></div>';*/
/*$html_str .= '<div class="sign_file_div"><img class="" height="30px" width="100px" src="'.SWB.'files/membercard/'.$sysconf['print']['membercard']['signature_file'].'"></img></div>';*/
/*$html_str .= '<p class="stamp city">'.$sysconf['print']['membercard']['city'].', '.$card['register_date'].'</p><p class="stamp title">'.$sysconf['print']['membercard']['title'].'</p><br>';*/
/*$html_str .= '<p class="stamp officials">'.$sysconf['print']['membercard']['officials'].'<br />'.$sysconf['print']['membercard']['officials_id'].'</p></div></div></td>';*/




4. Untuk menghilangkan image retak di foto. Cari baris syntax berikut ini, lalu di beri tanda comment dengan format /*baris syntax*/

 Baris Foto

$html_str .= '#photo_blank_div{z-index:5;position: absolute;left: 47px;top:58px;font-size: 7px;text-align: center;border:#cccccc solid 1px;width:'.($sysconf['print']['membercard']['photo_width']*$sysconf['print']['membercard']['factor']).'px; height:'.($sysconf['print']['membercard']['photo_height']*$sysconf['print']['membercard']['factor']).'px;}'."\n";
$html_str .= '#photo_div{z-index:6;position: absolute; left: 47px;top:58px;border:#cccccc solid 1px;width:'.($sysconf['print']['membercard']['photo_width']*$sysconf['print']['membercard']['factor']).'px; height:'.($sysconf['print']['membercard']['photo_height']*$sysconf['print']['membercard']['factor']).'px;}'."\n";

$html_str .= '<div id="photo_blank_div"><br />Photo size:<br />'.$sysconf['print']['membercard']['photo_width'].' X '.$sysconf['print']['membercard']['photo_height'].' cm</div>';
$html_str .= '<div id="photo_div"><img width="'.($sysconf['print']['membercard']['photo_width']*$sysconf['print']['membercard']['factor']).'px" height="'.($sysconf['print']['membercard']['photo_height']*$sysconf['print']['membercard']['factor']).'px" src="'.SWB.IMG.'/persons/'.$card['member_image'].'" /></div>';




Menjadi,

/*$html_str .= '#photo_blank_div{z-index:5;position: absolute;left: 47px;top:58px;font-size: 7px;text-align: center;border:#cccccc solid 1px;width:'.($sysconf['print']['membercard']['photo_width']*$sysconf['print']['membercard']['factor']).'px; height:'.($sysconf['print']['membercard']['photo_height']*$sysconf['print']['membercard']['factor']).'px;}'."\n";*/
/*$html_str .= '#photo_div{z-index:6;position: absolute; left: 47px;top:58px;border:#cccccc solid 1px;width:'.($sysconf['print']['membercard']['photo_width']*$sysconf['print']['membercard']['factor']).'px; height:'.($sysconf['print']['membercard']['photo_height']*$sysconf['print']['membercard']['factor']).'px;}'."\n";*/

/*$html_str .= '<div id="photo_blank_div"><br />Photo size:<br />'.$sysconf['print']['membercard']['photo_width'].' X '.$sysconf['print']['membercard']['photo_height'].' cm</div>';*/

/*$html_str .= '<div id="photo_div"><img width="'.($sysconf['print']['membercard']['photo_width']*$sysconf['print']['membercard']['factor']).'px" height="'.($sysconf['print']['membercard']['photo_height']*$sysconf['print']['membercard']['factor']).'px" src="'.SWB.IMG.'/persons/'.$card['member_image'].'" /></div>';*/



5. Simpan, reload/refresh halaman print member card & lihat hasilnya.


Selesai. Semoga bisa membantu.