Loading the content...

팁 & 테크

  • Home
  • 스터디
  • 팁 & 테크

댓글에 외부 이미지를 반응형으로 넣어보기

1,704 2015.09.21 11:35

짧은주소

본문

"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 일때)

  1. 디바이스 해상도의 가로 넓이가 769px 이상이면 가로폭 300px이 넘더라도 300px로 표현하고 가로폭이 300px 이하라면 원본 크기대로 보여줍니다.
  2. 디바이스 해상도의 가로 넓이가 768px 이하이면 가로폭 300px이 넘는 이미지는 디바이스의 가로폭에 맞춰 100%로 표현되고 가로폭이 300px 이하라면 원본 크기대로 보여줍니다. 
0
좋아요!
- shadow 메일보내기 아이디로 검색 - 회원등급 : 줄기/Level 17 - 포인트 : 674,374
레벨 17
경험치 28,938

Progress Bar 52%

- 가입일 : 2015-02-26 22:28:15
- 서명 :
- 자기소개 :
댓글목록

티보리님의 댓글

감사합니다.

축하합니다. 첫댓글 포인트 44포인트를 획득하였습니다.

Total 123건 1 페이지
제목
이윰EGG 아이디로 검색 2016.08.24 3,794 0
절대섹쉬꽃미남 아이디로 검색 2016.08.12 3,064 1
그림자밟기 아이디로 검색 2016.03.26 1,656 0
그림자밟기 아이디로 검색 2016.03.26 1,508 1
l2zeo 아이디로 검색 2016.01.27 1,722 0
수퍼개미 아이디로 검색 2015.10.27 2,637 0
l2zeo 아이디로 검색 2015.10.26 9,605 0
l2zeo 아이디로 검색 2015.10.26 2,794 0
shadow 아이디로 검색 2015.10.06 5,423 1
shadow 아이디로 검색 2015.09.21 1,705 0
shadow 아이디로 검색 2015.09.20 1,763 1
l2zeo 아이디로 검색 2015.09.18 6,940 0
shadow 아이디로 검색 2015.09.17 1,295 1
shadow 아이디로 검색 2015.09.17 2,311 0
shadow 아이디로 검색 2015.08.17 3,372 1