삽질끝~!! > 자유게시판

자유게시판

삽질끝~!! 정보

삽질끝~!!

본문

술은 적당히 & 섞어서 마시지 말아야 합니다.^^;
행복한 오후 되소서~!!
 
링크 설명 ↓
 
특징;
게시물별 전체 첨부파일에 대한 썸네일과 규격화된 파일을 각각 1개씩 생성하고 이를 바탕으로 `하드코딩 없이 사용자 설정`만으로 리스트 및 뷰페이지에서 이미지 제어가 가능하게 해보았습니다.
리스트나 뷰페이지에서 보여지는 썸네일의 갯수나 정렬,줄바꿈을 글작성 할때 설정가능하게 하였습니다.

게시물 작성;
다른 부분으로 `부가옵션` 에서 리스트와 게시물별로 보여줄 썸네일 갯수만 설정하면 됩니다.
write_update.skin.php에서 `정해진 폴더`에 규격화(관리설정 또는 여분필드 활용)된 크기의 파일을 생성 저장함
    - 원본 강제축소등 이 과정을 대체할 방법이 있으나 `특별한 용도가 있기에 이를 준비하는 차원`에서 이 과정을 넣어봅니다.

게시물 수정;
카테고리, 부가옵션등을 유지해주면서, 여러개 첨부파일 가운데 무작위(중간파일 삭제등)로 삭제 하더라도 리스트나 뷰 페이지에서 정상적으로 보여지게 코딩하였습니다.

리스트;
리스트된 레코드의 모든 첨부파일을 썸네일 생성하는 루틴이 들어있습니다.
    - 게시물당 리스트에 보여줄 썸네일 갯수는 글 작성시 게시물별로 설정한다,
    - 글 수정시 편집을 위한 첨부파일 리스트도 썸네일로 처리

뷰페이지;
게시물내 모든 첨부파일을 썸네일 생성하는 루틴이 들어있습니다.
뷰페이지 상단 레코드별 첨부파일의 썸네일 줄바꿈까지 게시물 작성단계에서 설정하게 하였습니다.
썸네일 클릭시 로드되는 타겟 이미지파일을 글 등록,수정시 write_update.skin.php에서 생성된 `규격파일`로 보여줍니다.
이 타겟 이미지 클릭시 팝업으로 원본이미지를 원본 사이즈 그대로 보여줍니다.

해야할일;
규격 설정 사이즈보다 `가로나 세로가 모두 작은 파일은 큰쪽이 규격설정 사이즈`로 늘어나는 버그가 있습니다.

기타 코드 최적화가 필요합니다.^^;
추천
0

댓글 11개

오우~~~ 멋집니다.
요즘 제가 내용보기에서 첨부한 이미지 썸네일 생성하는 문제로 골머리를 썩히고 있는데 링크의 게시판에서 적용하셨네요. 제가 한번 더삽질해 보고 안되면 살짝쿵 도움 요청으........ ^^*
바로 길건너 맞은편에 중고컴 유통점이 있더군요.
얼마전에 알았는데 신기한 물건들이 여기저기 널려있더랍니다.
구경하다가 g4 400을 테스트 삼아 들고왔는데 이게 먹통입니다.
잘 돌아가면 집에있는 new imac과 바꿀까 생각하고 목하 연구중인데 os 인스톨에서 바로 걸렸습니다.

