회원 사진 기능 만들기 (리사이징+크롭 기능 추가) 정보
회원 사진 기능 만들기 (리사이징+크롭 기능 추가)본문
이미 fm25님이 같은 기능을 하는 소스를 올리셨는데, DB와 원본소스를 건드리지 않는 방향으로 해서 리사이징/크롭 기능도 추가해서 올립니다. 그누보드 썸네일 함수를 이용해도 되지만 그냥 만들어 버렸네요.
가로세로 제한 없이 jpg,gif,png 파일만 올리면 알아서 60*60 픽셀로 리사이징하는 소스입니다. 비율이 1:1이 아니라면 유저의 선택에 따라 어느 쪽을 자를지 선택할 수 있습니다. 자르기 싫으면 레터박스로 채울 수도 있습니다.
이 소스는 GD 라이브러리 2.0이 꼭 필요합니다.
1.
그누보드 5가 설치된 폴더에서 data/member 폴더를 찾아서, 거기에 profile_img 폴더를 추가하신 뒤 퍼미션을 707로 주세요. 회원 사진은 유저 아이디를 파일명으로 하여 여기에 저장됩니다.
2.
member 스킨의 register_form.skin.php에 다음 사항을 추가합니다. <form>~</form> 태그 사이에 적당한 곳에 끼워넣으세요. 아래 코드에는 핵심 태그만 기술했으니 자신이 사용하는 스킨에 맞게 가공하셔야 됩니다.
3.
member 스킨의 register_form_update.tail.skin.php에 다음 사항을 추가합니다.
4.
이러면 업로드 과정은 다 끝났습니다. 이미지를 불러올 때는 적절한 위치에,
라고 넣어주면 됩니다. 이미지를 등록 안한 사용자들을 위해서는 그누보드 img 폴더 안에 기본으로 보여질 이미지를 no_profile_image.jpg라는 이름으로 넣어주면 됩니다. (안그러면 이미지를 등록 안한 사용자들에게는 엑박 뜹니다)
게시판 글보기 화면이나 댓글에서 보여줄 때는 $member['mb_id'] 부분만 다음과 같이 변경해 주세요.
게시판 글보기 화면 - $view['mb_id']
게시판 댓글 리스트 화면 - $list[$i]['mb_id']
가로세로 제한 없이 jpg,gif,png 파일만 올리면 알아서 60*60 픽셀로 리사이징하는 소스입니다. 비율이 1:1이 아니라면 유저의 선택에 따라 어느 쪽을 자를지 선택할 수 있습니다. 자르기 싫으면 레터박스로 채울 수도 있습니다.
이 소스는 GD 라이브러리 2.0이 꼭 필요합니다.
1.
그누보드 5가 설치된 폴더에서 data/member 폴더를 찾아서, 거기에 profile_img 폴더를 추가하신 뒤 퍼미션을 707로 주세요. 회원 사진은 유저 아이디를 파일명으로 하여 여기에 저장됩니다.
2.
member 스킨의 register_form.skin.php에 다음 사항을 추가합니다. <form>~</form> 태그 사이에 적당한 곳에 끼워넣으세요. 아래 코드에는 핵심 태그만 기술했으니 자신이 사용하는 스킨에 맞게 가공하셔야 됩니다.
<input type="file" name="mb_profile_img" id="reg_mb_profile_img">
<?php
$file_check = file_exists(G5_DATA_PATH."/member/profile_img/".$member['mb_id'].".jpg");
if (!$file_check) { ?>
<div class="file-exists">
이미 프로필 이미지가 등록되어 있습니다. 새 이미지를 등록하면 이전 이미지를 덮어씁니다.<br>이전 이미지를 삭제만 하려면 아래 <strong>프로필 이미지 삭제</strong>에 체크하세요.<br>
<label class="image_del"><input type="checkbox" name="mb_profile_img_del" id="mb_profile_img_del" value="1"> 프로필 이미지 삭제</label>
</div>
<?php } ?>
<span class="help-block">프로필 이미지의 비율은 가로세로 1:1이고, 비율이 맞지 않을 경우에는 조정합니다.<br>
아래 메뉴에서 이미지를 어떻게 조정할 지 선택하세요.</span>
<label><input type="radio" name="mb_profile_img_crop" id="reg_mb_profile_img_crop1" value="1" checked>왼쪽이나 위쪽 기준으로 이미지 자름</label>
<label><input type="radio" name="mb_profile_img_crop" id="reg_mb_profile_img_crop2" value="2" checked>오른쪽이나 아래쪽 기준으로 이미지 자름</label>
<label><input type="radio" name="mb_profile_img_crop" id="reg_mb_profile_img_crop3" value="3" checked>중앙 기준으로 이미지 자름</label>
<label><input type="radio" name="mb_profile_img_crop" id="reg_mb_profile_img_crop4" value="4" checked>빈 부분에 레터박스 채워넣음</label>
3.
member 스킨의 register_form_update.tail.skin.php에 다음 사항을 추가합니다.
<?php
//----------------------------------------------------------
// 프로필 이미지 파일 업로드 시작
//----------------------------------------------------------
$mb_profile_img = '';
if (isset($_FILES['mb_profile_img']) && is_uploaded_file($_FILES['mb_profile_img']['tmp_name'])) {
$mb_profile_img_ext = array_pop(explode(".", strtolower($_FILES['mb_profile_img']['name'])));
if(@ereg($mb_profile_img_ext, "gif|jpg|jpeg|png")) {
// 아이콘 용량이 1 MB 이하만 업로드 가능 (용량을 조정하고 싶으면 아래 수치 조정)
if ($_FILES['mb_profile_img']['size'] <= (1 * 1024 * 1024)) {
$dest_path_raw = G5_DATA_PATH."/member/profile_img/".$mb_id."_raw.".$mb_profile_img_ext;
move_uploaded_file($_FILES['mb_profile_img']['tmp_name'], $dest_path_raw);
$dest_path = G5_DATA_PATH."/member/profile_img/".$mb_id.".jpg";
$size = getimagesize($dest_path_raw);
if ($size[2] == 1 || $size[2] == 2 || $size[2] == 3) { // 이미지 파일이 진짜인지 판별
if($size[0] < 60 || $size[1] < 60) { // 이미지 사이즈가 너무 작을 경우
$msg .= '이미지 크기가 너무 작습니다. 가로세로 60픽셀 이상의 이미지를 올려주세요.';
} else {
if(file_exists($dest_path)) { // 이미 파일이 있을 경우(즉 수정일 경우) 먼저 파일을 삭제
@unlink($dest_path);
}
// 이미지 불러와서 판 깔기(...)
if($size[2] == 2) {
$image_call = imagecreatefromjpeg($dest_path_raw);
} elseif($size[2] == 1) {
$image_call = imagecreatefromgif($dest_path_raw);
} elseif($size[2] == 3) {
$image_call = imagecreatefrompng($dest_path_raw);
}
// 업로드된 이미지 시작점 및 크기 설정 (크롭)
// 기본값들
$basic_img_w = 60;
$basic_img_h = 60;
$src_img_x = 0;
$src_img_y = 0;
$src_img_w = $size[0];
$src_img_h = $size[1];
$des_img_x = 0;
$des_img_y = 0;
$des_img_w = $basic_img_w;
$des_img_h = $basic_img_h;
if($size[0] > $size[1]) { // 가로가 길 경우
$src_img_w = $size[1];
switch($mb_profile_img_crop) {
case 1:
break;
case 2:
$src_img_x = $size[0] - $size[1];
break;
case 3:
$src_img_x = (int)(($size[0] - $size[1]) / 2);
break;
case 4:
$src_img_w = $size[0];
$des_img_h = (int)($basic_img_w * ($size[1] / $size[0]));
$des_img_y = (int)(($basic_img_h - $des_img_h) / 2);
break;
}
} elseif($size[0] < $size[1]) { // 세로가 길 경우
$src_img_h = $size[0];
switch($mb_profile_img_crop) {
case 1:
break;
case 2:
$src_img_y = $size[1] - $size[0];
break;
case 3:
$src_img_x = (int)(($size[1] - $size[0]) / 2);
break;
case 4:
$src_img_h = $size[1];
$des_img_w = (int)($basic_img_h * ($size[0] / $size[1]));
$des_img_x = (int)(($basic_img_w - $des_img_w) / 2);
break;
}
}
// 트루컬러 이미지 캔버스 준비
$image_canvas = imagecreatetruecolor($basic_img_w,$basic_img_h);
// 이미지 리사이즈
imagecopyresampled($image_canvas, $image_call, $des_img_x, $des_img_y, $src_img_x, $src_img_y, $des_img_w, $des_img_h, $src_img_w, $src_img_h);
// 이미지 저장
imagejpeg($image_canvas, $dest_path, 80);
// 메모리에서 작업내용 삭제
imagedestroy($image_call);
imagedestroy($image_canvas);
// 원본 이미지 삭제
@unlink($dest_path_raw);
}
} else { // gif,jpg,png 파일이 아니면 올라간 이미지를 삭제한다.
@unlink($dest_path_raw);
}
} else {
$msg .= '프로필 이미지를 1 MB 이하로 업로드 해주십시오.';
}
} else {
$msg .= $_FILES['$mb_profile_img']['name'].'은(는) 이미지 파일이 아닙니다.';
}
}
if($mb_profile_img_del == 1) { // 파일 삭제에 체크가 들어온 경우
$dest_path = G5_DATA_PATH."/member/profile_img/".$mb_id.".jpg";
@unlink($dest_path);
}
//----------------------------------------------------------
// 프로필 이미지 파일 업로드 끝
//----------------------------------------------------------
4.
이러면 업로드 과정은 다 끝났습니다. 이미지를 불러올 때는 적절한 위치에,
<?php
$mb_profile_img_path = G5_DATA_PATH."/member/profile_img/".$member['mb_id'].".jpg";
if(file_exists($mb_profile_img_path)) {
$mb_profile_img_url = G5_DATA_URL."/member/profile_img/".$member['mb_id'].".jpg";
} else { // 프로필 이미지가 없으면 기본 이미지를 보여준다.
$mb_profile_img_url = G5_IMG_URL."no_profile_image.jpg";
}
?>
<img src="<?php echo $mb_profile_img_url ?>">
라고 넣어주면 됩니다. 이미지를 등록 안한 사용자들을 위해서는 그누보드 img 폴더 안에 기본으로 보여질 이미지를 no_profile_image.jpg라는 이름으로 넣어주면 됩니다. (안그러면 이미지를 등록 안한 사용자들에게는 엑박 뜹니다)
게시판 글보기 화면이나 댓글에서 보여줄 때는 $member['mb_id'] 부분만 다음과 같이 변경해 주세요.
게시판 글보기 화면 - $view['mb_id']
게시판 댓글 리스트 화면 - $list[$i]['mb_id']
추천
5
5
댓글 16개
좋아요 +1
좋은 자료 감사합니다.
board_file를 사용하여 쓰고 있는데 이 방법으로 해 봐야 겠네요.^^
board_file를 사용하여 쓰고 있는데 이 방법으로 해 봐야 겠네요.^^
멋지네요. 한번 적용해봐야겠습니다~^^
멋집니다 !
적용을 해보고 있는데
member 스킨의 register_form_update.tail.skin.php 이 부분에서
register_form_update.tail.skin.php파일이 존재하지 않네요.
한번 확인 부탁드리겠습니다.
member 스킨의 register_form_update.tail.skin.php 이 부분에서
register_form_update.tail.skin.php파일이 존재하지 않네요.
한번 확인 부탁드리겠습니다.
없을 경우 그냥 파일을 만드시면 됩니다. register_form_update.php 파일의 소스를 보면 이 파일을 인클루드 하게 되어 있습니다. 주 용도는 스킨이라기보다는 회원 가입시의 기능 확장 용도로 들어 있는 거고, basic 스킨에는 기능 확장을 할 이유가 없기에 빠져 있습니다.
참고로 영카트 5의 basic 스킨에는 이 파일이 있고, SMS 관련 코드가 들어가 있습니다.
참고로 영카트 5의 basic 스킨에는 이 파일이 있고, SMS 관련 코드가 들어가 있습니다.
아 감사합니다.
말씀하신대로 파일을 만들어서 했더니 바로 표시가 되는군요.
감사히 쓰겠습니다!!
말씀하신대로 파일을 만들어서 했더니 바로 표시가 되는군요.
감사히 쓰겠습니다!!
오 적용해봐야겠네요 :D!
감사합니다
초보라서 그러는데요..
4번 코드는 어느 파일에 붙여넣어야 되는지요?
4번 코드는 어느 파일에 붙여넣어야 되는지요?
감사해요
고맙습니다~
감사합니다.
푸드리뷰에 적용
관리자는 프로필 이미지를 어떻게 업로드하나요 ?
좋은팁이네요 덕분에 작업하는데 도움이 많이 되었습니다 감사드려요