썸네일 크기 관련 질문드립니다. 채택완료

9년 전 조회 10,761

g4에 있는 갤러리 스킨을 g5용으로 수정해서 사용할려고 g5갤러리 스킨에 g4썸네일 부분을 가져와서 적용중입니다.

원본소스

http://sir.kr/g4_skin/97882?sfl=wr_subject%7C%7Cwr_content&stx=%EC%A0%9C%ED%92%88+%EC%86%8C%EA%B0%9C&page=12

 

그런데 제작의뢰에서 썸네일 출력까지는 했는데요.

썸네일 크기가 동일하지 않고 세로로 긴 사진을 올리면 정렬이 깨져버립니다.

썸네일 크롭이 안되는데요. g4스킨에서는 잘되었는데 g5에서는 안되고 이미지처럼 깨져버리네요.

7585c4b552755b8eb3a19da8de8c208e_1472500745_9365.PNG
썸네일 이미지가 동일한 크기로 크롭되게 할려면 어떻게 해야할까요?

도움을 부탁드립니다.

현재 view.skin.php 소스입니다.

 

Copy
<?phpif (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가include_once(G5_LIB_PATH.'/thumbnail.lib.php');// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);?><script type="text/javascript" src="<?php echo G5_JS_URL; ?>/b4.common.js"></script><script src="<?php echo G5_JS_URL; ?>/viewimageresize.js"></script><!-- 게시물 읽기 시작 { --><div id="bo_v_table"><?php echo $board['bo_subject']; ?></div><article id="bo_v" style="width:<?php echo $width; ?>">    <header>        <h1 id="bo_v_title">            <?php            if ($category_name) echo $view['ca_name'].' | '; // 분류 출력 끝            echo cut_str(get_text($view['wr_subject']), 70); // 글제목 출력            ?>        </h1>    </header>    <section id="bo_v_info">        <h2>페이지 정보</h2>        작성자 <strong><?php echo $view['name'] ?><?php if ($is_ip_view) { echo "&nbsp;($ip)"; } ?></strong>        <span class="sound_only">작성일</span><strong><?php echo date("y-m-d H:i", strtotime($view['wr_datetime'])) ?></strong>        조회<strong><?php echo number_format($view['wr_hit']) ?>회</strong>        댓글<strong><?php echo number_format($view['wr_comment']) ?>건</strong>    </section>    <?php    if ($view['file']['count']) {        $cnt = 0;        for ($i=0; $i<count($view['file']); $i++) {            if (isset($view['file'][$i]['source']) && $view['file'][$i]['source'] && !$view['file'][$i]['view'])                $cnt++;        }    }     ?>    <?php if($cnt) { ?>    <!-- 첨부파일 시작 { -->    <section id="bo_v_file">        <h2>첨부파일</h2>        <ul>        <?php        // 가변 파일        for ($i=0; $i<count($view['file']); $i++) {            if (isset($view['file'][$i]['source']) && $view['file'][$i]['source'] && !$view['file'][$i]['view']) {         ?>            <li>                <a href="<?php echo $view['file'][$i]['href'];  ?>" class="view_file_download">                    <img src="<?php echo $board_skin_url ?>/img/icon_file.gif" alt="첨부">                    <strong><?php echo $view['file'][$i]['source'] ?></strong>                    <?php echo $view['file'][$i]['content'] ?> (<?php echo $view['file'][$i]['size'] ?>)                </a>                <span class="bo_v_file_cnt"><?php echo $view['file'][$i]['download'] ?>회 다운로드</span>                <span>DATE : <?php echo $view['file'][$i]['datetime'] ?></span>            </li>        <?php            }        }         ?>        </ul>    </section>    <!-- } 첨부파일 끝 -->    <?php } ?>    <?php    if ($view['link']) {    ?>     <!-- 관련링크 시작 { -->    <section id="bo_v_link">        <h2>관련링크</h2>        <ul>        <?php        // 링크        $cnt = 0;        for ($i=1; $i<=count($view['link']); $i++) {            if ($view['link'][$i]) {                $cnt++;                $link = cut_str($view['link'][$i], 70);         ?>            <li>                <a href="<?php echo $view['link_href'][$i] ?>" target="_blank">                    <img src="<?php echo $board_skin_url ?>/img/icon_link.gif" alt="관련링크">                    <strong><?php echo $link ?></strong>                </a>                <span class="bo_v_link_cnt"><?php echo $view['link_hit'][$i] ?>회 연결</span>            </li>        <?php            }        }         ?>        </ul>    </section>    <!-- } 관련링크 끝 -->    <?php } ?>    <!-- 게시물 상단 버튼 시작 { -->    <div id="bo_v_top">        <?php        ob_start();         ?>        <?php if ($prev_href || $next_href) { ?>        <ul class="bo_v_nb">            <?php if ($prev_href) { ?><li><a href="<?php echo $prev_href ?>" class="btn_b01">이전글</a></li><?php } ?>            <?php if ($next_href) { ?><li><a href="<?php echo $next_href ?>" class="btn_b01">다음글</a></li><?php } ?>        </ul>        <?php } ?>        <ul class="bo_v_com">            <?php if ($update_href) { ?><li><a href="<?php echo $update_href ?>" class="btn_b01">수정</a></li><?php } ?>            <?php if ($delete_href) { ?><li><a href="<?php echo $delete_href ?>" class="btn_b01" onclick="del(this.href); return false;">삭제</a></li><?php } ?>            <?php if ($copy_href) { ?><li><a href="<?php echo $copy_href ?>" class="btn_admin" onclick="board_move(this.href); return false;">복사</a></li><?php } ?>            <?php if ($move_href) { ?><li><a href="<?php echo $move_href ?>" class="btn_admin" onclick="board_move(this.href); return false;">이동</a></li><?php } ?>            <?php if ($search_href) { ?><li><a href="<?php echo $search_href ?>" class="btn_b01">검색</a></li><?php } ?>            <li><a href="<?php echo $list_href ?>" class="btn_b01">목록</a></li>            <?php if ($reply_href) { ?><li><a href="<?php echo $reply_href ?>" class="btn_b01">답변</a></li><?php } ?>            <?php if ($write_href) { ?><li><a href="<?php echo $write_href ?>" class="btn_b02">글쓰기</a></li><?php } ?>        </ul>        <?php        $link_buttons = ob_get_contents();        ob_end_flush();         ?>    </div>    <!-- } 게시물 상단 버튼 끝 -->    <section id="bo_v_atc">        <h2 id="bo_v_atc_title">본문</h2><SCRIPT LANGUAGE='JavaScript'>// 이미지뷰어<!--     var win= null;    function View_Open(img, w, h)    {        var winl = (screen.width-w)/2;        var wint = (screen.height-h)/3;        var settings  ='height='+h+',';            settings +='width='+w+',';            settings +='top='+wint+',';            settings +='left='+winl+',';            settings +='scrollbars=yes,';            settings +='resizable=yes,';            settings +='status=no';        win=window.open("","newWindow",settings);        win.document.open();         win.document.write ("<html><head><title>원본 이미지 보기</title></head>");         win.document.write ("<script>function init(){window.resizeBy(document.all.pop_img.width-document.body.clientWidth, document.all.pop_img.height-document.body.clientHeight+10);}</script>");         win.document.write ("<body bgcolor=white topmargin=0 leftmargin=0 marginwidth=0 marginheight=0 oncontextmenu='return false' ondragstart='return false' onkeydown='return false' onselectstart='return false' onload='init();'>");        win.document.write ("<img src='"+img+"' border=0 onclick='window.close();' style='cursor:hand' title='닫기' id='pop_img'>");        win.document.write ("</body></html>");        win.document.close();    }//--></SCRIPT><SCRIPT LANGUAGE="JavaScript">image_directory = "";   //배경이미지 경로clear = new Image();  clear.src = image_directory + "./img/blank.gif";</script><?//파일 뽑기$sql2 = " select bf_file from $g5[board_file_table] where bo_table = '$bo_table' and wr_id = '$wr_id' order by bf_no limit 0, 10 "; $result2 = sql_query($sql2);for ($j=0; $row2 = sql_fetch_array($result2); $j++) {$view_one = "{$g5['path']}/deplan/data/file/{$bo_table}/{$row2['bf_file']}";?><script>view_img<?=$j?> = new Image();view_img<?=$j?>.src = "<?=$g5['path']?>/deplan/data/file/<?=$bo_table?>/<?=$row2['bf_file']?>";</script><? } ?><script>function bgChange(imgName) {  document.all.view_img.src = eval(imgName + ".src");}</SCRIPT><table width="100%" cellspacing="0" cellpadding="0" border="0" >  <tr>  <td width="2"></td>      <td style="padding:4 0 4 0px;" width="420" height="330" valign="top">       <div style='width:420px; position:relative; overflow:hidden;' align=center><a href="javascript:void(0);" onClick="View_Open('<?=$view_one?>')"><img src="<?=$view_one?>" name="view_img" border="5" width=400  style="border-color:#161616;"></a></div>    </td>  <td width="10"></td>      <td style="padding:4 0 4 0px;" width="190" height="330"  valign="top">  <?//파일 뽑기$sql = " select bf_file from $g5[board_file_table] where bo_table = '$bo_table' and wr_id = '$wr_id' order by bf_no limit 0, 10 "; $result = sql_query($sql);for ($i=0; $row = sql_fetch_array($result); $i++) {//썸네일 코드 시작$data_path = $g5['path'] . "/deplan/data/file/{$bo_table}";//라이브러리 파일 참조$thumb_path = $data_path . '';$view_w = 90; //썸네일 가로사이즈$view_h = 70; //썸네일 세로사이즈$sch_q = 100; //썸네일 퀼리티if (!is_dir($thumb_path)) {@mkdir($thumb_path, 0707);@chmod($thumb_path, 0707);}$filename = $row[bf_file]; //파일명$thumb = $thumb_path.'/'.$filename; //썸네일if (!file_exists($thumb)){$file = $data_path.'/'.$filename; //원본 if (preg_match("/\.(jp[e]?g|gif|png)$/i", $file) && file_exists($file)) {  $size = getimagesize($file);  if ($size[2] == 1)   $src = imagecreatefromgif($file);  else if ($size[2] == 2)   $src = imagecreatefromjpeg($file);  else if ($size[2] == 3)   $src = imagecreatefrompng($file);  else   continue;  $rate = $view_w / $size[0];  $height = (int)($size[1] * $rate);  if ($height < $view_h)   $dst = imagecreatetruecolor($view_w, $height);  else   $dst = imagecreatetruecolor($view_w, $view_h);  imagecopyresampled($dst, $src, 0, 0, 0, 0, $view_w, $height, $size[0], $size[1]);  imagejpeg($dst, $thumb_path.'/'.$filename, $sch_q);  chmod($thumb_path.'/'.$filename, 0707); }} if ($thumb && $filename) {?><a href="javascript:void(0);" onClick="View_Open('<?=$data_path?>/<?=$filename?>')" onMouseOver="bgChange('view_img<?=$i?>');" onMouseOut="bgChange('view_img<?=$i?>');" ><img src='<?=$thumb?>'  style="border: 1px solid #e5e5e5" width=90 height=70  ></a><?//onMouseOut="bgChange('clear');"}}?>    </td>  <td width="5"></td> </tr></table>  </td></td> </tr> </table> <br><table width="100%" cellspacing="0" cellpadding="0" border="0">  <tr>    <td height="5"></td>  </tr>  <tr>    <td height="5"></td>  </tr>  <tr>    <td width="100%" valign="top" style="word-break:break-all;"> <span class="V_content">       </span>      <!-- 테러 태그 방지용 --></xml></xmp><img src="<?=$board_skin_path?>/img/inf0.gif"  alt=""></td>  </tr>  <tr>    <td height="5"></td>  </tr></table><table width="100%" cellspacing="0" cellpadding="0" border="0">  <tr>     <td width="<?=$view_td?>">       <table width="100%" cellspacing="0" cellpadding="0" border="0" valign="top">        <!--<tr>           <td bgcolor="#cacaca" width="<?=$view_td?>" height="5"></td>        </tr>--> <tr>           <td width="<?=$view_td?>" height="2"></td>        </tr>              <tr>                 <td>  <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">                                <tr>                                  <td height="2"></td>                                </tr>                                <tr>                                   <td><span class="V_content">                                      </span>                                     <?//echo $view[rich_content]; // {이미지:0} 과 같은 코드를 사용할 경우?>                                  </td>                                </tr>                              </table>        <?php        // 파일 출력        $v_img_count = count($view['file']);        if($v_img_count) {            echo "<div id=\"bo_v_img\">\n";            for ($i=0; $i<=count($view['file']); $i++) {                if ($view['file'][$i]['view']) {                    //echo $view['file'][$i]['view'];                    echo get_view_thumbnail($view['file'][$i]['view']);                }            }            echo "</div>\n";        }         ?>        <!-- 본문 내용 시작 { -->        <div id="bo_v_con"><?php echo get_view_thumbnail($view['content']); ?></div>        <?php//echo $view['rich_content']; // {이미지:0} 과 같은 코드를 사용할 경우 ?>        <!-- } 본문 내용 끝 -->        <?php if ($is_signature) { ?><p><?php echo $signature ?></p><?php } ?>        <!-- 스크랩 추천 비추천 시작 { -->        <?php if ($scrap_href || $good_href || $nogood_href) { ?>        <div id="bo_v_act">            <?php if ($scrap_href) { ?><a href="<?php echo $scrap_href;  ?>" target="_blank" class="btn_b01" onclick="win_scrap(this.href); return false;">스크랩</a><?php } ?>            <?php if ($good_href) { ?>            <span class="bo_v_act_gng">                <a href="<?php echo $good_href.'&amp;'.$qstr ?>" id="good_button" class="btn_b01">추천 <strong><?php echo number_format($view['wr_good']) ?></strong></a>                <b id="bo_v_act_good"></b>            </span>            <?php } ?>            <?php if ($nogood_href) { ?>            <span class="bo_v_act_gng">                <a href="<?php echo $nogood_href.'&amp;'.$qstr ?>" id="nogood_button" class="btn_b01">비추천  <strong><?php echo number_format($view['wr_nogood']) ?></strong></a>                <b id="bo_v_act_nogood"></b>            </span>            <?php } ?>        </div>        <?php } else {            if($board['bo_use_good'] || $board['bo_use_nogood']) {        ?>        <div id="bo_v_act">            <?php if($board['bo_use_good']) { ?><span>추천 <strong><?php echo number_format($view['wr_good']) ?></strong></span><?php } ?>            <?php if($board['bo_use_nogood']) { ?><span>비추천 <strong><?php echo number_format($view['wr_nogood']) ?></strong></span><?php } ?>        </div>        <?php            }        }        ?>        <!-- } 스크랩 추천 비추천 끝 -->    </section>    <?php    include_once(G5_SNS_PATH."/view.sns.skin.php");    ?>    <?php    // 코멘트 입출력    include_once(G5_BBS_PATH.'/view_comment.php');     ?>    <!-- 링크 버튼 시작 { -->    <div id="bo_v_bot">        <?php echo $link_buttons ?>    </div>    <!-- } 링크 버튼 끝 --></article><!-- } 게시판 읽기 끝 --><script><?php if ($board['bo_download_point'] < 0) { ?>$(function() {    $("a.view_file_download").click(function() {        if(!g5_is_member) {            alert("다운로드 권한이 없습니다.\n회원이시라면 로그인 후 이용해 보십시오.");            return false;        }        var msg = "파일을 다운로드 하시면 포인트가 차감(<?php echo number_format($board['bo_download_point']) ?>점)됩니다.\n\n포인트는 게시물당 한번만 차감되며 다음에 다시 다운로드 하셔도 중복하여 차감하지 않습니다.\n\n그래도 다운로드 하시겠습니까?";        if(confirm(msg)) {            var href = $(this).attr("href")+"&js=on";            $(this).attr("href", href);            return true;        } else {            return false;        }    });});<?php } ?>function board_move(href){    window.open(href, "boardmove", "left=50, top=50, width=500, height=550, scrollbars=1");}</script><script>$(function() {    $("a.view_image").click(function() {        window.open(this.href, "large_image", "location=yes,links=no,toolbar=no,top=10,left=10,width=10,height=10,resizable=yes,scrollbars=no,status=no");        return false;    });    // 추천, 비추천    $("#good_button, #nogood_button").click(function() {        var $tx;        if(this.id == "good_button")            $tx = $("#bo_v_act_good");        else            $tx = $("#bo_v_act_nogood");        excute_good(this.href, $(this), $tx);        return false;    });    // 이미지 리사이즈    $("#bo_v_atc").viewimageresize();});function excute_good(href, $el, $tx){    $.post(        href,        { js: "on" },        function(data) {            if(data.error) {                alert(data.error);                return false;            }            if(data.count) {                $el.find("strong").text(number_format(String(data.count)));                if($tx.attr("id").search("nogood") > -1) {                    $tx.text("이 글을 비추천하셨습니다.");                    $tx.fadeIn(200).delay(2500).fadeOut(200);                } else {                    $tx.text("이 글을 추천하셨습니다.");                    $tx.fadeIn(200).delay(2500).fadeOut(200);                }            }        }, "json"    );}</script><!-- } 게시글 읽기 끝 -->
 

 

답변 2개

채택된 답변
+20 포인트

가로 비율이 고정으로 섬네일이 생성되는거라면

뿌려지는 html css 상에서 해당 섬네일의 css 의 max-height 값을 정해주시거나

감싸고있는 엘리먼트에 img src 가 아닌 background 로 설정하는것도 한가지 방법입니다.

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

알려주신 내용에서 힌트를 얻어 <div>감싸고 overflow:hidden으로 처리했습니다.
감사드립니다.

댓글을 작성하려면 로그인이 필요합니다.

 

Copy
imagecopyresampled($dst, $src, 0, 0, 0, 0, $view_w, $height, $size[0], $size[1]);

저라면 이 부분을 다음과 같이 바꾸겠습니다. (테스트는 안해봤어요)


Copy
if($size[0] / $view_w * $height < $size[1]) {	// 비율에 의해 예측한 세로 길이가 실제 세로 길이보다 짧다면 생각보다 위아래로 긴 것이다. 위아래를 잘라야함.	imagecopyresampled($dst, $src, 0, 0, 0, ($size[1] - $size[0] / $view_w * $height)/2, $view_w, $height, $size[0], $size[0] / $view_w * $height);} else {	// 좌우 잘라야함	imagecopyresampled($dst, $src, 0, 0, ($size[0] - $size[1] / $height * $view_w)/2, 0, $view_w, $height, $size[1] / $height * $view_w, $size[1]);}
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

답변 감사드립니다.
알려주신 방법으로는 되지 않아서 다른 방법으로 처리했습니다.
귀한 시간 내주셔서 감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고