GD 제로보드에 썸네일을 적용하자
컨텐츠 정보
- 22,820 조회
- 5 추천
- 목록
본문
이제 본격적으로 GD함수를 이용하여 제로보드에 썸네일을 이용해 보겠습니다~
일단 이 첨부된 소스는 두가지 인데 thumb.php는 제가 쓰고 있는 파일입니다. 호스팅 회사의 GD라이브러리의 오류때문에 gif 파일 생성이 안되더군요.. 그래서 gif 을 jpg 파일로 바꿔쓰고 있습니다. bmp 파일도 잘 안되고 오히려 용량이 커지기 때문에 jpg 파일로 변환하여 사용중입니다. 수정하실 분들은 수정하셔도 무방하구요..
또하나 이전 강좌에서도 밝혔듯이 제 서버에서는 ImageCopyResampled 명령이 제대로 작동하질 않아서 아쉽지만 ImageCopyResized를 사용하고 있습니다. ImageCopyResampled 문을 사용하실려면 앞의 주석문(//)을 삭제하시고 ImageCopyResized문을 지워주세요~ 또 자신의 서버가 gif 파일 생성을 잘 지원할 경우 thumbgif.php 을 thumb.php 파일로 교체한 다음 사용하세요~
암튼 두 파일중 자신에 맞는 파일은 선택하여 thumb.php 로 이름을 바꾼뒤 4번째 줄의 제로보드 절대경로를 수정해 주시고, 49~51번째 줄 부근의 로고 이미지로 쓸 파일 이름을 수정해 줍니다. 그리고 thumb.php을 제로보드 폴더 안에 업로드 하고, 로고 이미지로 쓸 세가지 파일 logol.png, logom.png, logos.php 을 제로보드 images 폴더 안에 업로드 합니다. 이때 로고이미지는 예쁘게 나타내기 위해 배경이 없는 투명이미지로 gif나 png 파일로 제작합니다. gif 파일일 경우 49~51번째 줄의 경로와 파일명을 수정해 주시고 53번째 줄의 $overlay_img=ImageCreateFromPNG($over); 를 $overlay_img=ImageCreateFromGIF($over); 로 수정해 쓰시기 바랍니다.
전 편의상 썸네일 이미지의 싸이즈에 따라 로고이미지를 세가지로 구분해 쓰고 있습니다. 썸네일이 작은 경우, 중간, 큰 경우 세종류로 나눠서 거기에 쓰일 logos, logom, logol 로 나눴는데, 필요치 않으신 분들은 수정해서 쓰셔도
상관없습니다~
제가 사용하는 thumbnail 함수는 다음과 같습니다.
thumbnail($file, $save_filename, $max_width, $max_height)
$file은 원본 이미지의 경로입니다. $save_filename은 원본이미지 이름에 추가로 붙일 이름이구요, $max_width와 $max_height는 썸네일을 생성할 가로세로 사이즈 입니다. 예를 들어 원본파일이 $file="절대경로/test.jpg" 이고 $save_filename="_small.thumb" 이라면 동일한 폴더안에 "test.jpg_small.thumb" 으로 저장이 됩니다. 일단 썸네일의 생성은 첨부한 그림과 같이 센터를 중심으로 최대 사이즈로 잘라냈습니다. 이미지의 중앙에 대부분 표현하고자 하는 포인트가 있다보니 아무래도 가로세로 비율을 맞추면서 원하는 사이즈로 나타내는 방법으론 이게 젤 나을듯 싶더군여.. 암튼 다음으로 수정하여 사용하는 방법입니다.
-----------------------------------------------------------------
일단 thumb.php 파일과 제작한 로고이미지를 업로드 하시고 썸네일이 쓰일 제로보드 스킨의 setup.php 파일의 맨 위에 다음을 추가해 줍니다.
<?
include "thumb.php";
?>
-----------------------------------------------------------------
다음으로 list_main.php 파일의 맨 위에 다음을 추가합니다.(처음엔 글 작성완료 버튼을 누르는 순간 썸네일을 생성하게 할까도 해봤는데 그것보다는 목록보기를 할때 썸네일이 있는지를 체크해서 없으면 생성하는 방법이 더 좋을거 같더군요.. 혹시 첨부파일 정리를 해서 썸네일을 다 지웠더라도 목록보기를 하면 다시 생성할수 있으니깐.. 역시 제일 좋은 부분은 바로 list_main.php 안인거 같네여)
<?
if(eregi("\\.jpg|\\.png|\\.jpeg|\\.gif|\\.bmp",$data['file_name1'])&&@file_exists($data['file_name1'])) {
if(!@file_exists($data['file_name1']."_s.thumb")) thumbnail($data['file_name1'],"_s.thumb","40","30");
if(!@file_exists($data['file_name1']."_m.thumb")) thumbnail($data['file_name1'],"_m.thumb","100","75");
if(!@file_exists($data['file_name1']."_l.thumb")) thumbnail($data['file_name1'],"_l.thumb","200","150");
}
if(eregi("\\.jpg|\\.png|\\.jpeg|\\.gif|\\.bmp",$data['file_name2'])&&@file_exists($data['file_name2'])) {
if(!@file_exists($data['file_name2']."_s.thumb")) thumbnail($data['file_name2'],"_s.thumb","40","30");
if(!@file_exists($data['file_name2']."_m.thumb")) thumbnail($data['file_name2'],"_m.thumb","100","75");
if(!@file_exists($data['file_name2']."_l.thumb")) thumbnail($data['file_name2'],"_l.thumb","200","150");
}
?>
제로보드에 이미지나 파일을 업로드 하면 /bbs/data/게시판이름 폴더 안에 이미지가 업로드 됩니다. 소스를 수정하면 썸네일을 별도의 디렉토리에 생성하게도 할 수 있긴하지만.. 관리할때나 다른곳에서 불러올때나 제일 좋은 방법은 원본 이미지와 같은 폴더 안에 비슷한 이름으로 생성하는게 좋을거 같아서.. 일단 jpg 이미지 파일이라면, data/게시판이름/이미지.jpg_l.thumb 이런식으로 이름이 붙게 만들었습니다. 새로운 파일이름보다는 이렇게 하는게 후에 썸네일을 불러올때 수정하기도 간편하고 좋을거 같습니다. 전 썸네일을 small, midium, large 세 사이즈로 구분해서 쓰기 때문에 저렇게 사용하고 있습니다. 동일한 형식으로 자신의 홈에 맞게 수정하여 사용하시면 됩니다.
-----------------------------------------------------------------
다음으로 목록보기의 부분에 원본 이미지 대신 썸네일로 나타내는 방법입니다.
이 부분도 보통 list_main.php 에 있습니다. 예를 들어 제로보드의 기본 갤러리 스킨인 zero_pic_gallery의 경우에는 55번째 줄의 $_srcname = $data[file_name1]; 이 부분을 중간사이즈의 썸네일로 나타낼려면, $_srcname = $data[file_name1]."_m.thumb"; 의 식으로 바꿔주면 됩니다. 그리고 갤러리 출력부분의 <img src=<?=$_srcname?> border=0 width=<?=$_xsize?>> 같은 태그 안의 width 나 height 는 삭제하셔서 썸네일이 그대로 출력되게 바꿔주시면 됩니다.
또 하나 ggambo5200_gallery 스킨을 예를 들자면, $screenshot = $data['file_name1']; 이나 $screenshot = $data['file_name2']; 부분을 위와 같은 식으로 $screenshot = $data['file_name1']."_m.thumb"; 같은 식으로 바꿔 쓰시면 됩니다. 물론 필요없이 이미지 사이즈를 체크하고, img 태그안의 width 나 height 설정부분은 제거해 주시면 원하는 사이즈의 썸네일로 출력이 가능합니다.
말로는 복잡해 보여도, 단순한 태그만 알면 쉽게 수정할수 있으실거라 생각합니다~
그리고 최근갤러리 부분을 수정하실때도 outlogin.php 의 print_gallery 펑션 안의 $filename = $_zb_url.$data[file_name1]; ,$filename = $_zb_url.$data[file_name2]; 이런 부분을 모두 위와 같은 방법으로 $filename = $_zb_url.$data[file_name1]."_m.thumb";, $filename = $_zb_url.$data[file_name2]."_m.thumb"; 이런식으로만 바꿔주시면 됩니다. 물론 _m.thumb 은 중간사이즈의 썸네일일 경우를 예를 든거구요~
자신이 직접 만든 함수로 최근갤러리를 나타내시는 분들도 다 이런식으로만 수정해 주시면 됩니다.
-----------------------------------------------------------------
다음으로 글을 지웠을때 해당하는 썸네일도 함께 지워지도록 수정을 하겠습니다. 제로보드 delete_ok.php 파일 여시고 다음과 같은 부분을 찾아 그 아래에 소스를 추가합니다.
// 파일삭제
@z_unlink("./".$s_data[file_name1]);
@z_unlink("./".$s_data[file_name2]);
//추가
@z_unlink("./".$s_data[file_name1]."_s.thumb");
@z_unlink("./".$s_data[file_name1]."_m.thumb");
@z_unlink("./".$s_data[file_name1]."_l.thumb");
@z_unlink("./".$s_data[file_name2]."_s.thumb");
@z_unlink("./".$s_data[file_name2]."_m.thumb");
@z_unlink("./".$s_data[file_name2]."_l.thumb");
물론 자신이 생성한 파일명이 _s.thumb, _m.thumb, _l.thumb 이 아닌경우에는 맞게 고치시면 되구요.. 그 다음으로 글 수정하기를 했을 경우 업로드된 이미지를 삭제했을때 썸네일도 함께 삭제되기 위한 수정입니다. write_ok.php 파일을 여시고 * 수정글일때 부분을 찾아 수정을 합니다.
<원본>
// 파일삭제
if($del_file1==1) {@z_unlink("./".$s_data[file_name1]);$del_que1=",file_name1='',s_file_name1=''";}
if($del_file2==1) {@z_unlink("./".$s_data[file_name2]);$del_que2=",file_name2='',s_file_name2=''";}
<수정>
// 파일삭제
if($del_file1==1) {
@z_unlink("./".$s_data[file_name1]);
@z_unlink("./".$s_data[file_name1]."_s.thumb");
@z_unlink("./".$s_data[file_name1]."_m.thumb");
@z_unlink("./".$s_data[file_name1]."_l.thumb");
$del_que1=",file_name1='',s_file_name1=''";
}
if($del_file2==1) {
@z_unlink("./".$s_data[file_name2]);
@z_unlink("./".$s_data[file_name2]."_s.thumb");
@z_unlink("./".$s_data[file_name2]."_m.thumb");
@z_unlink("./".$s_data[file_name2]."_l.thumb");
$del_que2=",file_name2='',s_file_name2=''";
}
-----------------------------------------------------------------
이제 수정은 다 끝났습니다. 직접하면 정말 간단한 건데 설명할려고 하니 상당히 길어지네요... 복잡해 보이구여. ^^;; 글을 삭제할때나 수정했을때의 제로보드 수정부분은 안하셔도 상관은 없습니다. 썸네일을 지워주고 싶으시면 직접 ftp 프로그램으로 접속하셔서 지워주셔도 되고 제로보드 관리자 모드의 첨부파일 정리를 하셔도 썸네일이 삭제됩니다. 그리고 나서 다시 해당 게시판의 목록보기를 하면 재생성 되구요.. 이를 응용하면 얼마든지 다양한 기능 구현이 가능합니다. 트래픽도 상당량 줄일수 있구요.. 아무래도 썸네일이 요즘 추세이다 보니 아직 사용해보지 않으신 분들을 위해 허접하게나마 팁을 올려봤네여..
-----------------------------------------------------------------
*추가팁+1*
사용하다 보니 이미지가 가끔 원하는 사이즈보다 한 1픽셀정도 작아져서 오른쪽끝이나 아래끝부분에 흰줄이 가끔 보일때도 있더군여.. 이럴땐 thumb.php 소스의 ImageCopyResized($dst_img, $src_img, 0, 0, $srcx, $srcy, $max_width, $max_height, $srcW, $srcH); 이부분을
ImageCopyResized($dst_img, $src_img, 0, 0, $srcx, $srcy, $max_width+1, $max_height+1, $srcW, $srcH);
이렇게 바꿔놓고 사용해 보세여~
출처 :: http://rubusy.com/bbs/view.php?id=pjboard&page=1&sn1=&divpage=1&sn=off&ss=on&sc=on&select_arrange=headnum&desc=asc&no=12
일단 이 첨부된 소스는 두가지 인데 thumb.php는 제가 쓰고 있는 파일입니다. 호스팅 회사의 GD라이브러리의 오류때문에 gif 파일 생성이 안되더군요.. 그래서 gif 을 jpg 파일로 바꿔쓰고 있습니다. bmp 파일도 잘 안되고 오히려 용량이 커지기 때문에 jpg 파일로 변환하여 사용중입니다. 수정하실 분들은 수정하셔도 무방하구요..
또하나 이전 강좌에서도 밝혔듯이 제 서버에서는 ImageCopyResampled 명령이 제대로 작동하질 않아서 아쉽지만 ImageCopyResized를 사용하고 있습니다. ImageCopyResampled 문을 사용하실려면 앞의 주석문(//)을 삭제하시고 ImageCopyResized문을 지워주세요~ 또 자신의 서버가 gif 파일 생성을 잘 지원할 경우 thumbgif.php 을 thumb.php 파일로 교체한 다음 사용하세요~
암튼 두 파일중 자신에 맞는 파일은 선택하여 thumb.php 로 이름을 바꾼뒤 4번째 줄의 제로보드 절대경로를 수정해 주시고, 49~51번째 줄 부근의 로고 이미지로 쓸 파일 이름을 수정해 줍니다. 그리고 thumb.php을 제로보드 폴더 안에 업로드 하고, 로고 이미지로 쓸 세가지 파일 logol.png, logom.png, logos.php 을 제로보드 images 폴더 안에 업로드 합니다. 이때 로고이미지는 예쁘게 나타내기 위해 배경이 없는 투명이미지로 gif나 png 파일로 제작합니다. gif 파일일 경우 49~51번째 줄의 경로와 파일명을 수정해 주시고 53번째 줄의 $overlay_img=ImageCreateFromPNG($over); 를 $overlay_img=ImageCreateFromGIF($over); 로 수정해 쓰시기 바랍니다.
전 편의상 썸네일 이미지의 싸이즈에 따라 로고이미지를 세가지로 구분해 쓰고 있습니다. 썸네일이 작은 경우, 중간, 큰 경우 세종류로 나눠서 거기에 쓰일 logos, logom, logol 로 나눴는데, 필요치 않으신 분들은 수정해서 쓰셔도
상관없습니다~
제가 사용하는 thumbnail 함수는 다음과 같습니다.
thumbnail($file, $save_filename, $max_width, $max_height)
$file은 원본 이미지의 경로입니다. $save_filename은 원본이미지 이름에 추가로 붙일 이름이구요, $max_width와 $max_height는 썸네일을 생성할 가로세로 사이즈 입니다. 예를 들어 원본파일이 $file="절대경로/test.jpg" 이고 $save_filename="_small.thumb" 이라면 동일한 폴더안에 "test.jpg_small.thumb" 으로 저장이 됩니다. 일단 썸네일의 생성은 첨부한 그림과 같이 센터를 중심으로 최대 사이즈로 잘라냈습니다. 이미지의 중앙에 대부분 표현하고자 하는 포인트가 있다보니 아무래도 가로세로 비율을 맞추면서 원하는 사이즈로 나타내는 방법으론 이게 젤 나을듯 싶더군여.. 암튼 다음으로 수정하여 사용하는 방법입니다.
-----------------------------------------------------------------
일단 thumb.php 파일과 제작한 로고이미지를 업로드 하시고 썸네일이 쓰일 제로보드 스킨의 setup.php 파일의 맨 위에 다음을 추가해 줍니다.
<?
include "thumb.php";
?>
-----------------------------------------------------------------
다음으로 list_main.php 파일의 맨 위에 다음을 추가합니다.(처음엔 글 작성완료 버튼을 누르는 순간 썸네일을 생성하게 할까도 해봤는데 그것보다는 목록보기를 할때 썸네일이 있는지를 체크해서 없으면 생성하는 방법이 더 좋을거 같더군요.. 혹시 첨부파일 정리를 해서 썸네일을 다 지웠더라도 목록보기를 하면 다시 생성할수 있으니깐.. 역시 제일 좋은 부분은 바로 list_main.php 안인거 같네여)
<?
if(eregi("\\.jpg|\\.png|\\.jpeg|\\.gif|\\.bmp",$data['file_name1'])&&@file_exists($data['file_name1'])) {
if(!@file_exists($data['file_name1']."_s.thumb")) thumbnail($data['file_name1'],"_s.thumb","40","30");
if(!@file_exists($data['file_name1']."_m.thumb")) thumbnail($data['file_name1'],"_m.thumb","100","75");
if(!@file_exists($data['file_name1']."_l.thumb")) thumbnail($data['file_name1'],"_l.thumb","200","150");
}
if(eregi("\\.jpg|\\.png|\\.jpeg|\\.gif|\\.bmp",$data['file_name2'])&&@file_exists($data['file_name2'])) {
if(!@file_exists($data['file_name2']."_s.thumb")) thumbnail($data['file_name2'],"_s.thumb","40","30");
if(!@file_exists($data['file_name2']."_m.thumb")) thumbnail($data['file_name2'],"_m.thumb","100","75");
if(!@file_exists($data['file_name2']."_l.thumb")) thumbnail($data['file_name2'],"_l.thumb","200","150");
}
?>
제로보드에 이미지나 파일을 업로드 하면 /bbs/data/게시판이름 폴더 안에 이미지가 업로드 됩니다. 소스를 수정하면 썸네일을 별도의 디렉토리에 생성하게도 할 수 있긴하지만.. 관리할때나 다른곳에서 불러올때나 제일 좋은 방법은 원본 이미지와 같은 폴더 안에 비슷한 이름으로 생성하는게 좋을거 같아서.. 일단 jpg 이미지 파일이라면, data/게시판이름/이미지.jpg_l.thumb 이런식으로 이름이 붙게 만들었습니다. 새로운 파일이름보다는 이렇게 하는게 후에 썸네일을 불러올때 수정하기도 간편하고 좋을거 같습니다. 전 썸네일을 small, midium, large 세 사이즈로 구분해서 쓰기 때문에 저렇게 사용하고 있습니다. 동일한 형식으로 자신의 홈에 맞게 수정하여 사용하시면 됩니다.
-----------------------------------------------------------------
다음으로 목록보기의 부분에 원본 이미지 대신 썸네일로 나타내는 방법입니다.
이 부분도 보통 list_main.php 에 있습니다. 예를 들어 제로보드의 기본 갤러리 스킨인 zero_pic_gallery의 경우에는 55번째 줄의 $_srcname = $data[file_name1]; 이 부분을 중간사이즈의 썸네일로 나타낼려면, $_srcname = $data[file_name1]."_m.thumb"; 의 식으로 바꿔주면 됩니다. 그리고 갤러리 출력부분의 <img src=<?=$_srcname?> border=0 width=<?=$_xsize?>> 같은 태그 안의 width 나 height 는 삭제하셔서 썸네일이 그대로 출력되게 바꿔주시면 됩니다.
또 하나 ggambo5200_gallery 스킨을 예를 들자면, $screenshot = $data['file_name1']; 이나 $screenshot = $data['file_name2']; 부분을 위와 같은 식으로 $screenshot = $data['file_name1']."_m.thumb"; 같은 식으로 바꿔 쓰시면 됩니다. 물론 필요없이 이미지 사이즈를 체크하고, img 태그안의 width 나 height 설정부분은 제거해 주시면 원하는 사이즈의 썸네일로 출력이 가능합니다.
말로는 복잡해 보여도, 단순한 태그만 알면 쉽게 수정할수 있으실거라 생각합니다~
그리고 최근갤러리 부분을 수정하실때도 outlogin.php 의 print_gallery 펑션 안의 $filename = $_zb_url.$data[file_name1]; ,$filename = $_zb_url.$data[file_name2]; 이런 부분을 모두 위와 같은 방법으로 $filename = $_zb_url.$data[file_name1]."_m.thumb";, $filename = $_zb_url.$data[file_name2]."_m.thumb"; 이런식으로만 바꿔주시면 됩니다. 물론 _m.thumb 은 중간사이즈의 썸네일일 경우를 예를 든거구요~
자신이 직접 만든 함수로 최근갤러리를 나타내시는 분들도 다 이런식으로만 수정해 주시면 됩니다.
-----------------------------------------------------------------
다음으로 글을 지웠을때 해당하는 썸네일도 함께 지워지도록 수정을 하겠습니다. 제로보드 delete_ok.php 파일 여시고 다음과 같은 부분을 찾아 그 아래에 소스를 추가합니다.
// 파일삭제
@z_unlink("./".$s_data[file_name1]);
@z_unlink("./".$s_data[file_name2]);
//추가
@z_unlink("./".$s_data[file_name1]."_s.thumb");
@z_unlink("./".$s_data[file_name1]."_m.thumb");
@z_unlink("./".$s_data[file_name1]."_l.thumb");
@z_unlink("./".$s_data[file_name2]."_s.thumb");
@z_unlink("./".$s_data[file_name2]."_m.thumb");
@z_unlink("./".$s_data[file_name2]."_l.thumb");
물론 자신이 생성한 파일명이 _s.thumb, _m.thumb, _l.thumb 이 아닌경우에는 맞게 고치시면 되구요.. 그 다음으로 글 수정하기를 했을 경우 업로드된 이미지를 삭제했을때 썸네일도 함께 삭제되기 위한 수정입니다. write_ok.php 파일을 여시고 * 수정글일때 부분을 찾아 수정을 합니다.
<원본>
// 파일삭제
if($del_file1==1) {@z_unlink("./".$s_data[file_name1]);$del_que1=",file_name1='',s_file_name1=''";}
if($del_file2==1) {@z_unlink("./".$s_data[file_name2]);$del_que2=",file_name2='',s_file_name2=''";}
<수정>
// 파일삭제
if($del_file1==1) {
@z_unlink("./".$s_data[file_name1]);
@z_unlink("./".$s_data[file_name1]."_s.thumb");
@z_unlink("./".$s_data[file_name1]."_m.thumb");
@z_unlink("./".$s_data[file_name1]."_l.thumb");
$del_que1=",file_name1='',s_file_name1=''";
}
if($del_file2==1) {
@z_unlink("./".$s_data[file_name2]);
@z_unlink("./".$s_data[file_name2]."_s.thumb");
@z_unlink("./".$s_data[file_name2]."_m.thumb");
@z_unlink("./".$s_data[file_name2]."_l.thumb");
$del_que2=",file_name2='',s_file_name2=''";
}
-----------------------------------------------------------------
이제 수정은 다 끝났습니다. 직접하면 정말 간단한 건데 설명할려고 하니 상당히 길어지네요... 복잡해 보이구여. ^^;; 글을 삭제할때나 수정했을때의 제로보드 수정부분은 안하셔도 상관은 없습니다. 썸네일을 지워주고 싶으시면 직접 ftp 프로그램으로 접속하셔서 지워주셔도 되고 제로보드 관리자 모드의 첨부파일 정리를 하셔도 썸네일이 삭제됩니다. 그리고 나서 다시 해당 게시판의 목록보기를 하면 재생성 되구요.. 이를 응용하면 얼마든지 다양한 기능 구현이 가능합니다. 트래픽도 상당량 줄일수 있구요.. 아무래도 썸네일이 요즘 추세이다 보니 아직 사용해보지 않으신 분들을 위해 허접하게나마 팁을 올려봤네여..
-----------------------------------------------------------------
*추가팁+1*
사용하다 보니 이미지가 가끔 원하는 사이즈보다 한 1픽셀정도 작아져서 오른쪽끝이나 아래끝부분에 흰줄이 가끔 보일때도 있더군여.. 이럴땐 thumb.php 소스의 ImageCopyResized($dst_img, $src_img, 0, 0, $srcx, $srcy, $max_width, $max_height, $srcW, $srcH); 이부분을
ImageCopyResized($dst_img, $src_img, 0, 0, $srcx, $srcy, $max_width+1, $max_height+1, $srcW, $srcH);
이렇게 바꿔놓고 사용해 보세여~
출처 :: http://rubusy.com/bbs/view.php?id=pjboard&page=1&sn1=&divpage=1&sn=off&ss=on&sc=on&select_arrange=headnum&desc=asc&no=12
관련자료
댓글 0
등록된 댓글이 없습니다.
