썸네일 저장시 이미지 가로 세로 비율
본문
'웹진형 기본형' 스킨을 다운받아 적용중인데요.
썸네일이 파일로 별도로 저장되는것 같은데, 가로로 긴 이미지가 저장되면 이미지가 비율적으로 줄어서 저장이 되는것이 아니라 이미지 가운데 부분이 관리자 갤러리 설정값(가로,세로) 크기로 저장되는것 같습니다.
썸네일을 가로 세로크기는 50px,45px 로 설정하였습니다.
위 네이버 로고를 등록하면 앞부분 설정된 가로 사이즈에 비례해서 전체화면이 출력되게 하고 싶은데 아래처럼 나옵니다.
이부분은 어디서 수정해야 하나요?
답변 4
그누보드 기본에는 '웹진형 기본형' 이런 스킨이 없는데,
현재 수정하시려는 게시판 스킨의 list.skin.php 파일 내용의 일부라도 보여주셔야 조언을 드릴 수 있을 것 같습니다.
http://sir.kr/g5_skin/10066?sfl=wr_subject%7C%7Cwr_content&stx=%EC%9B%B9%EC%A7%84%ED%98%95#c_11913
위 링크에서 다운로드한 스킨을 이용하는데요.
리스트 화면의 이미지를 보니까 전체이미지가 아니라 짤린이미지로 저장되어 불러오는것 같습니다.
http://www.gjppuriris.com/data/file/test/thumb-1025918018_Yk0AfWuG_naver_100x80.jpg
초보자의 짧은 의견으로는 글쓰기할때 이미 이미지는 비율적으로 축소하여 저장되는것이 아니라 짤려서 이미 저장되는것 같습니다.
일단은 이렇게 해보세요
list.skin.php 파일을 열어 get_list_thumbnail() 함수에 false 인자를 추가해 봅니다.
$thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], false, false);
이렇게 해도 마음에 안 들면 원본 파일을 불러오는 수 밖에 없습니다.
썸네일은 가로, 세로 의 설정 규격에 맞춰 생성되도록 되어 있기 때문에 가로든 세로든 원본 이미지 파일의 비율과 차이가 많이 나면 어느 한쪽이 짤릴 수 밖에 없습니다.
원본파일을 가져다가 이미지 가로, 세로 넓이에 맞게 축소시키기
//아래의 소스에서 $thumb['src'] 이 코드를 $thumb['ori'] 로 변경한다.
$img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'" class="list_img">';
//수정된 소스
$img_content = '<img src="'.$thumb['ori'].'" alt="'.$thumb['alt'].'" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'" class="list_img">';
원본이지를 불러오면 보이는 화면에서의 이미지는 작아 보여도 트래픽이 증가할 수 있고, 이미지 해상도가 매끄럽지 못할 수 있는 단점이 있습니다.
감사합니다. 알려주신데로 get_list_thumbnail() 함수에 false 인자를 추가하니 간단히 해결 되었습니다.
보여주는 부분의 div css 문제 같으넫,,
이미지를 뿌려주는 열이 따로 있다면 해당열의 너비를 일단 설정하시고요.
해당 열에 이미지들에 반응형처리 하시면 될것 같네요.
img {max-width:100% !important; height: auto !important}
해당 스킨에 list.skin.php 파일 보시면
$thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height']);
에 bo_gallery_width , bo_gallery_height 설정을 관리자에서 해주셔야 합니다.
아니면 이부분에 너비값 높이값을 넣어주세요
비례로 되게 하려면 리스트 부분에서 가로 세로 계산해서 해당 부분에 값을 넣어주셔야 할 것 같습니다.