까만도둑님 해당 부분 코드입니다.
지저분하다고 흉보지 마세요^^;

    <?
    /////////////////////////////////////////////////////////////////////////////////
    //뷰페이지에서 모든 첨부파일의 썸네일을 생성하고 설정한만큼 정렬해서 보여줌
    //썸네일을 클릭하면 타겟영역에 일정 규격으로 생성된 첨부 파일을 보여줌
    //규격파일을 클릭하면 첨부파일 원본 크기로 팝업해서 보여줌
    //이미지 콘트롤 스크립트는 `G3 송가`에서 응용한바 있는 김장군님 코드사용

    //썸네일은 view.skin.php와 list.skin.php에서 생성
    //규격파일은 write_update.php에서 생성

    # 아들녀셕 종이접기 사이트를 훔쳐 보다가 힌트를 얻음-2006년 11월 26일 일요일 Floc

    ?>

    <!-- img control -->
    <script type='text/javascript'>
    function chgImg( imgid, dnimgid, imgdesc ) {
        var content = /<br>/gi;
        document.galleryImg.src=imgid;
        document.Imgform.dnimg.value=dnimgid;
        document.descform.desc.value=imgdesc.replace( content, "\n" );
    }
    function newWin() {
        window.top.open( '<?=$board_skin_path?>/pop_img.php?galleryImg=' + document.Imgform.dnimg.value, 's_win', 'width=100 height=0 scrollbars resizable status');
    }
    </script><?
    //------------------------------------------------------------------------
    $data_path = $g4['path'] . "/data/file/" . $bo_table;
    $thumb_path = $data_path . '/thumb';
    $rs_path = $data_path . "/rs_file";

    if (!is_dir($thumb_path)) {
        @mkdir($thumb_path, 0707);
        @chmod($thumb_path, 0707);
    }

    ?><table>
    <tr>
    <td valign='top' align='center'>
       
        <table>
        <tr>
        <td valign='top' align='center'>
        <form name=Imgform><input type=hidden name=dnimg value='<?=$data_path."/".urlencode($view[file][0][file])?>'></form><?
            //규격파일출력
            if ($view[file][count] > 0) {
                $img = "<img  name='galleryImg' src=' " . $rs_path . "/" . urlencode($view[file][0][file]) . "' onclick='newWin();' style='cursor:pointer;'>";
                echo $img;
                //onclick='image_window(this);'//사이즈?
                //print_r2($view[file]);
            }

        ?></td>
        </tr>
        <tr>
        <td valign='top' align='center'>
        <!-- 설명출력 -->
        <form name="descform">
        <input name="desc" style="border:0px solid; width:<?=$board['bo_image_width']?>px; height:17px; background-color:silver" readonly value="<?=$view[file][0][content]?>">
        </form>
        </td>
        </tr>
        </table>
       
    </td>
    <td valign='top' align='center'>

        <table width=100% border="0" cellpadding=0 cellspacing=0 style="background:gray; border-color:black; border-collapse: collapse;" >
        <tr><?

        // step1 - 목록에 두개이상의 첨부파일을 보여주기 위해 모든 첨부파일 섬네일 생성
        // 삭제된 첨부파일 무시하고 나머지 파일만 썸네일 생성, 배열변수 처리
        //------------------------------------------------------------------------
        $rs_path = "";//초기화
        $f_arr = array();
        for($a=0, $f=0; $f < $view[file][count]; $f++){//첨부파일 전체

        //------------------------------
        $mod = $view['wr_2'];//줄바꿈 설정
        $td_width = (int)(100 / $mod);
       
        if ($a > 0 && $a % $mod == 0) :
            echo "</tr><tr>";
        endif;
        //------------------------------

        if ($view[file][$f][file]) {
            $f_arr[$a] = array( 'file' => $view[file][$f][file], 'path' => $view[file][$f][path], 'source' => $view[file][$f][source], 'datetime' => $view[file][$f][datetime], 'content' => $view[file][$f][content], 'width' => $view[file][$f][image_width] );
            $file = $view[file][$f][file];
            //$file = urlencode($f_arr[$a][file]);//공백있는 파일명 썸네일 생성문제 확인필요
            $f_name = urlencode($view[file][$f][file]);
            $f_path = $f_arr[$a][path];
            $f_file = $f_path . "/" . $f_name;//원본
            $rs_path = $f_path . "/rs_file";
            $rs_file = $rs_path . "/" . $f_name;//규격파일
            $t_path = $f_path . "/thumb";
            $t_file = $t_path . "/" . $f_name;//썸네일
            $f_content = $view[file][$f][content];
            $f_width = $view[file][$f][width];
            //print_r2($f_arr);
        //------------------------------------------------------------------------
            $dest_file = $data_path .'/'. $file;

            if (preg_match("/\.(jp[e]?g|gif|png)$/i", $file) && file_exists($dest_file)){

                $thumb = $thumb_path.'/' . $file;
               
                if (!file_exists($thumb)) {

                    $size = getimagesize($dest_file);
                    if ($size[2] == 1)
                        $src = imagecreatefromgif($dest_file);
                    else if ($size[2] == 2)
                        $src = imagecreatefromjpeg($dest_file);
                    else if ($size[2] == 3)
                        $src = imagecreatefrompng($dest_file);
                    else
                    break;

                    if ($size[0] >= $size[1]) {
                        //최대 사이즈 제한 방식
                        $rate = $board[bo_1] / $size[0];
                        $width = $board[bo_1];
                        $height = (int)($size[1] * $rate);
                    }
                    else {
                        $rate = $board[bo_1] / $size[1];
                        $width = (int)($size[0] * $rate);
                        $height = $board[bo_1];
                    }
                    $dst = imagecreatetruecolor($width, $height);
                    imagecopyresampled($dst, $src, 0, 0, 0, 0, $width, $height, $size[0], $size[1]);
                    imagepng($dst, $thumb, $board['bo_2']);
                    chmod($thumb, 0707);
                    /*
                    //가로기준 세로는 비율대로 반영
                    $rate = $board['bo_1'] / $size[0];
                    $height = (int)($size[1] * $rate);

                    $dst = imagecreatetruecolor($board['bo_1'], $height);
                    imagecopyresampled($dst, $src, 0, 0, 0, 0, $board['bo_1'], $height, $size[0], $size[1]);
                    imagepng($dst, $thumb, $board['bo_2']);
                    chmod($thumb, 0707);
                    */
                }
            }//if preg

            // step2 - 해당 파일 링크
            // 생성된 썸네일 하드코딩 없이 배열해보자??
            //------------------------------------------------------------------------
            if (file_exists($thumb)) :
                $timg = "<a href=#1 onClick=\"chgImg( '".$rs_file."','".$f_file."','".ereg_replace("(\r\n|\n|\r)", "&nbsp;&nbsp;", strip_tags($f_content) )."' );\" ><img src='" . $t_file . "' border='1'></a>";//"chgImg( '타겟이미지','팝업이미지','파일설명');"
                endif ;
                //image_window
                $iimg = "<script language='javascript' src='{$board_skin_path}/image_window.js'></script>";
                $iimg .= "<a href='javascript:;' OnClick=\"image_window('$f_file')\" onFocus='this.blur();'>";
                $iimg .= "ㅁ</a>";
                //lightbox
                $limg = "<a href='".$f_file."' rel='lightbox[$wr_id]' title='".$f_arr[$a][source]."/".$f_arr[$a]['datetime']."'>";
                $limg .= "ㅁ</a>";

            $a ++;

            //step3 - 썸네일 원하는 위치에 정렬
            //썸네일 원하는 만큼만 보여줘 ~~~!
            ?><td width='<?=$td_width?>%' valign='top' style='padding:20px 0 10px 0; border: 1px solid silver; word-break:break-all;'>
                <table width=100% border=0 cellspacing=0 cellpadding=0 style='border-collapse: collapse;'>
                <tr><?
                //-------------------------------------------
                if (sizeof($f_arr) <= 10) : //보여줄 썸네일 갯수 설정
                    ?><td width='100' align='center'><?=$timg?><br><?=$limg?><?=$iimg?></td><?
                    endif ;
                //-------------------------------------------
                ?></tr></table>
            </td><?

            }//if
        //------------------------------------------------------------------------ test
        //echo $f_arr[0][file] . "------" . $f_arr[1][file] . "------" . $f_arr[2][file] . "<p>";
        //print_r2($f_arr);
        //echo count($f_arr);

        }//for f_arr

        //------------------------------
        // 나머지 td
        $cnt = $a%$mod;
        if ($cnt)
            for ($a=$cnt; $a<$mod; $a++){
                ?><td width='<?=$td_width?>%' style='padding:20 0 5 0; border: 1px solid silver;'></td><?
            }
        //------------------------------

    ?>
        </tr>
        </table>

        </td>
    </tr>
    </table>


