댓글에 외부 이미지를 반응형으로 넣어보기
shadow
1
1,698
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 123건 1 페이지
번호 | 제목 | 글쓴이 | 날짜 | 뷰 | 추천 |
---|---|---|---|---|---|
123 | 이윰EGG | 2016.08.24 | 3,787 | 0 | |
122 | 절대섹쉬꽃미남 | 2016.08.12 | 3,058 | 1 | |
121 | 그림자밟기 | 2016.03.26 | 1,649 | 0 | |
120 | 그림자밟기 | 2016.03.26 | 1,503 | 1 | |
119 | l2zeo | 2016.01.27 | 1,715 | 0 | |
118 | 수퍼개미 | 2015.10.27 | 2,632 | 0 | |
117 | l2zeo | 2015.10.26 | 9,597 | 0 | |
116 | l2zeo | 2015.10.26 | 2,789 | 0 | |
115 | shadow | 2015.10.06 | 5,417 | 1 | |
열람 | shadow | 2015.09.21 | 1,699 | 0 | |
113 | shadow | 2015.09.20 | 1,758 | 1 | |
112 | l2zeo | 2015.09.18 | 6,934 | 0 | |
111 | shadow | 2015.09.17 | 1,287 | 1 | |
110 | shadow | 2015.09.17 | 2,305 | 0 | |
109 | shadow | 2015.08.17 | 3,367 | 1 | |
108 | shadow | 2015.07.30 | 3,069 | 1 | |
107 | 암스원 | 2015.07.20 | 3,808 | 1 | |
106 | 이윰넷 | 2015.07.08 | 3,847 | 1 | |
105 | 갓구운빵 | 2015.07.03 | 1,960 | 0 | |
104 | 암스원 | 2015.07.01 | 3,537 | 2 |
댓글목록
티보리님의 댓글
감사합니다.
축하합니다. 첫댓글 포인트 44포인트를 획득하였습니다.