DEVINFO 데빈포 그누보드 포럼 쉽게 찾는 그누보드 실전 정보
BOARD

강좌·기초

BOARD 강좌·기초

그누보드5 최신글 갤러리 스킨 제작 기초와 썸네일·줄바꿈 구현 방법

페이지 정보

profile_image
작성자 최고관리자
댓글 0건 조회 23회 작성일 26-09-26 17:30

본문

그누보드5 최신글 갤러리 스킨 제작 기초와 썸네일·줄바꿈 구현 방법

그누보드5 환경에서 갤러리 형태의 최신글 스킨을 직접 제작하려는 운영자와 개발자를 위해, 썸네일 라이브러리 연동 방법부터 이미지 줄바꿈 제어 및 주요 변수 활용법까지 구체적인 절차를 안내합니다.

최신글 스킨 썸네일 출력 설정 방법

그누보드 최신글 스킨에서 썸네일 생성 함수를 정상적으로 호출하고 이미지가 없는 게시물의 기본 이미지(noimage.gif) 처리를 구현하려면, latest.skin.php 파일 상단에 썸네일 라이브러리 호출 코드를 추가해야 합니다.

1. 추가 위치 및 코드

latest.skin.php 파일의 가장 상단(if (!defined('_GNUBOARD_')) exit; 바로 아래)에 아래 코드를 넣습니다.

include_once(G5_LIB_PATH.'/thumbnail.lib.php');
$thumb_width = 120; // 썸네일 가로 사이즈
$thumb_height = 100; // 썸네일 세로 사이즈
$img_cols = 4; // 썸네일 가로 개수

2. 썸네일 생성 및 출력 코드 추가

반복문(for문) 내부 적절한 위치에 get_list_thumbnail 함수를 사용해 썸네일을 생성하고 출력하는 코드를 배치합니다.

$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.'">';
}

3. 점검 및 다음 행동

  • 백업: 코드를 수정하기 전 해당 스킨 경로의 파일을 미리 백업해 둡니다.
  • 이미지 확인: 첨부 이미지가 없는 게시물에 noimage.gif를 출력하려면 스킨 폴더 내 img 폴더에 noimage.gif 파일이 실제로 존재하는지 확인합니다.
  • 크기 조정: 썸네일 크기가 깨지거나 반영되지 않을 경우 latest.skin.php 상단의 $thumb_width, $thumb_height 값이나 스타일 파일(.css)의 width 값을 확인하고 수정합니다.

갤러리 최신글 스킨 가로 배치 및 줄바꿈 설정 방법

갤러리 형태의 최신글 스킨에서 이미지를 가로로 몇 개씩 배치하고 줄바꿈을 제어하려면 latest.skin.php 파일에서 $img_cols 변수와 조건문 로직을 설정해야 합니다.

1. 상단 설정 변수 지정

latest.skin.php 파일 상단에 썸네일 라이브러리 호출 코드와 함께 가로로 출력할 이미지 개수를 지정하는 $img_cols 변수를 추가합니다.

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
$thumb_width = 120; // 썸네일 가로 사이즈
$thumb_height = 100; // 썸네일 세로 사이즈
$img_cols = 4; // 썸네일 가로 개수
?>

2. 줄바꿈 조건문 적용

게시물 목록을 순회하는 반복문(for) 안에서 $img_cols 변수를 기준으로 행을 나누는 줄바꿈 코드를 배치합니다. 지정한 가로 개수(예: 4개)마다 행이 바뀌어 격자형 레이아웃이 구성됩니다.

<?php if ($i > 0 && ($i % $img_cols == 0)) {?>
 </tr>
 <tr>
 <td colspan="<?php echo $img_cols?>" height="5"></td>
 </tr>
 <tr>
<?php }?>

3. 확인 및 점검 사항

  • 설정한 $img_cols 값에 따라 지정된 번째 수의 이미지에서 정상적으로 줄바꿈이 일어나는지 화면에서 확인합니다.

그누보드5 최신글 스킨 제작 시 게시물 정보와 경로를 출력하기 위해 다음의 주요 변수들을 활용할 수 있습니다.

스킨 및 경로 관련 변수

  • $latest_skin_url: 스킨 폴더 경로입니다. 스킨 내 이미지, CSS, JS 파일 등을 연결할 때 사용합니다. (예: <img src="<?php echo $latest_skin_url?>/img/이미지명.gif">)
  • G5_BBS_URL: 게시판 기본 URL입니다. 게시판 제목 등에 링크를 걸 때 사용합니다. (예: <a href="<?php echo G5_BBS_URL?>/board.php?bo_table=<?php echo $bo_table?>">)

게시물 정보 출력 변수

  • $bo_subject: 게시판 제목
  • $list[$i]['subject']: 게시물 제목
  • $list[$i]['href']: 게시물 상세 페이지 링크 주소
  • $list[$i]['name']: 작성자 이름
  • $list[$i]['datetime2']: 작성 날짜 (예: 12-31 형식)
  • $list[$i]['comment_cnt']: 댓글 수
  • $list[$i]['wr_hit']: 조회수
  • $list[$i]['wr_good'], $list[$i]['wr_nogood']: 추천수 및 비추천수
  • $list[$i]['ca_name']: 분류명
  • $list[$i]['wr_content']: 본문 내용
  • $list[$i]['wr_1'] ~ $list[$i]['wr_10']: 여분 필드 값

