• 북마크
  • 1:1문의
  • 새글
  • 회원가입
  • 로그인

팁 & 테크

  • Home
  • 스터디
  • 팁 & 테크

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

1,705 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
좋아요!
7
- shadow 메일보내기 아이디로 검색 - 회원등급 : 줄기/Level 17 - 포인트 : 674,374
레벨 17
경험치 28,938

Progress Bar 52%

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

티보리님의 댓글

감사합니다.

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

Total 123건 1 페이지
번호 제목 글쓴이 날짜 추천
123 이윰EGG 아이디로 검색 2016.08.24 3,795 0
122 절대섹쉬꽃미남 아이디로 검색 2016.08.12 3,065 1
121 그림자밟기 아이디로 검색 2016.03.26 1,657 0
120 그림자밟기 아이디로 검색 2016.03.26 1,508 1
119 l2zeo 아이디로 검색 2016.01.27 1,722 0
118 수퍼개미 아이디로 검색 2015.10.27 2,638 0
117 l2zeo 아이디로 검색 2015.10.26 9,605 0
116 l2zeo 아이디로 검색 2015.10.26 2,795 0
115 shadow 아이디로 검색 2015.10.06 5,424 1
열람 shadow 아이디로 검색 2015.09.21 1,706 0
113 shadow 아이디로 검색 2015.09.20 1,763 1
112 l2zeo 아이디로 검색 2015.09.18 6,942 0
111 shadow 아이디로 검색 2015.09.17 1,296 1
110 shadow 아이디로 검색 2015.09.17 2,311 0
109 shadow 아이디로 검색 2015.08.17 3,372 1
108 shadow 아이디로 검색 2015.07.30 3,075 1
107 암스원 아이디로 검색 2015.07.20 3,831 1
106 이윰넷 아이디로 검색 2015.07.08 3,878 1
105 갓구운빵 아이디로 검색 2015.07.03 1,966 0
104 암스원 아이디로 검색 2015.07.01 3,546 2
LOGIN
사이드 메뉴

최신글이 없습니다.

최신글이 없습니다.

출석 랭킹

오늘의 랭킹

회원사진

닉네임

개근왕

최다1위

shadow shadow
Ranking

    출력할 랭킹이 없습니다.

  • 01 shadow
    674,374
  • 02 신비
    335,419
  • 03 가을하늘
    204,735
  • 04 mame
    202,630
  • 05 이윰MOUNT
    199,181
  • 06 미스코리아
    163,939
  • 07 레오나르도
    147,576
  • 08 테크니션
    142,655
  • 09 이윰IN
    135,258
  • 10 비온뒤맑음
    127,882
  • 01 shadow
    28,938
  • 02 joosam
    23,606
  • 03 티보리
    21,954
  • 04 홍인
    18,644
  • 05 레오나르도
    18,088
  • 06 이윰IN
    17,983
  • 07 도깨비
    16,614
  • 08 이윰EGG
    16,105
  • 09 자이언트
    14,698
  • 10 미스트
    14,379