안녕하세요.
ocean-gallery 에 썸네일을 1줄에 2개씩 노출하고 싶습니다.
원래 한줄에 4개의 썸네일이 나왔는데
게시판을 읽어보고 참조하여
#kboard-ocean-gallery-list .kboard-list .kboard-gallery-item {width: 45% !important;} 을 주었더니
위 주소의 이미지처럼 되었습니다..
css로 억지로 값을 조정하는것이 아니라 모듈이 바뀌도록 다른 방식으로 수치를 바꿔줘야할 것 같은데
잘 모르겠습니다..
답 부탁드리겠습니다..
감사합니다.
잘적용 되었습니다~!
감사합니다!!
안녕하세요.
모바일에서만 높이를 별도로 설정하시려면
미디어 쿼리로 적용해보시겠어요?
아래의 CSS 코드도 추가해서 확인해보세요.
@media screen and (max-width: 600px) {
#kboard-ocean-gallery-list .kboard-list .kboard-gallery-thumbnail img { height: 150px; }
}
위의 코드에서 픽셀 크기는 적절히 조절해보세요.
만약, 스크립트로 적용하시려면
어떤 코드를 추가하셨는지 알려주시면 도움 드릴 방법을 찾아보겠습니다.
고맙습니다.
감사합니다!
상세하고, 정확한 빠른 답변 주셔서 잘 해결하였습니다.
최신 업데이트 되어 있는데 주신 function.php 코드로는 안되어서
$content->getThumbnail(220, 155)
=> 400, 300 으로 바꿔서 잘 수정 되었습니다.
그런데..ㅠㅠ
모바일이.. 반응형이거든요.. 미디어쿼리를 따로 잡아주려다가 스크립트로 했는데, css로 하는 쪽은
좋은 방법 같지가 않아서 다시 질문 드려요.
반응형에서는 가로는 잘 들어 가는데 세로가 300px을 유지해서 길쭉해지는 것 같은데
어떻게 수정해야할지 부탁드릴게요..
감사합니다.
안녕하세요~^^
KBoard 오션 갤러리 스킨 게시글 목록 페이지에서
한 줄에 2개씩 표시하시려면
워드프레스 관리자 -> 외모(테마 디자인) -> 사용자 정의하기 -> CSS 입력 필드에
아래의 코드를 추가해보시겠어요?
#kboard-ocean-gallery-list .kboard-list .kboard-gallery-item { padding: 0 1% 15px 0; width: 49%; box-sizing: border-box; }
#kboard-ocean-gallery-list .kboard-list .kboard-gallery-thumbnail { width: 100%; }
#kboard-ocean-gallery-list .kboard-list .kboard-gallery-thumbnail img { width: 100%; height: 250px; }
#kboard-ocean-gallery-list .kboard-list .kboard-gallery-thumbnail .kboard-gallery-foreground { width: 100%; }
#kboard-ocean-gallery-list .kboard-list .kboard-no-image { height: 250px; line-height: 250px; }
위의 코드에서 height: 250px; 부분과 line-height: 250px; 부분의 픽셀 값은 적절히 조절해보세요.
위의 코드 적용 후 이미지가 흐릿하게 표시된다면
실제 불러오는 이미지 사이즈를 늘려보시겠어요?
FTP로 접속해서 /wp-content/plugins/kboard/skin/사용중인스킨/list.php 파일에
아래의 코드를 모두 찾아보시겠어요? (스킨에 따라 숫자는 다를 수도 있습니다.)
$content->getThumbnail(220, 155)
위의 코드에서 숫자는 가로 세로 픽셀 크기 입니다.
적절히 늘려서 확인해보세요.
최신 버전의 KBoard 플러그인을 사용 중이시라면
스킨 파일을 수정하지 마시고 테마 쪽 functions.php 파일에 코드를 추가해보시겠어요?
워드프레스 관리자 -> 외모(테마 디자인) -> 테마 편집기 페이지에서 functions.php 파일 하단에
아래의 코드를 추가해보시겠어요?
add_filter('kboard_content_get_thumbnail_size','my_kboard_content_get_thumbnail_size', 10, 2);
function my_kboard_content_get_thumbnail_size($size, $content){
$board = $content->getBoard();
if($board->id == '1'){ // 실제 게시판 id로 적용해주세요.
$size = array('width'=>'220', 'height'=>'155');
}
return $size;
}
위의 코드에서 $board->id == '1' 부분은 실제 게시판 id로 적용해주세요.
220 부분과 155 부분은 가로 세로 픽셀 크기입니다.
적절히 조절해서 확인해보세요.
고맙습니다.