댓글에 외부 이미지를 반응형으로 넣어보기
shadow
1
1,635
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
좋아요!
7
레벨 17
경험치 28,938
Progress Bar 52%
- 가입일 : 2015-02-26 22:28:15
- 서명 :
- 자기소개 :
Total 26건 1 페이지
번호 | 제목 | 글쓴이 | 날짜 | 뷰 | 추천 |
---|---|---|---|---|---|
26 | shadow | 2015.10.06 | 5,339 | 1 | |
열람 | shadow | 2015.09.21 | 1,636 | 0 | |
24 | shadow | 2015.09.20 | 1,688 | 1 | |
23 | shadow | 2015.09.17 | 1,238 | 1 | |
22 | shadow | 2015.09.17 | 1,995 | 0 | |
21 | shadow | 2015.08.17 | 3,278 | 1 | |
20 | shadow | 2015.07.30 | 2,951 | 1 | |
19 | shadow | 2015.06.24 | 2,301 | 0 | |
18 | shadow | 2015.06.18 | 2,225 | 0 | |
17 | shadow | 2015.06.18 | 1,913 | 0 | |
16 | shadow | 2015.06.05 | 1,630 | 0 | |
15 | shadow | 2015.06.03 | 7,975 | 0 | |
14 | shadow | 2015.06.01 | 1,360 | 1 | |
13 | shadow | 2015.06.01 | 2,274 | 0 | |
12 | shadow | 2015.05.31 | 4,908 | 0 | |
11 | shadow | 2015.05.25 | 1,704 | 0 | |
10 | shadow | 2015.05.20 | 1,654 | 1 | |
9 | shadow | 2015.05.06 | 3,967 | 0 | |
8 | shadow | 2015.04.28 | 3,168 | 1 | |
7 | shadow | 2015.04.24 | 2,530 | 3 |
댓글목록
티보리님의 댓글
감사합니다.
축하합니다. 첫댓글 포인트 44포인트를 획득하였습니다.