[그누보드5] Swiper 최신글 만들기

그누보드

[그누보드5] Swiper 최신글 만들기

Lpla

2021. 6. 23. 21:11

lpla_swiper.zip

0.00MB

1. 최신글 불러오기

그누보드에서 특정 게시판의 최신글을 불러오는 방법은 다음과 같다.

<?php echo latest('스킨이름', '테이블이름', '게시글 개수', '제목 길이'); ?>

스킨 이름은 /skin/latest/스킨폴더명을 의미한다.

테이블 이름은 게시판을 생성할 때 짓는 고유 명칭으로 관리자 페이지에서 확인 가능하고 URL로도 알 수 있다.

게시판 스킨은 최신글을 불러오는데 어떤 영향도 끼치지 못한다.

2. 게시판 생성

관리자 페이지에서 게시판을 하나 만든다.

여기서는 newsletter로 만들었다.

게시판을 생성한 다음, 기억해야 할 것은 바로 이 TABLE명이다.

그리고 게시글을 작성한다.

이때 이미지는 첨부 파일 형태로 업로드해야 나중에 읽어 들일 수 있다.

여기선 이런 형태의 게시글을 5개 작성했다.

3. 스킨 추가

/skin/latest/스킨폴더명 경로에 최신글 폴더를 추가한다.

그리고 최신글을 넣고자 하는 위치에 최신글 코드를 삽입한다.

<?php
include_once('./_common.php');

define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

include_once(G5_PATH . '/head.php');
?>

<style>
  body { background: #CCC; }
  .news_section { max-width: 1200px; margin: 0 auto; }
  .news_top_con { font-size: 60px; margin-bottom: 20px; }
</style>

<section class="news_section">
  <div class="news_top_con">
    <h1 class="text_shadow">NEWS LETTER</h1>
  </div>
  <div class="news_bottom_con">
    <?php echo latest('lpla_swiper', 'newsletter', '5'); ?>
  </div>
</section>

<?php
include_once(G5_PATH . '/tail.php');

여기선 lpla_swiper 스킨으로 newsletter 게시판의 최신글 5개를 불러 왔다.

제목 길이는 스킨 파일 내부에서 설정했기 때문에 여기서는 따로 입력하지 않았다.

4. 코드 해석

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH . '/thumbnail.lib.php');

add_stylesheet('<link rel="stylesheet" href="' . $latest_skin_url . '/style.css">', 100);
add_stylesheet('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.7.0/swiper-bundle.css" integrity="sha512-lfjMBfE41+3a9XCiuXCjaE4CkvpPOQ5P2qZSZclW9iHsMSvn50dh6ZuB5O8g7uDlCIKFKPqYo8JIka9Rh8HXow==" crossorigin="anonymous" referrerpolicy="no-referrer" />', 0);
add_stylesheet('<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.7.0/swiper-bundle.min.js" integrity="sha512-qqdD5ZLIGB5PCqCk1OD8nFBr/ngB5w+Uw35RE/Ivt5DK35xl1PFVkuOgAbqFpvtoxX6MpRGLmIqixzdhFOJhnA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>', 0);

$thumb_width = 600;
$thumb_height = 600;
$list_count = (is_array($list) && $list) ? count($list) : 0;
?>

<div class="swiper-container lpla_swiper">
  <div class="swiper-wrapper">
    <?php
    for ($i = 0; $i < $list_count; $i++) {
      $img_link_html = '';
      $thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $thumb_width, $thumb_height, false, true);

      if ($thumb['src']) {
        $img = $thumb['src'];
      } else {
        $img = G5_IMG_URL . '/no_img.png';
        $thumb['alt'] = '이미지가 없습니다.';
      }
      $img_content = '<img src="' . $img . '" alt="' . $thumb['alt'] . '" >';
      $img_link_html = '<a href="' . $list[$i]['href'] . '" class="lt_img" >' . $img_content . '</a>';
    ?>
      <div class="swiper-slide">
        <div class="swiper_top_con">
          <?php echo $img_content; ?>
        </div>
        <div class="swiper_bottom_con">
          <div class="info_wrap flex">
            <div class="info_box info_box01">
              <p class="date1"><?php echo substr($list[$i]['wr_datetime'], 0, 4); ?>.<?php echo substr($list[$i]['wr_datetime'], 5, 2); ?></p>
              <h1 class="date2"><?php echo substr($list[$i]['wr_datetime'], 8, 2); ?></h1>
            </div>
            <div class="info_box info_box02">
              <h1 class="info_title mb-20"><?php echo mb_strimwidth(strip_tags($list[$i]['wr_subject']), 0, 40, "...", "utf-8"); ?></h1>
              <p class="info_contents"><?php echo mb_strimwidth(strip_tags($list[$i]['wr_content']), 0, 100, "...", "utf-8"); ?></p>
            </div>
          </div>
          <div class="info_box info_box03">
            <button class="link_btn arita">
              <a href="<?php echo $list[$i]['href']; ?>"><span>자세히보기 +</span></a>
            </button>
          </div>
        </div>
      </div>
    <?php
    }
    ?>
  </div>
</div>

<script>
  let newsSwiper = new Swiper('.lpla_swiper', {
    slidesPerView: 3,
    centeredSlides: true,
    loop: true,
    speed: 1000,
    spaceBetween: 20,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
  })
</script>

코드를 모두 해석할 여건은 안 되고 중요한 내용만 집고 넘어 가겠다.

같은 스킨 폴더의 style.css를 불러 오고 cdn으로 swiper 라이브러리를 불러 온다.

$thumb_width와 $thumb_height에 이미지 크기를 맞게 설정한다.

이미지가 없으면 그누보드 자체적으로 제공하는 ‘이미지가 없습니다.’ 라는 더미 이미지를 대신 띄운다.

게시글의 이미지는 get_list_thumbnail() 함수로 불러 왔다.

게시글 연월일 중에 일을 크게 표시하기 위해서 substr()을 사용했다.

<?php echo substr($list[$i]['wr_datetime'], 0, 4); ?> 으로 연도를

<?php echo substr($list[$i]['wr_datetime'], 5, 2); ?> 으로 월을

<?php echo substr($list[$i]['wr_datetime'], 8, 2); ?> 으로 일수를 각각 구했다.

그리고 제목 길이를 정하는데 mb_strimwidth()를 사용했다.

여기서는 40글자까지 자르고 그 이상은 ...으로 표시했다.

마찬가지로 내용은 100글자를 기준으로 대체했다.

마지막으로 swiper 스크립트를 추가하여 마무리했다.

css는 별도로 설명하지 않고 첨부만 하겠다.

.flex { display: flex; }
.lpla_swiper .swiper-slide { padding: 20px; background: #FFF; }
.lpla_swiper .swiper_top_con { margin-bottom: 30px; }
.lpla_swiper .swiper_top_con img { width: 100%; }
.lpla_swiper .info_title  { font-size: 20px; height: 40px; }
.lpla_swiper .info_contents { font-size: 14px; }
.lpla_swiper .info_box01 { width: 30%; }
.lpla_swiper .info_box01 .date1 { font-size: 20px; }
.lpla_swiper .info_box01 .date2 { font-size: 58px; line-height: 58px; }
.lpla_swiper .info_box02 { width: 70%; }
.lpla_swiper .info_box03 { margin-top: 20px; margin-bottom: 20px; text-align: right; padding: 10px; }
.lpla_swiper .info_box03 .link_btn { padding: 5px; font-size: 14px; border: 1px solid #000; outline: none; background: transparent; padding: 10px 15px; }

저작자표시 비영리 변경금지

Lpla 개발 블로그