댓글에 외부 이미지를 반응형으로 넣어보기
shadow
1
1,703
2015.09.21 11:35
짧은주소
- - 짧은주소: http://v2.eyoom.net/bbs/?t=1qW 주소복사
본문
"I2zeo"님의 "댓글에 외부 이미지를 넣어보기"에 사용자가 정의한 크기 이하로만 적용되도록 하고 사용자가 정한 크기보다 작은 이미지는 원 크기대로 보여지도록 하는 법을 올려보도록 하겠습니다.
1. 그누보드5/eyoom/core/board/view_comment.skin.php 을 열어 $content = $list[$i]['content']; 을 찾아 바로 아래 소스를 수정합니다.
수정 전
$comment[$i]['comment'] = preg_replace("/\[\<a\s.*href\=\"(http|https|ftp|mms)\:\/\/([^[:space:]]+)\.(mp3|wma|wmv|asf|asx|mpg|mpeg)\".*\<\/a\>\]/i", "<script>doc_write(obj_movie('$1://$2.$3'));</script>", $content);수정 후
$comment[$i]['comment'] = preg_replace("/\[\<a\s.*href\=\"(http|https|ftp|mms)\:\/\/([^[:space:]]+)\.(mp3|wma|wmv|asf|asx|mpg|mpeg)\".*\<\/a\>\]/i", "<script>doc_write(obj_movie('$1://$2.$3'));</script>", $content); $comment[$i]['comment'] = preg_replace("/\{\<a\s.*href\=\"(http|https|ftp)\:\/\/([^[:space:]]+)\.(gif|png|jpg|jpeg|bmp)\".*\<\/a\>\}/i", "<img id='comment-img' src='$1://$2.$3'>", $content);2. 스타일 지정은 그누보드5/eyoom/theme/설치된 테마/css/custom.css 를 열어 아래 소스를 추가합니다.
/* 코멘트 이미지 반응형 */ @media (min-width:769px) { #comment-img { position: relative; overflow: hidden; max-width: 300px; height: auto; padding: 3px 0 0 0; } } @media (max-width:768px) { #comment-img { position: relative; overflow: hidden; max-width: 100%; height: auto; padding: 3px 0 0 0; } }
사용 방법은 댓글 입력창에 {외부이미지 주소} 형식으로 입력하면 됩니다.
외부에서 가져오는 이미지는 디바이스에 가로폭에 따라 다음과 같이 적용됩니다.
(아래 설명은 css에 정의된 max-width:300px; 의 값 300px 일때)
- 디바이스 해상도의 가로 넓이가 769px 이상이면 가로폭 300px이 넘더라도 300px로 표현하고 가로폭이 300px 이하라면 원본 크기대로 보여줍니다.
- 디바이스 해상도의 가로 넓이가 768px 이하이면 가로폭 300px이 넘는 이미지는 디바이스의 가로폭에 맞춰 100%로 표현되고 가로폭이 300px 이하라면 원본 크기대로 보여줍니다.
0
좋아요!
레벨 17
경험치 28,938
Progress Bar 52%
- 가입일 : 2015-02-26 22:28:15
- 서명 :
- 자기소개 :
댓글목록
티보리님의 댓글
감사합니다.
축하합니다. 첫댓글 포인트 44포인트를 획득하였습니다.