크롬80버전 결제 이슈, 영카트5 주요패치 확인!

그누보드5 최신글 슬라이드 이미지 크기

그누보드5
영카트5
매뉴얼
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티
그누보드5 최신글 슬라이드 이미지 크기

QA

사수가 없어도 할 수 있다! 초보자를 위한 그누보드 FAQ

그누보드5 최신글 슬라이드 이미지 크기

본문

그누보드5에서 최신글 슬라이드를 사용하고 싶어, 감사한 분의 스킨을 보며 하나씩 넣으며 연습 중입니다.

 

owl carousel이라는 슬라이드를 사용했는데, 제가 원하는 모습은 각각의 이미지 크기가 달라도 보이는 이미지 사이즈가 같았으면 좋겠습니다.

이런 경우엔 어떻게 해결해야 하나요?ㅠㅠ

833465004_1596161375.0839.png

latest.skin.php


<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
 
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
 
$sql = " select * from {$g5['board_table']} where bo_table = '{$bo_table}' ";
$board = sql_fetch($sql);
 
if ($options)   list($width, $height, $wrap_width, $content_length) = explode(',', $options);
if (!$width) $width = 600;
if (!$height) $height = 400;
if (!$content_length) $content_length = 120;
 
add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css">', 0);
?>

 
<script type="text/javascript" src="<?php echo $latest_skin_url?>/owl.carousel.min.js"></script>
<script type="text/javascript" src="<?php echo $latest_skin_url?>/carousel_slider.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo $latest_skin_url?>/owl.carousel.min.css">

 
<div>
    <div class="carousel-wrapper">
    <ul class="owl-carousel">
<?php
for ($i=0; $i<count($list); $i++) {
    
    $thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $width, $height);
    ?>
    <li class="item"><a href="<?php echo $list[$i]['href']?>"><img src="<?php echo $thumb['src']?>"></a></li>
    
<?php
    }
 
if (count($list) == 0) { //게시물이 없을 때  ?>
        게시물이 없습니다.
<?php }  ?>
 
    </div>
 
</div>

 

 

style.css


@charset "utf-8";
 
/* 새글 스킨 (latest) */
.lt_pc {float:left;margin-left:20px}
.lt {position:relative;float:left;margin-bottom:20px;padding-bottom:10px;width:354px;height:150px;border-bottom:1px solid #e9e9e9}
.lt ul {margin:0 0 10px;padding:0;list-style:none}
.lt li {padding:3px 0;}
.lt .lt_title {display:block;padding:10px 0 8px}
.lt .lt_more {position:absolute;top:10px;right:0}
.lt .cnt_cmt {display:inline-block;margin:0 0 0 3px;font-weight:bold}
 
.owl-carousel {width:1200px; margin:0 auto;}
.owl-carousel .item a {display:block; width:100%;}

 

slider.js


$(document).ready(function(){
    $('.owl-carousel').owlCarousel({
        loop:true,
        margin:10,
        nav:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:3
            },
        }
    })
});
이 글을 내 페이스북 계정으로 보내기 이 글을 내 트위터 계정으로 보내기

이 질문에 댓글 쓰기 :

답변 6

천사별님의 답변

아래의 링크를 참고하세요.

https://sir.kr/g5_tip/13011

주소복사
답변의 댓글
카멜리아님의 댓글
천사별님 답변 진심으로 감사합니다!
주신 링크대로 해봤지만 마찬가지로 뜹니다,,,,
혹여 제가 원하는 의도는 아래 다시 달아둔 댓글 사진처럼 빨간 사각형처럼 무조건 확대되더라도 뜨게 하고 싶은데 이부분에 대해서 아시는 부분이 있으실까요?
(사진은 댓글로 다시 첨부하니 혹시 아신다면 부탁드립니다!)

DSLOVE님의 답변

$thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $width, $height, $is_crop=true);

 

위에처럼 한번 해보세요~ 위에처럼해도 원하는형태가 아니라면,

올리는 사람마다 사이즈가 제 각각이라 css 로 해결을 해야합니다.

이미지를 오버사이징해서 가운데정렬로 맞추고 부모요소에 overlfow:hidden 으로 짤라야하거든요~

음.. 여러가지 방법이 더 있겠네요. 상단 height 지정값을 0 으로 잡고, width 값을 100% 로 출력시킨후 짜르는 방법도 있고, 다양하네요 ㅠㅠ

주소복사
답변의 댓글

DSLOVE님의 답변

구글링해보니 css 로 이미지 제어하는 좋은 포스팅이 있어서 같이 남겨봅니다.

https://webdir.tistory.com/487

주소복사
답변의 댓글
카멜리아님의 댓글
안녕하세요, DSLOVE님. 진심으로 답변 감사드립니다.
말씀해주신 방법대로 CSS를 사용하여 이미지 크기를 맞춰보려고 했지만,
CSS로는 해결이 나지 않는 것 같습니다.

개발자 도구를 사용하여 봤을 때 캡처화면처럼,
원본 이미지사이즈 (400*400) 이정도라면 개발자 도구에는 이미지 자체에 사이즈가 제가 지정한 사이즈로 먹고 있어 그런듯합니다.
혹시 이 부분에 대해 알고계신다면 조언해주실 수 있으실까요? (사진은 밑에 댓글로 따로 첨부하겠습니다 :-) )

DSLOVE님의 답변

작업된 url 한번 보여주세요~

주소복사
답변의 댓글
DSLOVE님의 댓글
지금 봤는데요.

이벤트 알리미라는 게시판 자체가 관리자만 관리하는 곳이자나요,
이런 경우는 올리는 이미지 사이즈를 통일하는걸로 해결보시는게 가장 좋겠네요~

우선 원본사이즈가 380*280 으로 고정된것을 더 늘리셔야 합니다.
원본사이즈 출력 사이즈를 계속 조절해가며 작업하다보면 어느정도 만족되는 중간값이 나오거든요. 이 값이 나올때까지 좀 반복작업을 해야합니다.
중간값이 나오면 이미지를 오버사이징해서 중간으로 짜르는 작업을 하던지해서 꽉 채우게 만들어야합니다.
이미지를 살펴보니, 알림의 용도로 이미지를 제작해서 올리는거 같으시니, 정확히 기준을 잡아서 제작을 하면 가능하실거 같은데요 ^^

자세한건 저도 FTP 접속해서 작업을 하면서 반복작업을 해봐야합니다 ㅠㅠ

카멜리아님의 답변

833465004_1596165279.1905.png

주소복사
답변의 댓글
카멜리아님의 댓글
dslove님 매번 댓글 정말 감사합니다!
천사별님의 댓글링크처럼 해보았는데도 그대로네요,,
제가 다시 달아둔 사진 댓글처럼 빨간 박스처럼 사진들이 가득 차기를 원하는데, 이부분에 대해 아시는 부분이 있으시다면 조언 부탁드릴게요ㅠㅠ
답변을 작성하시기 전에 로그인 해주세요.
전체 41,764
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

진행중 포인트경매

  1. 참여9 회 시작20.08.05 04:15 종료20.08.12 04:15
  2. 참여17 회 시작20.08.04 00:57 종료20.08.11 00:57

(주)에스아이알소프트 (06212) 서울시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT