포트폴리오 부분을 구현하기 위해서는 다양한 라이브러리와 많은 양의 코딩이 필요 합니다.
- Masonry: 벽돌 레이아웃 효과
- imagesLoaded: 이미지 로딩 후 masonry layout reloaded
이 밖에도 css, php 도 추가 해야 하는 등등 많은 행복한 일들이 있으니차근찬근 하나씩 구현해 보도록 하게습니다.
- 라이브러리 다운로드 및 functions.php 파일이 스크립트 등록
Masonry, imagesLoaded 사이트에 방문해서 압축 파일을 다운받고 해제 후에 폴더 전체를 zeein-yellw > assets > 폴더에 저장을 합니다.
그리고 functions.php 파일에 두개의 스크립트 파일을 추가 하겠습니다.
functions.php
// enquire.js-master
wp_enqueue_script( 'zeein-enquire', get_stylesheet_directory_uri() . '/assets/enquire.js-master/dist/enquire.min.js', array(), 'v2.1.6', true );
// masonry-master
wp_enqueue_script( 'zeein-masonry.pkgd.min', get_stylesheet_directory_uri() . '/assets/masonry-master/dist/masonry.pkgd.min.js', array(), 'v4.2.0', true );
//imagesloaded-master
wp_enqueue_script( 'zeein-imagesloaded.pkgd.min', get_stylesheet_directory_uri() . '/assets/imagesloaded-master/imagesloaded.pkgd.min.js', array(), 'v4.1.3', true );
// custom
wp_enqueue_script( 'zeein-custom.js', get_stylesheet_directory_uri() . '/assets/js/custom.js', array(), 'v1.0', true );
기존의 내용중 enquire.js 와 custom.js 파일 사이에 masonry, imagesloaded 스크립트를 추가 해 줍니다.
index.php파일의 내용중 about us 세션 이후에 portfolio 관련해서 내용을 추가 하도록 하겠습니다
index.php
<!-- portfolio -->
<section id="section_3" class="portfolio">
<div class="container">
<div class="row">
<div class="col-12">
<h4 class="under-bar text-center mb-5" >ABOUT US</h4>
</div>
</div>
<div class="row">
<div class="col-12 px-0">
<div class="grid ajax-portfolio">
<div class="grid-sizer"></div>
<?php
$paged = 1;
$args = array(
'post_type' => 'portfolio',
'orderby' => 'date',
'order' => 'DESC',
'posts_per_page' => 6,
'post_status' => 'publish',
'paged' => $paged,
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) :
while( $the_query->have_posts() ) : $the_query->the_post();
$img = wp_get_attachment_image_src( get_post_thumbnail_id( $the_query->ID ), 'large' );
$fullImg = wp_get_attachment_image_src( get_post_thumbnail_id( $the_query->ID ), 'full' );
?>
<div class="grid-item">
<div class="portfolio-wrap">
<figure>
<img src="<?php echo $img[0]; ?>" alt="portfolio">
<div class="over-wrap-bg">
<div class="over-wrap">
<?php
$posts = get_field('crew');
if ( $posts ) :?>
<ul class="crew-wrap">
<?php foreach( $posts as $p): ?>
<?php
$img_crew = wp_get_attachment_image_src( get_post_thumbnail_id( $p->ID ), 'thumbnail' );
?>
<li><img src="<?php echo $img_crew[0]; ?>" alt="crew"></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<div class="meta-wrap">
<?php
if ( get_the_terms( $the_query->ID, 'portfolio_tag' ) ) {
echo '
<div class="tag-wrap"><i class="demo-icon icon-tag"></i> ' . strip_tags(get_the_term_list($the_query->ID, 'portfolio_tag', '', ' , ')) . '</div>';
}
if ( $location = get_field('location') ) {
echo '<div class="location-wrap"><i class="demo-icon icon-location-circled"></i> '.$location.'</div>';
}
?>
<a class="show-popup" href="<?php echo $fullImg[0]; ?>">Detail Image</a>
</div>
</div><!-- .over-wrap -->
</div><!-- .over-wrap-bg -->
</figure>
<div class="desc-wrap">
<?php
the_title('<h4 class="title">', '</h4>');
if ( $getTheContent = get_the_content() ) :
echo '
<hr>
<div class="content-wrap">
'.$getTheContent.'
</div>';
endif;
?>
</div>
</div>
</div><!-- .grid-item -->
<?php
endwhile; wp_reset_postdata();
endif;
?>
</div><!-- .grid .ajax-portfolio -->
</div><!-- .col-12 -->
</div><!-- .row -->
</div>
</section>
</main><!-- #main.site-main -->
</div><!-- #prmary.content-area -->
<?php get_footer(); ?>
그리고 masonry 사이트의 문서를 참고 해 보면 https://masonry.desandro.com/layout.html#imagesloaded 부분을 참고 해서 assets > js > custom.js 파일을 수정합니다.
custom.js
// init Masonry
var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});
function initMasonry() {
if ( $('.grid').length ) {
$grid.imagesLoaded().progress( function() {
$grid.masonry();
});
}
}
$( document ).ready(function() {
initSlick();
initMasonry();
});
마지막으로 main.css 에 스타일을 입력해 줍니다.
main.css
/* portfolio */
/* portfolio-masonry */
.grid-sizer,
.grid-item { width: 33.33333%; }
.portfolio-wrap {
position: relative;
overflow: hidden;
color: #1D1D1D;
margin: 10px;
background-color: white;
box-shadow: 0 5px 10px rgba(50, 50, 50, 0.3); }
.portfolio-wrap hr {
margin: 10px 0;
background-color: #F2F2F2; }
.portfolio-wrap figure {
position: relative;
margin: 0;
overflow: hidden; }
.portfolio-wrap figure > img {
transform: scale(1);
transform-origin: center top;
transition: all 0.2s ease-in-out; }
.portfolio-wrap:active figure > img,
.portfolio-wrap:hover figure > img {
transform: scale(1.2);
opacity: 1; }
.portfolio-wrap figure .over-wrap-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: white;
background-color: rgba(0, 0, 0, 0.9);
transform: translateY(-100%);
transition: all 0.22s ease-in-out; }
.portfolio-wrap:active figure .over-wrap-bg,
.portfolio-wrap:hover figure .over-wrap-bg {
transform: translateY(0); }
.portfolio-wrap figure .over-wrap-bg .over-wrap {
position: relative;
font-size: 0.75rem;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
.portfolio-wrap figure .over-wrap-bg .over-wrap .show-popup {
margin-top: 0.4rem;
text-decoration: none;
color: black;
background-color: #FBD04B;
padding: 0 0.8rem;
border-radius: 20px;
font-weight: 600;
outline: none;
display: inline-block;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8); }
.portfolio-wrap figure .over-wrap-bg .over-wrap ul.crew-wrap {
position: relative;
margin: 0;
padding: 0;
list-style: none;
display: inline-block; }
.portfolio-wrap figure .over-wrap-bg .over-wrap ul.crew-wrap li {
float: left; }
.portfolio-wrap figure .over-wrap-bg .over-wrap ul.crew-wrap li img {
width: 50px;
margin: 0 5px;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.4); }
.portfolio-wrap figure .over-wrap-bg .over-wrap .meta-wrap { }
.portfolio-wrap figure .over-wrap-bg .over-wrap .meta-wrap i {
color: #FBD04B; }
.portfolio-wrap .desc-wrap {
padding: 1rem; }
.portfolio-wrap .desc-wrap .title {
font-size: 1.2rem;
color: black; }
.portfolio-wrap .desc-wrap .content-wrap {
font-size: 0.875rem; }
여기까지 진행하면 우선 Masonry, imagesLoader 기능이 제대로 작동되어 1차적인 포트폴리오 작업은 끝났습니다.
이후에는 infinity loading 기능을 포트폴리오에 붙히는 기능을 진행하겠습니다.
Site link