최신글 스킨 제작 4 - 기초 예제 (갤러리 형태) - 최신글스킨강좌, 그누보드5강좌

본문 바로가기
전체검색

최신글스킨강좌

그누보드, 영카트 초보 제작자분들을 위한 다양한 스킨 제작 활용 팁을 공유합니다.

최신글 스킨 제작 4 - 기초 예제 (갤러리 형태)

관리자 15-10-05 12:44

​갤러리 형태는 웹진형 스킨과 비슷합니다.

 

 

우선 latest.skin.php 파일 상단에 아래 내용을 넣어줍니다.

 

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
$thumb_width=120; //썸네일 가로사이즈
$thumb_height=100; //썸네일 세로사이즈
$img_cols = 4; //썸네일 가로 개수
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css">', 0);
?>

 

웹진 형태와 큰 차이점은 없고 기본 썸네일 출력 코드에서 아랫부분이 추가되었는데
$img_cols = 4; //썸네일 가로 개수
이미지 개수에 따라 줄 바꿈 해야 할 경우도 있으므로 가로 개수 설정 부분을 추가해준 겁니다.
 

예를 들어 가로 개수를 4로 설정하면 이렇게 4번째 이미지에서 줄 바꿈이 되는 겁니다.
 

이미지1  이미지2  이미지3  이미지4
이미지5  이미지6  이미지7  이미지8 

 

 

 

게시판 제목 타이틀은 필요하면 넣어주고.

 

<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td height="30"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $bo_table ?>"><strong><?php echo $bo_subject; ?></strong></a></td>
</tr>
</table>

 

  

 

그다음 이미지 출력 부분 코드를 넣습니다.

<table width="500" border="0" cellspacing="7" cellpadding="0" style="border:1px solid #d1dee2">
<tr>
<?php
for ($i=0; $i<count($list); $i++) {
$thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $thumb_width, $thumb_height);
if($thumb['src']) {
    $img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" width="'.$thumb_width.'" height="'.$thumb_height.'">';
} else {
 $img_content = '<img src="'.$latest_skin_url.'/img/noimage.gif" width="'.$thumb_width.'" height="'.$thumb_height.'">';
}
?>
<?php if ($i>0 && ($i % $img_cols == 0)) { ?>
</tr>
<tr>
    <td colspan="<?php echo $img_cols ?>" height="5"></td>
</tr>
<tr>
<?php } ?>
    <td align="center" valign="top" style="padding:5px">
        <table width="<?php echo $thumb_width ?>" cellspacing="0" cellpadding="0">
        <tr>
            <td><a href="<?php echo $list[$i]['href'] ?>"><?php echo $img_content ?></a></td>
        </tr>
        <tr>
            <td style="padding-top:5px"><a href="<?php echo $list[$i]['href'] ?>"><?php echo $list[$i]['subject'] ?></a></td>
        </tr>
        </table>
    </td>
<?php } ?>
<? if (count($list) == 0) { echo "<td align=center height=50>게시물이 없습니다.</td>"; } ?>
</tr>
</table>


 

썸네일 출력 부분은 이전 강좌를 참고하시고.

빨간색 부분이 처음에 말한 $img_cols = 4; //썸네일 가로 개수 에서 설정한 대로 줄 바꿈이 되는 부분입니다. 

 

전체적인 모양이나 사이즈 등은 본인에게 알맞은 방법으로 만드세요. 

 

 

 

예제에서 설명한 코드 그대로 만들면 이런 모양으로 출력될 겁니다.

 

bd75b67f5146b316ad9d1f815a6da3ca_1445927455_6814.gif 

댓글목록 +1

댓글목록

profile_image

신비님의 댓글

신비 작성일

아주 유용한 설명이네요. ^^

로그인 후 댓글 작성 가능합니다.

로그인

로그인 후 글 작성 가능합니다.
그누스킨닷컴

그누스터디는 그누보드, 영카트를 이용하시는 초보 사용자를 위한 정보를 공유합니다.

E-MAIL : gnustudy@naver.com / 카카오톡 : gnustudy / 텔레그램 : gnustudy
제작 문의를 제외한 일반 문의는 QA 게시판을 이용해주세요.

Copyright gnustudy.com All rights reserved.