안녕하세요 Kboard와 코스모스팜을 이용하여 사이트를 구축하고 있습니다.
썸네일 테마에서 게시글을 작성할 때, 썸네일 사진을 첨부하도록 되어있는데요,
1. 혹시 사용자가 썸네일을 첨부하지 않았을 시,
기본으로 썸네일을 출력하는 방법이 있는지 궁금합니다.(숏코드나 기타 방법)
2. 사용자가 썸네일 사진을 첨부할 때, 크기조절을 못해 썸네일이 깨지는 경우가 있습니다.
혹시 사이즈 조절이 가능한 방안이 있는지 궁금합니다.
안녕하세요~^^
KBoard 플러그인의 Font Awesome 기능을 활성화한다면
Thumbnail 스킨에서 썸네일을 등록하지 않았을 때
기본 아이콘을 표시하고 있습니다.
워드프레스 관리자 -> KBoard -> 대시보드 페이지에서
Font Awesome 기능을 활성화해보시겠어요?
아이콘이 아닌 원하시는 이미지로 적용하시려면
파일 수정 및 이미지 업로드를 해주셔야 합니다.
1. FTP로 접속해서 /wp-content/plugins/kboard/skin/사용중인스킨/images 폴더에
default-pc.png 그리고 default-mobile.png 이미지를 먼저 넣어주세요.
2. /wp-content/plugins/kboard/skin/사용중인스킨/list.php 파일에서
PC 화면에 보이는 썸네일 코드를 수정해주세요.
<?php if($content->getThumbnail(120, 90)):?><img src="<?php echo $content->getThumbnail(120, 90)?>" alt="<?php echo esc_attr($content->title)?>"><?php else:?><i class="icon-picture"></i><?php endif?>
위 코드를 찾아서 아래 처럼 <i> 태그를 <img> 태그로 교체해주세요.
<?php if($content->getThumbnail(120, 90)):?><img src="<?php echo $content->getThumbnail(120, 90)?>" alt="<?php echo esc_attr($content->title)?>"><?php else:?><img src="<?php echo $skin_path?>/images/default-pc.png" alt=""><?php endif?>
모바일 화면에 보이는 썸네일 코드를 수정해주세요.
<?php if($content->getThumbnail(96, 70)):?>
<div class="kboard-mobile-contents">
<img src="<?php echo $content->getThumbnail(96, 70)?>" alt="<?php echo esc_attr($content->title)?>" class="contents-thumbnail">
</div>
<?php endif?>
위 코드를 찾아서 아래 코드로 교체해주세요.
<?php if($content->getThumbnail(96, 70)):?>
<div class="kboard-mobile-contents">
<img src="<?php echo $content->getThumbnail(96, 70)?>" alt="<?php echo esc_attr($content->title)?>" class="contents-thumbnail">
</div>
<?php else:?>
<div class="kboard-mobile-contents">
<img src="<?php echo $skin_path?>/images/default-mobile.png" alt="<?php echo esc_attr($content->title)?>" class="contents-thumbnail">
</div>
<?php endif?>
3. list.php 파일과 동일한 방법으로 reply-template.php 파일도 수정해주세요.
4. 로딩되는 이미지 크기를 변경하시려면 아래와 같은 코드에서 수치를 적절히 변경해주세요.
$content->getThumbnail(120, 90)
$content->getThumbnail(96, 70)
5. 썸네일 크기를 변경하시려면 CSS 코드도 수정을 해야 할 듯합니다.
크롬 브라우저의 개발자 도구(F12키)를 사용하시면 CSS 속성을 쉽게 찾고 테스트해보실 수 있습니다.
고맙습니다.