스마트에디터 가로폭이 작은 사진이미지 넣을때 뷰페이지에서 원본가로폭으로 보이고 싶습니다.

스마트에디터 가로폭이 작은 사진이미지 넣을때 뷰페이지에서 원본가로폭으로 보이고 싶습니다.

QA

스마트에디터 가로폭이 작은 사진이미지 넣을때 뷰페이지에서 원본가로폭으로 보이고 싶습니다.

본문

스마트에디터를 통해 가로폭 500px 이미지를 등록했는데

뷰페이지에서는 815px로 출력이 됩니다.

<img src="http...(생략)...08_4761.png" alt="499.....(생략)...08_4761.png" width="815">

width 815가 자동으로 따라 붙네요.

 

수정페이지 들어가서 에디터를 html 로 소스를 보게되면

<img src="http...(생략)...08_4761.png" title="499...(생략)...08_4761.png">

으로 보여지고 있습니다. 이때는 원본사이즈로 보여집니다.

 

게시판 관리자설정에서 이미지 가로 폭을 815px로 설정해두긴 했습니다.

가로폭이 큰파일들은 최대 815px에 맞추어 지고

가로폭이 815px 보다 안큰 이미지들은 원본 가로폭으로 나오게끔 하고싶습니다.

 

이미지 첨부 시에는 815px 보다 않큰 이미지들은 본인 사이즈대로 나오고 있습니다.

 

뷰페이지에서 스마트에디터를 통해 이미지 업로드시 가로폭 설정보다 작은 파일들은 원본사이즈로 보이고 싶은데 해결법이 따로 있을지 해서 문의 남깁니다.

뷰페이지 출력 소스


<div id="bo_v_con">
            <?php echo get_view_thumbnail($view['content']); ?>
        </div>

아래는 lib/thumbnail.lib.php 파일에 있는 저 위 소스이며, 수정한 적 없는 소스입니다.


// 게시글보기 썸네일 생성
function get_view_thumbnail($contents, $thumb_width=0)
{
    global $board, $config;
    if (!$thumb_width)
        $thumb_width = $board['bo_image_width'];
    // $contents 중 img 태그 추출
    $matches = get_editor_image($contents, true);
    if(empty($matches))
        return $contents;
    for($i=0; $i<count($matches[1]); $i++) {
        $img = $matches[1][$i];
        preg_match("/src=[\'\"]?([^>\'\"]+[^>\'\"]+)/i", $img, $m);
        $src = $m[1];
        preg_match("/style=[\"\']?([^\"\'>]+)/i", $img, $m);
        $style = $m[1];
        preg_match("/width:\s*(\d+)px/", $style, $m);
        $width = $m[1];
        preg_match("/height:\s*(\d+)px/", $style, $m);
        $height = $m[1];
        preg_match("/alt=[\"\']?([^\"\']*)[\"\']?/", $img, $m);
        $alt = get_text($m[1]);
        // 이미지 path 구함
        $p = parse_url($src);
        if(strpos($p['path'], '/'.G5_DATA_DIR.'/') != 0)
            $data_path = preg_replace('/^\/.*\/'.G5_DATA_DIR.'/', '/'.G5_DATA_DIR, $p['path']);
        else
            $data_path = $p['path'];
        $srcfile = G5_PATH.$data_path;
        if(is_file($srcfile)) {
            $size = @getimagesize($srcfile);
            if(empty($size))
                continue;
            // jpg 이면 exif 체크
            if($size[2] == 2 && function_exists('exif_read_data')) {
                $degree = 0;
                $exif = @exif_read_data($srcfile);
                if(!empty($exif['Orientation'])) {
                    switch($exif['Orientation']) {
                        case 8:
                            $degree = 90;
                            break;
                        case 3:
                            $degree = 180;
                            break;
                        case 6:
                            $degree = -90;
                            break;
                    }
                    // 세로사진의 경우 가로, 세로 값 바꿈
                    if($degree == 90 || $degree == -90) {
                        $tmp = $size;
                        $size[0] = $tmp[1];
                        $size[1] = $tmp[0];
                    }
                }
            }
            // 원본 width가 thumb_width보다 작다면
            if($size[0] <= $thumb_width)
                continue;
            // Animated GIF 체크
            $is_animated = false;
            if($size[2] == 1) {
                $is_animated = is_animated_gif($srcfile);
            }
            // 썸네일 높이
            $thumb_height = round(($thumb_width * $size[1]) / $size[0]);
            $filename = basename($srcfile);
            $filepath = dirname($srcfile);
            // 썸네일 생성
            if(!$is_animated)
                $thumb_file = thumbnail($filename, $filepath, $filepath, $thumb_width, $thumb_height, false);
            else
                $thumb_file = $filename;
            if(!$thumb_file)
                continue;
            if ($width) {
                $thumb_tag = '<img src="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" width="'.$width.'" height="'.$height.'"/>';
            } else {
                $thumb_tag = '<img src="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'"/>';
            }
            // $img_tag에 editor 경로가 있으면 원본보기 링크 추가
            $img_tag = $matches[0][$i];
            if(strpos($img_tag, G5_DATA_DIR.'/'.G5_EDITOR_DIR) && preg_match("/\.({$config['cf_image_extension']})$/i", $filename)) {
                $imgurl = str_replace(G5_URL, "", $src);
                $thumb_tag = '<a href="'.G5_BBS_URL.'/view_image.php?fn='.urlencode($imgurl).'" target="_blank" class="view_image">'.$thumb_tag.'</a>';
            }
            $contents = str_replace($img_tag, $thumb_tag, $contents);
        }
    }
    return $contents;
}

이 질문에 댓글 쓰기 :

답변 1

view.skin.php 가장 하단에

 


<script>
bcvi = bo_v_con.getElementsByTagName("img");
for (i = 0; i < bcvi.length; i++) if (bcvi[i].naturalWidth < 815) bcvi[i].style.width = bcvi[i].naturalWidth + "px";
</script>

 

815 대신 <?php echo $board['bo_image_width']; ?> 를 넣는 것이 더 일반적이겠네요.

답변을 작성하시기 전에 로그인 해주세요.
전체 762
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT