[이윰] 댓글(코멘트)에 외부 이미지를 넣어보기

페이지 정보

루루아빠 3,063 1 2015.09.14 05:36

평점

  • 평점 : 0점 (0명 참여)

본문

그누보드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 class='comment-img' src='$1://$2.$3'>", $content);  // 루루아빠 수정 - 코멘트 외부이미지 출력
스타일 지정은 그누보드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;
    }
}

사용 방법은 댓글 입력창에 {외부이미지 주소} 형식으로 입력하면 된다.
외부에서 가져오는 이미지는 디바이스에 가로폭에 따라 다음과 같이 적용된다.
  • 디바이스 해상도의 가로 넓이가 769px 이상이면 가로폭 300px이 넘더라도 300px로 표현하고 가로폭이 300px 이하라면 원본 크기대로 보여준다.
  • 디바이스 해상도의 가로 넓이가 768px 이하이면 가로폭 300px이 넘는 이미지는 디바이스의 가로폭에 맞춰 100%로 표현되고 가로폭이 300px 이하라면 원본 크기대로 보여준다. 

추천인
  • 추천해 주세요
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,294,838
레벨 97
경험치 1,398,514

Progress Bar 6%

- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑 루루아빠랍니다~~

댓글1

루루아빠님의 댓글

루루아빠 글쓴이 2015.10.18 15:18
댓글 업로드 이미지의 크기 조정을 편하게 작업하기 위해 다음과 같이 수정한다. 1. 각 스킨/view_comment.skin.html을 열어
을 검색 다음과 같이 수정한다. 수정 후

2. comment-upload-img 클래스 값을 정의하기위해 그누보드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;
    }
    .comment-upload-img {
        position: relative;
        overflow: hidden;
        max-width: 600px;
		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;
    }
    .comment-upoad-img {
        position: relative;
        overflow: hidden;
        max-width: 100%;
		height: auto;
		padding: 3px 0 0 0;
    }
}
Total 242313 페이지
제목 글쓴이 날짜 조회 추천
이윰  댓글+1🏆 최신글 랜덤으로 뽑기 루루아빠 2015.06.29 3,174 0
이윰  🏆 이윰빌더1.1.2 패치후 사이드바 레이아웃 관련 추가 패치 루루아빠 2015.06.01 3,163 0
이윰  🏆 모바일에서는 링크 이동시 로딩중 이미지 띄우기 루루아빠 2015.06.17 3,155 1
이윰  댓글+1🏆 게시판 댓글 이미지 크기 제한과 모바일은 제외 루루아빠 2015.05.16 3,149 0
이윰  🏆 익스 및 엣지 브라우저에서 모달(modal)창에 스크롤바가 하나 더 생기는 문제 루루아빠 2016.06.06 3,147 0
이윰  🏆 갤러리 목록에서 현재 보고있는 게시물에 "열랄중" 표시하기 루루아빠 2015.06.20 3,141 0
이윰  🏆 Eyoom Builder 1.1.9 - 그누보드 5.1.0 테마버전 지원 루루아빠 2015.08.05 3,135 0
이윰  🏆 이윰 메뉴 설정시 사용중인 출력순서 에러 해결하기 루루아빠 2015.05.12 3,135 1
이윰  🏆 📸 여분필드를 활용한 간단한 게시판 입력 서식 만들기 루루아빠 2016.05.13 3,124 0
이윰  댓글+1🏆 1.1.2 패치후 카테고리 분류 게시판 분류 선택시 미등록페이지로 나오는 문제점 루루아빠 2015.06.04 3,118 0
이윰  🏆 인기검색어 노출수, 기간 설정하기 루루아빠 2017.09.03 3,116 1
이윰  🏆 갤러리 게시판 혹은 웹진형 게시판 목록에서 본문 내용 글자수 루루아빠 2015.06.15 3,105 0
이윰  🏆 📸 인터넷익스플로어에서 회원가입 폼 '정보공개' 체크 안되는 점 수정 루루아빠 2015.05.29 3,080 0
이윰  🏆 connect_basic 스킨 모바일에서 스크롤 문제 루루아빠 2015.06.01 3,070 0
이윰  🏆 Eyoom Builder 1.1.2 패치 루루아빠 2015.06.01 3,068 0
이윰  댓글+1🏆 🚩 댓글(코멘트)에 외부 이미지를 넣어보기 루루아빠 2015.09.14 3,064 0
이윰  댓글+1🏆 Responsive Video와 게시글 정보와의 간격 조정 루루아빠 2015.05.27 3,051 0
이윰  🏆 Eyoom Builder 1.1.15 패치 루루아빠 2015.11.09 3,050 0
이윰  🏆 이윰빌더 1.1.2 패치 내용에 레벨 관련 추가 패치 루루아빠 2015.06.01 3,043 0
이윰  🏆 특정 게시판 첨부 이미지와 본문 가운데 정렬 루루아빠 2015.06.16 3,033 0