write_update.skin.php 규격파일 생성 및 재 설정
    - 가로,세로가 모두 규격보다 작을경우 큰쪽이 규격사이즈로 늘어나는 버그가 있습니다^^;

<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가

//특정 폴더에 규격설정 이미지 생성 테스트

$data_path = $g4['path'] . "/data/file/" . $bo_table;
$rs_path = $data_path . "/rs_file";

if (!is_dir($rs_path)) {
    @mkdir($rs_path, 0707);
    @chmod($rs_path, 0707);
}

$sql=" select * from " . $g4['board_file_table'] . " where  bo_table = '" . $bo_table . "' and wr_id = '" . $wr_id . "' order by bf_no asc";
$results = sql_query($sql);
for ($i=0; $row=sql_fetch_array($results); $i++) {

    $file = $row['bf_file'];

    $dest_file = $data_path ."/". $file;

    if (preg_match("/\.(jp[e]?g|gif|png)$/i", $file) && file_exists($dest_file)) {

        $rs_file = $rs_path . "/" . $file;
//--------------------------------------- 규격파일이 없다면
        $size = getimagesize($dest_file);
        if ($size[2] == 1)
            $src = imagecreatefromgif($dest_file);
        else if ($size[2] == 2)
            $src = imagecreatefromjpeg($dest_file);
        else if ($size[2] == 3)
            $src = imagecreatefrompng($dest_file);
        else
        break;

        if ($size[0] >= $size[1]) :
            //최대 사이즈 제한 방식
            $rate = $board['bo_image_width'] / $size[0];
            $width = $board['bo_image_width'];
            $height = (int)($size[1] * $rate);
        else :
            $rate = $board['bo_image_width'] / $size[1];
            $width = (int)($size[0] * $rate);
            $height = $board['bo_image_width'];
        endif;

        if (!file_exists($rs_file)) :
            $dst = imagecreatetruecolor($width, $height);
            imagecopyresampled($dst, $src, 0, 0, 0, 0, $width, $height, $size[0], $size[1]);
            imagepng($dst, $rs_file, $board['bo_2']);
            chmod($rs_file, 0707);
        endif;

//---------------------------------------- 규격 재설정
        $rs_size = getimagesize($rs_file);
        if ($rs_size[2] == 1)
            $src = imagecreatefromgif($rs_file);
        else if ($rs_size[2] == 2)
            $src = imagecreatefromjpeg($rs_file);
        else if ($rs_size[2] == 3)
            $src = imagecreatefrompng($rs_file);
        else
        break;

        if ($rs_size[0] >= $rs_size[1]) :
            //최대 사이즈 제한 방식
            $rate = $rs_size[0] / $rs_size[0];
            $width = $rs_size[0];
            $height = (int)($size[1] * $rate);
        else :
            $rate = $rs_size[1] / $rs_size[1];
            $width = (int)($rs_size[0] * $rate);
            $height = $rs_size[1];
        endif;

        if ($rs_size[0] != $board['bo_image_width']) ://규격에 맞나?                가로기준 그것도 일부만 안되는 까닭은 ????????????
            @unlink($rs_file);//규격에 맞지않다면 삭제
            $rs_dst = imagecreatetruecolor($width, $height);
            imagecopyresampled($rs_dst, $src, 0, 0, 0, 0, $width, $height, $rs_size[0], $rs_size[1]);
            //imagepng($rs_dst, $rs_file, $board['bo_2']);
            imagejpeg($rs_dst, $rs_file, $board['bo_2']);
            chmod($rs_file, 0707);
        endif;
    }
}
//-------------------------------------------------- 끝
pop_img.php 전체내용

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>그림을 클릭하면 창이 닫힙니다!</title>
<meta http-equiv="imagetoolbar" content="no">
<script language="javascript" type="text/javascript">

