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

페이지 정보

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

평점

  • 평점 : 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 이하라면 원본 크기대로 보여준다. 

추천인
  • 추천해 주세요
yadolee
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,332,814
레벨 100
경험치 1,488,440

Progress Bar 11.47%

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

댓글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 7622739 페이지

제목 글쓴이 날짜 조회 추천
그누•영카트  🏆 그누보드 5.3.1.4 패치 루루아빠 2018.06.06 2,354 0
jQuery  🏆 모바일 및 태블릿에서 스크롤이 아닌 경우에만 터치 제어하기 shadow2fox 2018.08.13 2,349 0
이윰  🏆 유튜브 재생목록(플레이리스트)이 적용되지 않는다면 shadow2fox 2018.07.29 2,345 0
그누•영카트  댓글+1🏆 그누보드 5.4.1.9 shadow2fox 2020.02.08 2,344 1
이윰  🏆 마우스 오버시 이전글 다음글에 제목을 띄우기 shadow2fox 2018.11.27 2,339 0
그누•영카트  🏆 영카트 5.3.3.1 shadow2fox 2019.07.16 2,336 0
이윰  댓글+1🏆 카카오TV 올바르게 적용하기 shadow2fox 2020.01.29 2,327 1
이윰  🏆 jQuery-1.8.3를 jQuery-1.9.x 이상으로 업그레이드시 masonry 오류 해결하기 shadow2fox 2018.08.22 2,322 0
이윰  댓글+1🏆 팝업창 페이지에서도 띄우기 shadow2fox 2019.02.05 2,321 1
그누•영카트  🏆 그누보드 5.3.1.7 패치 shadow2fox 2018.09.18 2,321 0
이윰  댓글+2🏆 EXIF 정보 이미지 넓이에 맞게 조정하기 shadow2fox 2020.11.21 2,313 2
그누•영카트  🏆 영카트 5.3.2.3 shadow2fox 2018.12.29 2,311 0
그누•영카트  댓글+1🏆 그누보드 5.4.2.5 shadow2fox 2020.05.09 2,310 1
그누•영카트  댓글+1🏆 그누보드 5.4.4.8 shadow2fox 2021.01.19 2,308 1
그누•영카트  🏆 영카트 5.3.1.6 패치 shadow2fox 2018.08.25 2,306 0
jQuery  🏆 마우스 클릭 및 엔터를 일정 초 이상 유지하면 특정 url로 이동하기 shadow2fox 2018.07.11 2,304 0
그누•영카트  🏆 영카트 5.3.2.4 shadow2fox 2019.01.08 2,296 0
CSS  🏆 특정 아이디나 클래스 이후에 특정 아이디나 클래스가 있을 때 shadow2fox 2018.08.15 2,293 0
그누•영카트  🏆 그누보드 5.3.1.6 패치 shadow2fox 2018.08.25 2,291 0
이윰  댓글+5🏆 유튜브 "이 동영상은 볼 수 없습니다" 해결하기 shadow2fox 2023.02.20 2,287 3