댓글에 외부 이미지를 반응형으로 넣어보기
shadow
1
1,652
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건 2 페이지
번호 | 제목 | 글쓴이 | 날짜 | 뷰 | 추천 |
---|---|---|---|---|---|
103 | l2zeo | 2016.01.27 | 1,669 | 0 | |
102 | red123 | 2015.06.13 | 1,675 | 0 | |
101 | shadow | 2015.05.20 | 1,677 | 1 | |
100 | 나오키 | 2015.02.24 | 1,699 | 2 | |
99 | shadow | 2015.09.20 | 1,704 | 1 | |
98 | shadow | 2015.05.25 | 1,728 | 0 | |
97 | 티보리 | 2015.05.11 | 1,740 | 1 | |
96 | fm25 | 2015.04.03 | 1,745 | 0 | |
95 | fm25 | 2015.04.23 | 1,805 | 1 | |
94 | fm25 | 2015.04.22 | 1,806 | 0 | |
93 | fm25 | 2015.03.05 | 1,839 | 0 | |
92 | maxform | 2015.04.07 | 1,844 | 2 | |
91 | fm25 | 2015.05.31 | 1,847 | 0 | |
90 | 헤0헤헷 | 2015.05.28 | 1,852 | 0 | |
89 | fm25 | 2015.05.25 | 1,872 | 0 | |
88 | l2zeo | 2015.01.27 | 1,875 | 2 | |
87 | red123 | 2015.05.23 | 1,891 | 0 | |
86 | 페이지메이커 | 2015.02.17 | 1,903 | 0 | |
85 | 갓구운빵 | 2015.07.03 | 1,915 | 0 | |
84 | 크롱크롱 | 2015.03.07 | 1,923 | 3 |
댓글목록
티보리님의 댓글
감사합니다.
축하합니다. 첫댓글 포인트 44포인트를 획득하였습니다.