최신글 스킨 제작 4 - 기초 예제 (갤러리 형태)
갤러리 형태는 웹진형 스킨과 비슷합니다.
우선 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; //썸네일 가로 개수 에서 설정한 대로 줄 바꿈이 되는 부분입니다.
전체적인 모양이나 사이즈 등은 본인에게 알맞은 방법으로 만드세요.
예제에서 설명한 코드 그대로 만들면 이런 모양으로 출력될 겁니다.
댓글목록 +1
댓글목록
신비님의 댓글
신비 작성일아주 유용한 설명이네요. ^^