댓글에 외부 이미지를 반응형으로 넣어보기
1,654
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
좋아요!
![](http://v2.eyoom.net/data/member/profile/shadow2fox.jpg)
7
레벨 17
경험치 28,938
Progress Bar 52%
- 가입일 : 2015-02-26 22:28:15
- 서명 :
- 자기소개 :
Total 123건 2 페이지
번호 | 제목 | 글쓴이 | 날짜 | 뷰 | 추천 |
---|---|---|---|---|---|
103 |
![]() ![]() |
2016.01.27 | 1,673 | 0 | |
102 |
![]() ![]() |
2015.06.13 | 1,677 | 0 | |
101 |
![]() ![]() |
2015.05.20 | 1,681 | 1 | |
100 |
![]() ![]() |
2015.02.24 | 1,701 | 2 | |
99 |
![]() ![]() |
2015.09.20 | 1,709 | 1 | |
98 |
![]() ![]() |
2015.05.25 | 1,731 | 0 | |
97 |
![]() |
2015.05.11 | 1,742 | 1 | |
96 |
![]() ![]() |
2015.04.03 | 1,750 | 0 | |
95 |
![]() ![]() |
2015.04.22 | 1,810 | 0 | |
94 |
![]() ![]() |
2015.04.23 | 1,810 | 1 | |
93 |
![]() ![]() |
2015.03.05 | 1,843 | 0 | |
92 |
![]() ![]() |
2015.05.31 | 1,848 | 0 | |
91 |
![]() |
2015.04.07 | 1,855 | 2 | |
90 |
![]() |
2015.05.28 | 1,858 | 0 | |
89 |
![]() ![]() |
2015.05.25 | 1,879 | 0 | |
88 |
![]() ![]() |
2015.01.27 | 1,882 | 2 | |
87 |
![]() ![]() |
2015.05.23 | 1,892 | 0 | |
86 |
![]() |
2015.02.17 | 1,905 | 0 | |
85 |
![]() |
2015.07.03 | 1,919 | 0 | |
84 |
![]() ![]() |
2015.03.07 | 1,925 | 3 |
댓글목록
티보리님의 댓글
감사합니다.
축하합니다. 첫댓글 포인트 44포인트를 획득하였습니다.