안녕하세요
언제나 사용이 즐거운 Kboard 를 잘 사용하고 있습니다.
워드프레스 게시판 KBoard 퓨어 갤러리 스킨에 관련된 문의입니다.
http://severancetu.or.kr/sympathize/
링크에서 보여지는 썸네일을 크기글 변경하고 싶은데요.
썸네일을 이미지의 비율을 2:3 으로 하고 싶은데요
list.js 에서
아래 처럼 바꾸고
86줄 var item_width = jQuery('.kboard-list-item', this).width();
jQuery('.kboard-list-item .kboard-list-thumbnail', this).css({'height':item_width+'px'});
});
}
아래처럼 바꾸니까 이미지가 넘쳐나 버리는 데요
jQuery('.kboard-list-item .kboard-list-thumbnail', this).css({'height':(item_width*1.3)+'px'});
2:3 정도 원본 비율을 유지하려면 어찌 하는지 문의드려요
lsit.php 에서 getThumbnail(500, 500) 을 getThumbnail(344, 500) 로 바꾸고
<!-- 리스트 시작 -->
<ul class="kboard-pure-gallery-list">
<?php while($content = $list->hasNextNotice()):?>
<li class="kboard-list-item<?php if($content->uid == kboard_uid()):?> kboard-list-selected<?php endif?>">
<a href="<?php echo $url->getDocumentURLWithUID($content->uid)?>#kboard-document">
<div class="kboard-list-thumbnail">
<?php if($content->getThumbnail(344, 500)):?>
<div class="kboard-list-thumbnail-child" style="background-image:url(<?php echo $content->getThumbnail(344, 500)?>)"></div>
<?php endif?>
<?php if(isset($content->attach->over_image)):?>
<div class="kboard-list-thumbnail-over-background"></div>
<div class="kboard-list-thumbnail-over-image"><img src="<?php echo site_url($content->attach->over_image[0])?>" alt=""></div>
<?php endif?>
</div>
<div class="kboard-list-notice"><span class="kboard-pure-gallery-new-notify"><?php echo __('Notice', 'kboard')?></span></div>
<div class="kboard-list-title"><div class="kboard-pure-gallery-cut-strings">
<?php if($content->secret):?><img src="<?php echo $skin_path?>/images/icon-lock.png" class="kboard-icon-lock" alt="<?php echo __('Secret', 'kboard')?>"><?php endif?>
<?php echo $content->title?>
</div></div>
<div class="kboard-list-user"><?php echo $content->getUserDisplay()?></div>
</a>
</li>
<?php endwhile?>
<?php while($content = $list->hasNext()):?>
<li class="kboard-list-item<?php if($content->uid == kboard_uid()):?> kboard-list-selected<?php endif?>">
<a href="<?php echo $url->getDocumentURLWithUID($content->uid)?>#kboard-document">
<div class="kboard-list-thumbnail">
<?php if($content->getThumbnail(344, 500)):?>
<div class="kboard-list-thumbnail-child" style="background-image:url(<?php echo $content->getThumbnail(344, 500)?>)"></div>
<?php endif?>
<?php if(isset($content->attach->over_image)):?>
<div class="kboard-list-thumbnail-over-background"></div>
<div class="kboard-list-thumbnail-over-image"><img src="<?php echo site_url($content->attach->over_image[0])?>" alt=""></div>
<?php endif?>
</div>
<div class="kboard-list-new"><?php if($content->isNew()):?><span class="kboard-pure-gallery-new-notify">New</span><?php endif?></div>
<div class="kboard-list-title"><div class="kboard-pure-gallery-cut-strings">
<?php if($content->secret):?><img src="<?php echo $skin_path?>/images/icon-lock.png" class="kboard-icon-lock" alt="<?php echo __('Secret', 'kboard')?>"><?php endif?>
<?php echo $content->title?>
</div></div>
<div class="kboard-list-user"><?php echo $content->getUserDisplay()?></div>
</a>
</li>
<?php endwhile?>
</ul>
<!-- 리스트 끝 -->
style.css 에서
background-size를 contain 으로 background-repear 를 no-repeat 로 해서 맞추어 봤습니다만,
kboard-pure-gallery-list .kboard-pure-gallery-list .kboard-list-item .kboard-list-thumbnail .kboard-list-thumbnail-child { height: 100%; background-size:contain; background-repeat: no-repeat; background-position: center; transition-duration: 0.5s; padding-bottom: -15px;}
뭔가 이미지의 비율과 딱 맞아 떨어지지는 않습니다.
그냥 어떻게 바꾸나요 ? 하고 묻는건 예의가 아닌 것 같아, 나름 찾아보고
조언을 조금만 해주시면 하고 바라면서 글을 남겨 봅니다.
감사합니다.
안녕하세요~^^
KBoard 퓨어 갤러리 스킨에서 썸네일 이미지를
2:3 비율로 적용하시려면
올려주신 코드 중 아래의 코드를
jQuery('.kboard-list-item .kboard-list-thumbnail', this).css({'height':(item_width*1.3)+'px'});
아래의 코드로 교체해보세요.
jQuery('.kboard-list-item .kboard-list-thumbnail', this).css({'height':(item_width*1.5)+'px'});
2:3 비율은 너비가 200일 때 높이가 300으로 적용되기 때문에
1.3이 아닌 1.5를 곱해주셔야 합니다.
getThumbnail 메소드 쪽의 344 부분의 수치도 333으로 적용해보시겠어요?
원하는 비율이 아니라면 수치도 적절히 조절해보세요.
고맙습니다.