게시판 본문에 이미지태그를 넣을때 width, height 임의로 바꾼게 적용이 안되는 이유 아시나요?
본문
안녕하세요.
게시판 본문이나 내용관리에 이미지 태그를 올릴때 width, height 사이즈를 원본 사이즈가 아닌 제 임의대로 조금 찌그러트려서 변경해서 올리려고 하는데,
이미지가 width, height 변경한대로 보여지지 않고 오로지 width에만 맞춰서 이미지 원본 비율로만 보여집니다.
계정내 일반 페이지에서는 변경한대로 보여지는데, 게시판과 내용관리에서만 이러더군요.
그러니까 예를 들어서
width="200" height="100" 인 이미지를 제가 사정에 의해서 좀 찌그러지더라도
width="200" height="150"으로 올리고 싶은데,
미리보기에서는 제가 변경한 사이즈로 보여지는듯하더니,
결국 본문에는 원본 사이즈인 width="200" height="100"으로 보여집니다.
가로, 세로 비율을 동일하게 줄이거나(width="100" height="50") 늘리면(width="400" height="200") 변경한 크기의 이미지로 보여지는데,
가로, 세로 비율을 제가 찌그러트려서 마음대로 변경하려고 하면 적용이 안되네요.
이거 왜 이러는건가요?
그리고 제가 원하는대로 보여지게 할 방법이 없을까요?
답변 3
일단, 게시판의 뷰페이지(본문)의 경우에는 첨부파일일때는 아래처럼 $view['content'] 값, 즉 게시판 설정의 본문너비값을 받아와서 그걸 get_view_thumbnail() 넣어 돌리는 것이고요.
<div id="bo_v_con"><?php echo get_view_thumbnail($view['content']); ?></div>
게시판의 style.css 파일을 보시면 아래와 같이 본문에 입력한 내용이 출력되는 <div id="bo_v_con"> 영역의 img 들은 반응형 처리가 되도록 되어 있습니다.
#bo_v_con img {max-width:100%;height:auto}
따로 이미지 태그를 작성해서 글을 올리실때 <img src="xxx" width="xxx" height="xxx"> 와 같이 width값과 height 값을 부여해주면 그것의 우선순위가 css보다 높아서 일반적으론 이미지태그에 속성으로 입력하신 값이 적용되는 것이 정상입니다.
다만, 기본 그누보드 스타일에서 변경하신 부분들중에 img 태그들에 대한 !important 설정이 되어 있다면 이를 무시하고 !important 값이 적용된것이 우선하겠지요.
흉내쟁이님 친절하신 답변 감사합니다.
지금 제가 그누보드 5.2버전, 5.3버전 모두 테스트중인데,
소스 수정한거 하나도 없는 상태의 기본 보드 게시판에
예를들어
원본 <img src="test.gif" width="100" height="50"> 인 이미지를
<img src="test.gif" width="100" height="100">으로 변경해서 넣어도
게시판 본문에는 width="100" height="50"인 이미지가 보여집니다.
말씀해 주신 부분
#bo_v_con img {max-width:100%;height:auto}
를 삭제해봐도 동일하고요.
혹시 게시판내 style.css나 css/default.css에 답이 있을까 해서
이 두 css안의 내용을 다 삭제한 후 찾아 볼려고 하였지만, css내용 다 지워도
게시판안의 이미지는 width="100" height="50"을 유지하고 있네요.
방금 head.sub.php 파일안의 소스 이것 저것 삭제해 보니
<script src="<?php echo G5_JS_URL ?>/jquery-1.8.3.min.js"></script>
를 삭제하니 이미지 태그가 제가 올린 사이즈로 나오네요.
이 파일 함부로 수정하면 문제 생길까봐 일단 그냥둔 상태입니다.
jquery가 이미지를 변경하진 않고요.
jquery를 이용하는 플러그인들에서 이미지를 변경시킬순 있겠죠.
jquery를 삭제하셨을때 이미지를 변경하는 플러그인이 jquery가 필요하기에 작동하지 못했겠지요.
오류를 잡는 가장 간단한 방법은 테스트페이지를 링크해주시는 겁니다.
다시 한번 답변 감사합니다.
테스트페이지가 굳이 필요 없는게,
지금 그누보드 5.3버전, 5.2버전 모두가 기본적으로 이렇습니다.
기본 설치하고 아무것도 손대지 않은 상태에서 달랑 게시판만 생성해서,
그 게시판에 이미지 태그로 이미지 넣으면 제가 말한 증상이 나옵니다.
혹시 몰라 테스트 페이지 아래 첨부했습니다.
sir에서 제공되는 5.3버전 사용자 데모 페이지입니다.
http://demo.sir.kr/gnuboard5/bbs/board.php?bo_table=free&wr_id=1539
제가 저 게시판에 이미지 사이즈 width="200" height="200" 깨져 보이게 했지만,
보여지는건 width="200"에 맞춰서 비율이 맞게 이미지가 보여집니다.
view.skin.php 파일의 하단에 보시면 #bo_v_atc 영역에 해당하는 모든 이미지를 리사이징하고 있네요. 이말은 썸네일이 만들어지지 않는(첨부파일이 아닌) 이미지들도 모두 해당하게 되어 있다는 뜻이네요.
// 이미지 리사이즈
$("#bo_v_atc").viewimageresize();
viewimageresize()는 view.skin.php 상단에서 불러옵니다.
<script src="<?php echo G5_JS_URL; ?>/viewimageresize.js"></script>
viewimageresize.js 파일을 보시면 셀렉터로 지정된 여기선 #bo_v_atc 영역의 모든 img들을 찾아서 height 속성을 없애버리고 CSS로 정의된 height 값까지 공백으로 초기화시켜버립니다. 그리고 #bo_v_atc 의 너비값을 기준으로 이미지를 리사이징시키고 있습니다.
아마도 그누보드 개발자분은 이미지가 뷰페이지의 콘텐츠가 나올영역을 넘칠때를 대비해서 작성하신 코드겠지요.
직접올리는 img 태그들만을 제외하려면 애초에 get_view_thumbnail($view['content']) 가 실행될때
get_view_thumbnail 이 재생성하는 이미지태그를 종류별로 나눠서 특정 클래스명을 지정하여 그것을 제외하는 방법,
혹은, 이미지 태그를 올리실때 특정 클래스명을 붙여서 올리시고 그걸 스타일단에서 높이,너비를 재설정하시는 방법.
혹은, viewimagesize 를 직접 수정하시면 될듯 싶습니다.
소중한 시간 할애해서 계속 댓글 주셔서 정말 감사합니다.
view.skin.php 내 해당 부분 삭제를 해봐도 이미지가 비율 유지하는거 보니 이게 간단한 건 아닌거 같네요.
새로 만드는 게시판과 최신글 때문에 지금 기능이 필요하긴 했는데,
애초에 이렇게 만든 이유가 있을 테니 그냥 그대로 사용해야겠습니다.
다시 한번 감사드립니다.
/lib/thumbnail.lib.php 파일 158줄에서
높이를 비율로 구하는 부분이 있습니다.
이 부분에 강제로 높이를 주시거나,
$thumb_height = 150;
이 함수에 높이값을 넘겨받아 처리하도록 수정해보세요. 80줄
function get_view_thumbnail($contents, $thumb_width=0, $thumb_height=0)
158줄
if($thumb_height>0) $thumb_height = $thumb_height;
else $thumb_height = round(($thumb_width * $size[1]) / $size[0]);
eyekiss님 친절하신 답변 감사합니다.
그런데 알려주신대로 설정을 해봐도 아무런 변화가 없네요.
147줄, 이 부분 주석해보세요.
// 원본 width가 thumb_width보다 작다면
//if($size[0] <= $thumb_width)
//continue;
eyekiss님 답변 감사합니다.
158줄 강제로 높이를 주면 이미지 태그는 아무런 변화 없고,
본문내 게시판 첨부한 이미지만 자동으로 줄어들어서 안되고,
알려주신 80줄, 158줄 두개 적용했을때 아무런 변화 없었고,
147줄도 추가해서 적용해봤는데 역시 아무런 변화가 없네요.
첨부파일이 아니라 이미지태그인데도 썸네일과 관련이 있는건가요?
제가 질문을 잘못 봤네요..
에디터 내에서의 문제군요..
그 부분은 잘 모르겠네요.. 죄송해요~^^;;
죄송하긴요. 시간내주셔서 감사합니다.