var Init = 0;
var H;
var W;
var tmpH;
var tmpW;
var Opacity = 100;
var GrayScale = 0;
var FH = 0;
var FV = 0;
var Inverse = 0;
var Command;

function resizeWnd()
{
 W = document.imgObj.width;
 H = document.imgObj.height;
  self.resizeTo(W,H+50);
}

function action()
{
 Command = 'alpha(opacity=100, style=3, finishopacity=' + Opacity +') ';
 Command += (GrayScale == 1 ? 'gray ':'');
 Command += (FH == 1 ? 'FlipH ' : '');
 Command += (FV == 1 ? 'FlipV ' : '');
 Command += (Inverse == 1 ? 'Invert' : '');
 return Command;
}

function clearEffect()
{
 Opacity = 100;
 GrayScale = 0;
 FH = 0;
 FV = 0;
 Inverse = 0;
 Command = "";
 imgObj.style.filter = action();
 reSize(100);
}

function gray()
{
 if (GrayScale == 1) GrayScale = 0;
 else GrayScale = 1;
 imgObj.style.filter = action();
}

function getSize()
{
 W = document.imgObj.width;
 H = document.imgObj.height;
 document.imgObj.width = W / 2;
 document.imgObj.height = H / 2;
}

function initialize()
{
 if (Init != 1)
 {
  W = document.imgObj.width;
  H = document.imgObj.height;
  tmpW = W;
  tmpH = H;
  Init = 1;
 }
}
 
function reSize(num)
{
 initialize();
 if (num > 0)
 {
  tmpW = W * (num / 100);
  tmpH = H * (num / 100);
 }
 else if (num == -1)
 {
  if (tmpW > 0 && tmpH >0)
  {
  tmpW += tmpW * 0.1;
  tmpH += tmpH * 0.1;
  }
 
 }
 
 else if (num == -2)
 {
  if (tmpW > 0 && tmpH >0)
  {
  tmpW -= tmpW * 0.1;
  tmpH -= tmpH * 0.1;
  }
 }
 else
 {
  //don't excute
 }
 
 document.imgObj.width = tmpW;
 document.imgObj.height = tmpH;
}
 
</script>
</head>
<body bgcolor="#8C8C8C" onload="javascript:resizeWnd();"  style='margin:0;'>
<div style='margin:0;'>
<img name="imgObj" src="../../<?=$galleryImg?>" onclick='window.close();' border='1' style='cursor:pointer' alt='창닫기'>
</div>
</body>
</html>
30분 삽질해서 염장지르고 도망가기.....

웬 도망?......썸네일 적용 테스트를 로컬에서....^^


http://www.triplecubic.com/k_41000/bbs/board.php?bo_table=webjin_01
전체 104 |RSS
자유게시판 내용 검색

회원로그인

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