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

페이지 정보

yadolee 루루아빠 3,619 1 2015.09.14 05:36:56

본문

그누보드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 이하라면 원본 크기대로 보여준다. 

추천인
  • 추천해 주세요

댓글1

루루아빠님의 댓글

yadolee
루루아빠 글쓴이 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 7691826 페이지

제목 글쓴이 날짜 조회 추천
그누•영카트  🏆 썸네일 화질 설정법 루루아빠 2015.04.11 3.5k 0
이윰  🏆 최신글 카테고리 추출 옵션 루루아빠 2016.02.25 2.9k 0
에디터  🏆 smarteditor2를 이용하여 이미지 업로드시 이미지 위에 타이틀 팝업창 없애기 루루아빠 2015.04.11 3.9k 0
서버  🏆 config.php 관련 nginx 403 에러 - 사용 권한 없음: 액세스가 거부되었습니다. 루루아빠 2016.02.25 4.0k 0
에디터  댓글+1🏆 smarteditor2 사진 첨부시 절대경로를 상대경로로 변경하기 루루아빠 2015.04.18 4.9k 0
이윰  🏆 이윰빌더 태그 입력시 작은 따옴표(apostrophe)가 포함되면 삭제 안되는 문제 루루아빠 2016.02.26 3.3k 0
이윰  댓글+2🏆 게시판 카테고리 탭 형식으로 만들기 루루아빠 2015.04.21 3.8k 0
이윰  🏆 부트스트랩(bootstrap)의 반응형 테이블(table-responsive) 사용시 모바일에서 나타나는 border 없애기 루루아빠 2016.03.04 4.1k 0
이윰  댓글+1🏆 무한스크롤을 사용하지 않는 일반 게시판을 타 경로에서 모달창으로 불러올 때 배경이미지가 본문에 나타나는 문제 해결 루루아빠 2016.03.05 4.1k 0
그누•영카트  🏆 그누보드 5.3.2.8 shadow2fox 2019.03.19 2.2k 0
그누•영카트  🏆 그누보드 5.1.14 패치 루루아빠 2016.03.08 3.1k 0
그누•영카트  🏆 영카트 5.3.2.8 shadow2fox 2019.03.19 2.7k 0
그누•영카트  🏆 영카트 5.1.14 패치 루루아빠 2016.03.08 2.9k 0
이윰  🏆 Eyoom Builder 3.0.9 패치 shadow2fox 2019.03.25 3.0k 0
CSS  🏆 div 클래스에 :last-child css 스타일 적용하기 루루아빠 2016.03.15 3.0k 0
그누•영카트  🏆 영카트 5.3.2.8.1 shadow2fox 2019.04.23 2.4k 0
그누•영카트  🏆 첨부 이미지 가운데로 정렬하기 루루아빠 2015.04.23 3.0k 0
jQuery  🏆 Theia Sticky Sidebar 사용시 모달(modal)이 사이드바 아래로 내려가는 문제 해결하기 루루아빠 2016.03.16 4.3k 0
이윰  🏆 일반 회원과 특정 레벨 회원을 나타내는 변수 루루아빠 2015.04.23 3.1k 0
에디터  🏆 smarteditor2 로 사진 첨부시 에디터 크기에 맞게 리사이즈 루루아빠 2015.04.23 3.8k 0
이윰  🏆 게시글 보기시 본문에 포함된 주석 감추기 shadow2fox 2019.05.01 2.3k 0
이윰  🏆 이윰 조건문 변수 모음 루루아빠 2015.04.23 3.1k 0
그누•영카트  🏆 그누보드 5.1.15 패치 루루아빠 2016.03.21 3.7k 0
그누•영카트  🏆 영카트 5.1.15 패치 루루아빠 2016.03.21 3.2k 0
이윰  🏆 내글반응 페이지 내 전체 선택 체크박스 올바르게 적용하기 shadow2fox 2019.05.06 2.6k 0
에디터  🏆 CKeditor4.x 에디터 상 엔터를 쉬프트+엔터 바꾸기 루루아빠 2015.04.24 3.8k 0
이윰  🏆 글 작성시 익명으로만 글 작성하게 하기 루루아빠 2016.03.29 3.2k 0
이윰  🏆 메인일때만 사이드 레이아웃을 없애기 루루아빠 2015.04.24 3.0k 0
이윰  🏆 Eyoom Builder 1.2.3 패치 루루아빠 2016.03.29 3.6k 0
에디터  🏆 CKeditor4.x 에 폰트 추가하기 루루아빠 2015.04.28 3.7k 0