위 변수들은 스킨 파일(latest.skin.php) 내에서 PHP echo 문을 통해 출력하여 사용할 수 있습니다.

갤러리형 스킨 원본 이미지 출력 방법

그누보드 5.3 기본 gallery 스킨 기준으로 썸네일 대신 원본 이미지를 출력하려면 스킨 파일 내 이미지 출력 코드의 속성값을 변경해야 합니다.

수정 위치 및 코드 변경

  • 수정 파일: list.skin.php
  • 기존 코드: $img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'">';
  • 변경 코드: $img_content = '<img src="'.$thumb['ori'].'" alt="'.$thumb['alt'].'">';

$thumb['src']로 설정되어 있는 부분을 $thumb['ori']로 수정하면 썸네일 대신 원본 이미지가 출력됩니다.

주의 사항 및 조건

  • 원본 이미지 출력은 그누보드 5.1.1 버전 이상에 포함된 thumbnail.lib.php 파일이 적용된 상태에서만 사용할 수 있습니다.

갤러리 형태의 최신글 스킨 제작 및 썸네일 크기 점검 방법

그누보드에서 갤러리 형태의 최신글 스킨을 제작할 때는 썸네일 생성, 줄바꿈 로직($img_cols), 그리고 필요한 변수들을 올바르게 배치하는 것이 핵심입니다.

1. 스킨 상단 설정 및 썸네일 라이브러리 추가

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('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css">', 0);
?>

2. 썸네일 크기 깨짐 점검 위치

최신글 스킨의 썸네일 크기가 깨지거나 반영되지 않을 때는 다음 위치를 점검해야 합니다.

  • 파일 설정 점검: 적용 중인 테마 폴더 내 latest.skin.php 파일 상단에 지정된 $thumb_width와 $thumb_height 값을 확인합니다.
  • 스타일시트 점검: 해당 최신글 스킨의 style.css 파일에서 이미지 영역의 width 값을 함께 수정하여 레이아웃 크기를 맞춥니다.

3. 주요 이미지 출력 및 줄바꿈 로직

반복문 내부에서 get_list_thumbnail 함수를 호출하여 이미지를 처리하고, $img_cols 변수를 이용해 지정된 개수마다 줄바꿈이 일어나도록 구성합니다.

<?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 }?>

4. 썸네일 대신 원본 이미지 출력 방법

썸네일 대신 원본 이미지를 출력하여 흐릿함을 방지하려면 (그누보드 5.1.1 버전 이상에서 지원), img 태그의 src 속성값을 $thumb['src']에서 $thumb['ori']로 변경합니다.

$img_content = '<img src="'.$thumb['ori'].'" alt="'.$thumb['alt'].'">';

갤러리 최신글 스킨 제작 가이드

  • 내 상황: 그누보드5 환경에서 갤러리 형태의 최신글 스킨을 제작하거나 수정하려는 경우
  • 선택 기준: 썸네일 생성 및 줄바꿈 로직 구현, 이미지 원본 출력 여부, 스킨 내 경로 설정에 따라 아래 절차를 연결합니다.
  • 다음 행동:
    1. latest.skin.php 상단에 썸네일 라이브러리(thumbnail.lib.php)를 include합니다.
    2. $img_cols 변수를 설정하여 반복문 내 줄바꿈 로직을 구현합니다.
    3. 썸네일 크기나 원본 출력 여부를 결정하고, 스킨 폴더 내 img/noimage.gif 파일 존재 여부를 확인합니다.
    4. 스타일시트(style.css)에서 이미지 영역의 너비를 조정하여 레이아웃을 맞춥니다.

실전 FAQ

  • Q. 썸네일이 생성되지 않고 noimage.gif만 출력됩니다. A. latest.skin.php 상단에 include_once(G5_LIB_PATH.'/thumbnail.lib.php');가 포함되었는지 확인하세요. 또한, 게시판에 이미지가 정상적으로 업로드되어 DB에 저장되었는지 확인이 필요합니다.
  • Q. 썸네일 크기를 변경해도 화면에 반영되지 않습니다. A. latest.skin.php의 $thumb_width, $thumb_height 값 수정과 함께, 스킨 폴더 내 style.css 파일의 이미지 관련 width 속성값을 동일하게 수정해야 합니다.
  • Q. 썸네일 대신 원본 이미지를 출력하고 싶습니다. A. 그누보드 5.1.1 이상 버전에서 이미지 출력 코드의 $thumb['src']를 $thumb['ori']로 변경하면 원본 이미지가 출력됩니다.

함께 보면 좋은 글

참고자료

기타 참고자료

댓글목록

등록된 댓글이 없습니다.