코스모스팜 스레드
kboard 스킨 퍼스트 뉴스피드 스킨 list 페이지를 masonry 레이아웃 형식으로 변경 하려 합니다.
1. 정확한 제품 또는 플러그인 이름
2. 상세 내용
안녕하세요.
kboard 스킨 퍼스트 뉴스피드 스킨 list 페이지를 masonry 레이아웃 형식으로 변경 하려 합니다.
2열로 핀터레스트처럼 리스트를 수정하고 싶습니다.
php 에서 수정을 했는데 적용이 잘 안되는것 같아요.
css는 아직 적용을 안했습니다. 한번 적용 해봤는데 1줄만 출력이 되더라고요.
적용이 된건지 확인이 안되네요.
php에 저 코드 삽입만 한 상태입니다.
어떻게 적용을 해야할지 알려주시면 감사하겠습니다.
3. 확인 가능한 상세 페이지 주소
수정한 뉴스피드 list 페이지 : https://www.koalaa.kr/community-main-page/anh-video-ca-nhan/
참고한 masonry 페이지 : https://sub0709.tistory.com/127
4. 수정한 코드 내역 (있다면)
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script>
var msnry = new Masonry( '.kboard-list', {
itemSelector: '.kboard-first-news-feed-item kboard-list-item',
// columnWidth: 200
columnWidth: '.grid-sizer',
percentPosition: true, gutter : 20,
});
imagesLoaded( '.kboard-list' ).on( 'progress', function() {
msnry.layout();});
</script>
-
스레드봇 (31098 Point)ㆍ2022.08.11 13:14
안녕하세요~^^
아래 공식 홈페이지에서 masonry.pkgd.min.js 파일을 내려받으신 후
ftp로 접속하셔서 사용하시는 스킨 폴더에 masonry.pkgd.min.js 파일을 추가하시고
사용하시는 스킨 list.php 파일에 아래코드를 참고하셔서 작성해 보시겠어요?
<?php wp_enqueue_script('kboard-modern-gallery-btf-masonry-script', "{$skin_path}/masonry.pkgd.min.js", array(), KBOARD_VERSION, true)?> <script> jQuery(document).ready(function(){ jQuery('.kboard-list').masonry({ itemSelector: '.kboard-list-item', gutter: 10, // columnWidth: 290, // horizontalOrder: true }); }); </script>자세한 내용은 아래 남겨드린 masonry 공식 페이지에서 확인해보시겠어요?
고맙습니다.
-
이학준 (51 Point)ㆍ2022.08.11 16:40
답변 감사합니다.
그런데 현재 알려주신 상태로 적용을 해봤습니다.
그런데 하나의 게시물만 보이고 다른 게시물은 보이지가 않네요.
https://imgur.com/a/czUezp9
css 상의
.kboard-list{ position: relative; height: 2491.91px; } .kboard-first-news-feed-item kboard-list-item{ position: absolute; left:0px; top:0px; }의 상태입니다. position 이나 height: 2491.91px; 의 경우 제가 설정한게 아닌데 masonry 에서 자동 설정된 값인가요?
2열로 바꾸기 위해 css 싸이즈 값을
.kboard-list 의 경우 width: 50%; .kboard-list-item 의 경우 width: 100%;로 설정하려고 합니다.
혹시 css 도움을 주실 수 있을까요?? ㅠㅠ
-
스레드봇 (31098 Point)ㆍ2022.08.16 09:32
masonry는 html과 css에 기반하여
넓이와 높이를 체크, position을 absolute로 변경하여
레이아웃을 벽돌 쌓듯 변경해주는 라이브러리 입니다.
인라인 형태로 입력된 css는 masonry 라이브러리가 동작한 것이 맞습니다.
2열로 변경하고자 하시면 css를 아래와 같이 하시면 될 듯 합니다.
#kboard-koalaa-news-feed-origin-list4 .kboard-list .kboard-first-news-feed-item { width: 50% }추가로 남겨주신 링크에 접속하여 표시되는 html만 봤을 때는
list.php 파일을 수정하시다 div를 닫지 않으시거나 어떤 태그를 닫지 않으신 듯 합니다.
list-item 안에 list-item이 또 표시되고 있습니다.
의도하신 것이 아니라면 확인해보시는 것을 권장드립니다.
고맙습니다.
