Last active
September 2, 2022 08:02
-
-
Save hmowais/30ee8b39a7449dd73df537a8007f205e to your computer and use it in GitHub Desktop.
FLK Portfolio Template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| function scroll_scripts() { | |
| if ( is_page_template( 'template-projects.php' ) ) { ?> | |
| <script> | |
| jQuery( document ).ready(function($) { | |
| jQuery(this).scrollTop(0); | |
| jQuery( "html" ).addClass( "noScroll" ); | |
| $('.casestudy').click(function () { | |
| $("html, body").animate({ scrollTop: "0" }, 500); | |
| }); | |
| }); | |
| </script> | |
| <?php } | |
| } | |
| add_action( 'wp_footer', 'scroll_scripts' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /***** | |
| Template Name: Projects | |
| *********/ | |
| get_header(); | |
| ?> | |
| <style> | |
| .noScroll { | |
| overflow:hidden; | |
| } | |
| .main_title { | |
| font-family: 'Gotham'; | |
| font-style: normal; | |
| font-weight: 700; | |
| font-size: 128px; | |
| line-height: 120%; | |
| letter-spacing: -0.04em; | |
| } | |
| .sub_title { | |
| font-family: 'Gotham'; | |
| font-style: normal; | |
| font-weight: 700; | |
| font-size: 66px; | |
| line-height: 120%; | |
| letter-spacing: -0.06em; | |
| } | |
| .fleek_red { | |
| color: #FF0052; | |
| } | |
| #titlebar.hideit { | |
| display:none!important; | |
| } | |
| #titlebar .container { | |
| height:100vh; | |
| align-items: center; | |
| justify-content: center; | |
| display: flex; | |
| flex-wrap: wrap; | |
| padding-top: 100px; | |
| padding-bottom: 100px; | |
| } | |
| #portfolio .tabs-left { | |
| display: flex; | |
| justify-content: space-between; | |
| flex-direction: row-reverse; | |
| align-items: center; | |
| padding: 0px 0px 20px; | |
| margin: 0; | |
| } | |
| #portfolio-tabs { | |
| border-bottom: 1px solid #FF0052!important; | |
| transform: rotate(-90deg); | |
| position: absolute; | |
| left: -10%; | |
| width: auto; | |
| top: 42%; | |
| } | |
| #portfolio { | |
| height: 100vh; | |
| position: relative; | |
| padding-top: 60px; | |
| padding-bottom: 60px!important; | |
| } | |
| #portfolio .tab-content { | |
| width:100%; | |
| margin-left:100px; | |
| } | |
| #portfolio .tabs-left>li:last-child>button { | |
| padding-left:0; | |
| outline:none; | |
| } | |
| #portfolio .tabs-left>li:last-child>button:hover { | |
| color:#FF0052!important | |
| } | |
| #portfolio .tabs-left>li:first-child>a { | |
| padding-right:0; | |
| } | |
| #portfolio .tabs-left>li:first-child>a:after { | |
| left:30px; | |
| } | |
| #portfolio .tabs-left>li:last-child>a:after { | |
| right: 30px; | |
| } | |
| .tabs-left>li { | |
| float: none; | |
| margin-bottom: 2px; | |
| margin-right: -1px; | |
| padding: 0; | |
| } | |
| .tabs-left>li>a.active, | |
| .tabs-left>li>a:hover, | |
| .tabs-left>li>a:focus { | |
| color:#FF0052!important | |
| } | |
| #portfolio-tabs:after { | |
| content: ''; | |
| width: 55px; | |
| height: 9px; | |
| background: #FF0052; | |
| position: absolute; | |
| bottom: -5px; | |
| right: -5px; | |
| border-radius: 10px; | |
| transform: translatex(-50%); | |
| transition: all 0.3s; | |
| transition-delay: 0.2s; | |
| } | |
| #portfolio-tabs.website:after { | |
| right: -5px; | |
| } | |
| #portfolio-tabs.branding:after { | |
| right: 15.5%; | |
| } | |
| #portfolio-tabs.social:after { | |
| right: 30.5%; | |
| } | |
| #portfolio-tabs.mobile-apps:after { | |
| right: 47%; | |
| } | |
| #portfolio-tabs.e-commerce:after { | |
| right: 67%; | |
| } | |
| #portfolio-tabs.casestudy:after { | |
| right: 87%; | |
| } | |
| .tabs-left>li>a { | |
| font-family: 'gothambold'; | |
| font-style: normal; | |
| font-weight: 700; | |
| font-size: 18px; | |
| line-height: 120%; | |
| letter-spacing: -0.01em; | |
| color: #EBEBEB; | |
| padding: 0 30px; | |
| position: relative; | |
| } | |
| .tabs-left>li>a:hover img { | |
| background: #000; | |
| } | |
| .tabs-left>li>a.active img { | |
| background: #000; | |
| } | |
| .tabs-left>li>a img { | |
| position: absolute; | |
| background: #EBEBEB; | |
| right: 0px; | |
| left: 0; | |
| margin: 0 auto; | |
| bottom: -90px; | |
| padding: 12px 10px; | |
| border-radius: 20px; | |
| transform: rotate(90deg); | |
| width: 48px; | |
| height: 48px; | |
| } | |
| .tabs-left>li:first-child>a img { | |
| right: -30px; | |
| } | |
| .tabs-left>li:last-child>a img { | |
| left: -30px; | |
| } | |
| .mainImage { | |
| width: 100%; | |
| height: 500px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding-top:20px; | |
| } | |
| .portfolioThumbnails { | |
| margin-top: 50px; | |
| } | |
| .portfolioThumbnails .swiper-slide { | |
| height: 150px; | |
| overflow: hidden; | |
| border-radius: 20px | |
| } | |
| .swiper-slide { | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .portfolioThumbnails { | |
| height: 20%; | |
| box-sizing: border-box; | |
| padding: 10px 20px; | |
| } | |
| .portfolioThumbnails .swiper-slide { | |
| width: 25%; | |
| height: 100%; | |
| filter: grayscale(100%); | |
| } | |
| .portfolioThumbnails .swiper-slide-thumb-active { | |
| opacity: 1; | |
| filter: grayscale(0%); | |
| } | |
| .portfolioThumbnails .swiper-slide img { | |
| width: 240px; | |
| height: 150px; | |
| object-fit: cover; | |
| } | |
| .MacBook { | |
| position: relative; | |
| top: 40%; | |
| width: 100%; | |
| height: 65%; | |
| opacity: 1; | |
| z-index: 0; | |
| -webkit-transition: all .3s ease; | |
| transition: all .3s ease; | |
| } | |
| .MacFrame { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 100%; | |
| height: auto; | |
| -webkit-transform: translate(-50%, -50%); | |
| transform: translate(-50%, -50%); | |
| z-index: 1; | |
| } | |
| #website .MacFolio, | |
| #e-commerce .MacFolio { | |
| overflow-x: hidden; | |
| overflow-y: scroll; | |
| } | |
| .MacFolio { | |
| overflow: hidden; | |
| z-index: 1; | |
| width: 617px; | |
| position: absolute; | |
| top: -112px; | |
| left: -5px; | |
| right: 0; | |
| margin: 0 auto; | |
| height: 390px; | |
| } | |
| .MacFolio img { | |
| width:100%; | |
| } | |
| /* width */ | |
| #website .MacFolio::-webkit-scrollbar, | |
| #e-commerce .MacFolio::-webkit-scrollbar { | |
| width: 10px; | |
| } | |
| /* Track */ | |
| #website .MacFolio::-webkit-scrollbar-track, | |
| #e-commerce .MacFolio::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| /* Handle */ | |
| #website .MacFolio::-webkit-scrollbar-thumb, | |
| #e-commerce .MacFolio::-webkit-scrollbar-thumb { | |
| background: #888; | |
| } | |
| /* Handle on hover */ | |
| #website .MacFolio::-webkit-scrollbar-thumb:hover, | |
| #e-commerce .MacFolio::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| .portfolio_term { | |
| font-family: 'gotham'; | |
| font-style: normal; | |
| font-weight: 400; | |
| font-size: 16px; | |
| line-height: 134%; | |
| display: flex; | |
| align-items: center; | |
| letter-spacing: 0.01em; | |
| color: #1A1A1C; | |
| } | |
| .portfolio_title { | |
| font-family: 'gothambold'; | |
| font-style: normal; | |
| font-weight: 700; | |
| font-size: 32px; | |
| line-height: 120%; | |
| letter-spacing: -0.02em; | |
| color: #FF0052; | |
| margin-bottom:30px; | |
| } | |
| .portfolio_content { | |
| font-family: 'gothammedium'; | |
| font-style: normal; | |
| font-weight: 500; | |
| font-size: 16px; | |
| line-height: 134%; | |
| letter-spacing: 0.01em; | |
| color: #808080; | |
| } | |
| .portfolio_link { | |
| font-family: 'gothamblack'; | |
| font-style: normal; | |
| font-weight: 700; | |
| font-size: 18px; | |
| line-height: 120%; | |
| display: flex; | |
| align-items: center; | |
| letter-spacing: -0.01em; | |
| color: #1A1A1C; | |
| margin-top: 40px; | |
| outline: none; | |
| } | |
| .portfolio_link i { | |
| background: #FF0052; | |
| padding: 10px; | |
| border-radius: 100%; | |
| color: #fff; | |
| width: 44px; | |
| height: 44px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 20px; | |
| transform: rotate(-45deg); | |
| margin-left:10px; | |
| } | |
| .portfolio_left { | |
| max-height:330px; | |
| } | |
| .portfolio_content p { | |
| padding-left:0; | |
| } | |
| #website .mainImage:after, | |
| #e-commerce .mainImage:after { | |
| content: ''; | |
| background-image: url('http://199.250.201.124/~fleekbizr/wp-content/themes/fleekbiz/inc/images/Macbook-Air.png'); | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| background-repeat: no-repeat; | |
| background-position: 92% center; | |
| } | |
| /*body .swiper.mainImage .swiper-slide:not(.swiper-slide-active) {*/ | |
| /* opacity:0;*/ | |
| /* visibility:hidden;*/ | |
| /*}*/ | |
| #mobile-apps .mainImage .feature-image-2, | |
| #mobile-apps .mainImage .feature-image-3 { | |
| position:relative; | |
| } | |
| #mobile-apps .mainImage .feature-image-3:before { | |
| content: ''; | |
| background-image: url(http://199.250.201.124/~fleekbizr/wp-content/themes/fleekbiz/inc/images/iPhone-Landscape.png); | |
| width: 100%; | |
| bottom: -470px; | |
| background-repeat: no-repeat; | |
| background-position: 88% center; | |
| z-index: -2; | |
| height: 245px; | |
| background-size: contain; | |
| position: absolute; | |
| } | |
| #mobile-apps .mainImage .feature-image-2:before { | |
| content:''; | |
| background-image: url('http://199.250.201.124/~fleekbizr/wp-content/themes/fleekbiz/inc/images/iPhone-Portrait.png'); | |
| width: 100%; | |
| top: -20px; | |
| background-repeat: no-repeat; | |
| background-position: 92% center; | |
| background-size: contain; | |
| z-index: 2; | |
| height: 500px; | |
| position: absolute; | |
| } | |
| #mobile-apps .mainImage .feature-image-2 img { | |
| position: absolute; | |
| right: 60px; | |
| top: -2px; | |
| z-index: -1; | |
| width: 215px; | |
| height: 460px; | |
| } | |
| #mobile-apps .mainImage .feature-image-3 img { | |
| position: absolute; | |
| right: 60px; | |
| top: 241px; | |
| z-index: -3; | |
| width: 460px; | |
| height: 215px; | |
| } | |
| #mobile-apps .MacFolio { | |
| display:none!important; | |
| } | |
| #mobile-apps .MacBook { | |
| position: relative; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 1; | |
| z-index: 0; | |
| -webkit-transition: all .3s ease; | |
| transition: all .3s ease; | |
| min-height: 500px; | |
| } | |
| #social .mainImage { | |
| height: 550px; | |
| } | |
| #social .MacFolio { | |
| top: -150px; | |
| text-align: right; | |
| height: 550px; | |
| } | |
| #social .MacFolio img { | |
| width: 380px; | |
| height: 540px; | |
| } | |
| #branding > .mainImage:after { | |
| content: ''; | |
| background-image: url('http://199.250.201.124/~fleekbizr/wp-content/themes/fleekbiz/inc/images/iPadPro.png'); | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| background-repeat: no-repeat; | |
| background-position: 80% center; | |
| z-index: -1; | |
| } | |
| #branding .MacFolio { | |
| overflow: hidden; | |
| z-index: 1; | |
| width: 535px; | |
| position: absolute; | |
| top: -108px; | |
| left: 37px; | |
| right: 0; | |
| margin: 0 auto; | |
| height: 403px; | |
| } | |
| .iPadSlider { | |
| z-index:99; | |
| } | |
| .iPadSlider .swiper-button-next:after, | |
| .iPadSlider .swiper-button-prev:after { | |
| filter: grayscale(100%); | |
| font-size: 20px; | |
| } | |
| .Case_Studies { | |
| height:100vh; | |
| } | |
| #CaseStudiesSlider { | |
| justify-content: space-around; | |
| padding:0; | |
| position: relative; | |
| top: -110px; | |
| } | |
| #CaseStudiesSlider .swiper-slide { | |
| background-repeat: no-repeat!important; | |
| background-position: bottom right!important; | |
| background-size: contain!important; | |
| } | |
| #CaseStudiesSlider .swiper-wrapper:before { | |
| content:''; | |
| width:100%; | |
| height:100%; | |
| position:absolute; | |
| background-color:#FF0052; | |
| transition: all 2s ease; | |
| border-radius: 94px; | |
| transform:rotate(12deg) scale(0.3); | |
| opacity:0.1; | |
| z-index: -9; | |
| left: 0; | |
| right: 0; | |
| margin: 0 auto; | |
| top: 0; | |
| } | |
| #CaseStudiesSlider .swiper-wrapper.Case_Cover:before { | |
| top: 0%; | |
| width:100%; | |
| height:100%; | |
| transform:rotate(0deg) scale(2); | |
| border-radius: 0px; | |
| opacity:1; | |
| } | |
| #CaseStudiesSlider .swiper-slide:nth-child(2) { | |
| background-color:#1A1A1C; | |
| } | |
| #CaseStudiesSlider .swiper-slide:nth-child(3) { | |
| background-color:#ffffff; | |
| } | |
| #CaseStudiesSlider .swiper-slide:last-child { | |
| background-color:#1A1A1C; | |
| } | |
| #CaseStudiesSlider .swiper-slide > .container > .row { | |
| height:100vh; | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: flex-end; | |
| } | |
| #masthead { | |
| z-index: 10; | |
| position: relative; | |
| } | |
| .case_left { | |
| padding-bottom: 100px; | |
| } | |
| .case_left h1 { | |
| font-family: gothambold; | |
| font-size: 128px; | |
| line-height: 1.6em; | |
| margin: 0; | |
| } | |
| .case_left .slider_content { | |
| font-weight: 500; | |
| font-size: 16px; | |
| font-family: gothammedium; | |
| } | |
| #CaseStudiesSlider .swiper-slide:first-child h1, | |
| #CaseStudiesSlider .swiper-slide:first-child .slider_content, | |
| #CaseStudiesSlider .swiper-slide:nth-child(2) h1, | |
| #CaseStudiesSlider .swiper-slide:nth-child(2) .slider_content, | |
| #CaseStudiesSlider .swiper-slide:last-child h1, | |
| #CaseStudiesSlider .swiper-slide:last-child .slider_content { | |
| color:#fff; | |
| } | |
| .view-study { | |
| position: absolute; | |
| right: 13%; | |
| bottom: 18%; | |
| font-family: gothammedium; | |
| font-style: normal; | |
| font-weight: 400; | |
| font-size: 36px; | |
| line-height: 1.4em; | |
| background: #FF0052; | |
| color: #FFFFFF; | |
| transform: rotate(-17deg); | |
| border: 3px solid #FFFFFF; | |
| border-radius: 90px; | |
| padding: 10px 20px; | |
| outline: none; | |
| } | |
| .view-study:hover { | |
| background:#1A1A1C; | |
| color:#fff; | |
| } | |
| #CaseStudiesSlider .swiper-slide:nth-child(even) .view-study { | |
| right: 11%; | |
| bottom: 15%; | |
| } | |
| #CaseStudiesSlider .swiper-pagination { | |
| right: unset; | |
| left: 13%; | |
| bottom: -1%; | |
| top: unset; | |
| } | |
| #CaseStudiesSlider .swiper-pagination-bullet.swiper-pagination-bullet-active { | |
| width: 10px; | |
| height: 38px; | |
| background: #FFCA3A; | |
| border-radius: 19px!important; | |
| opacity: 1; | |
| } | |
| #CaseStudiesSlider .swiper-pagination-bullet { | |
| width: 10px; | |
| height: 38px; | |
| background: #d1d1d2; | |
| border-radius: 19px!important; | |
| margin: 20px 0; | |
| } | |
| .casestudy button { | |
| font-family: 'gothambold'; | |
| font-style: normal; | |
| font-weight: 700; | |
| font-size: 18px; | |
| line-height: 120%; | |
| letter-spacing: -0.01em; | |
| color: #EBEBEB; | |
| padding: 0 30px; | |
| position: relative; | |
| background: transparent; | |
| border: 0; | |
| } | |
| .iPadSlider > .swiper-wrapper > .swiper-slide:nth-child(1) { | |
| -webkit-animation: slide 20000ms infinite 4000ms linear; | |
| -moz-animation: slide 20000ms infinite 4000ms linear; | |
| -ms-animation: slide 20000ms infinite 4000ms linear; | |
| -o-animation: slide 20000ms infinite 4000ms linear; | |
| animation: slide 20000ms infinite 4000ms linear; | |
| } | |
| .iPadSlider > .swiper-wrapper > .swiper-slide:nth-child(2) { | |
| -webkit-animation: slide 20000ms infinite 10000ms linear; | |
| -moz-animation: slide 20000ms infinite 10000ms linear; | |
| -ms-animation: slide 20000ms infinite 10000ms linear; | |
| -o-animation: slide 20000ms infinite 10000ms linear; | |
| animation: slide 20000ms infinite 10000ms linear; | |
| } | |
| .iPadSlider > .swiper-wrapper > .swiper-slide:nth-child(3) { | |
| -webkit-animation: slide 20000ms infinite 16000ms linear; | |
| -moz-animation: slide 20000ms infinite 16000ms linear; | |
| -ms-animation: slide 20000ms infinite 16000ms linear; | |
| -o-animation: slide 20000ms infinite 16000ms linear; | |
| animation: slide 20000ms infinite 16000ms linear; | |
| } | |
| .iPadSlider > .swiper-wrapper > .swiper-slide { | |
| -webkit-transition: none; | |
| -moz-transition: none; | |
| -ms-transition: none; | |
| -o-transition: none; | |
| transition: none; | |
| } | |
| .iPadSlider > .swiper-wrapper > .swiper-slide:nth-child(1), | |
| .iPadSlider > .swiper-wrapper > .swiper-slide:nth-child(2), | |
| .iPadSlider > .swiper-wrapper > .swiper-slide:nth-child(3) { | |
| opacity: 1; | |
| z-index: 2; | |
| } | |
| body.header-light #masthead { | |
| filter: brightness(0) invert(1); | |
| } | |
| @-webkit-keyframes slide { | |
| 0%, 100% { opacity: 0; } | |
| 10%, 40% { opacity: 1; z-index: 2; } | |
| 50%, 80% { opacity: 0; z-index: 2; } | |
| } | |
| @-moz-keyframes slide{ | |
| 0%, 100% { opacity: 0; } | |
| 15%, 50% { opacity: 1; z-index: 2; } | |
| 60%, 95% { opacity: 0; z-index: 2; } | |
| } | |
| @-ms-keyframes slide{ | |
| 0%, 100% { opacity: 0; } | |
| 15%, 50% { opacity: 1; z-index: 2; } | |
| 60%, 95% { opacity: 0; z-index: 2; } | |
| } | |
| @-o-keyframes slide{ | |
| 0%, 100% { opacity: 0; } | |
| 15%, 50% { opacity: 1; z-index: 2; } | |
| 60%, 95% { opacity: 0; z-index: 2; } | |
| } | |
| @keyframes slide{ | |
| 0%, 100% { opacity: 0; } | |
| 10%, 40% { opacity: 1; z-index: 2; } | |
| 50%, 80% { opacity: 0; z-index: 2; } | |
| } | |
| @media screen and (max-width: 1440px) { | |
| .sub_title {font-size:50px;} | |
| .main_title {font-size: 80px !important;margin-bottom:0;} | |
| .case_left h1 {font-size: 80px!important;} | |
| #CaseStudiesSlider .swiper-pagination {left: 5%;bottom: -5%;} | |
| #portfolio-tabs {left: -27%;top: 60%;} | |
| #website .mainImage:after, #e-commerce .mainImage:after {background-position: 108% center;} | |
| #branding > .mainImage:after {background-position: 85% center;} | |
| #branding .MacFolio {left:40px;} | |
| #mobile-apps .mainImage .feature-image-2 img {right: 50px;top: -6px;} | |
| #mobile-apps .mainImage .feature-image-3 img {right: 50px;top: 240px;} | |
| } | |
| </style> | |
| <div id="primary" class="site-content"> | |
| <div id="content" role="main"> | |
| <section id="titlebar" class="d-flex container-fluid"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-lg-12 col-md-12"> | |
| <h2 class="sub_title mb-0">Just a glimpse of </h2> | |
| <h1 class="main_title fleek_red mt-0">Our finest work</h1> | |
| </div> | |
| </div> | |
| <div class="row text-center pt-5"> | |
| <div class="scroll-down"> | |
| <a href="javascript:void(0)" id="scrolldown"> | |
| <p>Scroll Down</p> | |
| <i class="fal fa-arrow-down"></i> | |
| </a> | |
| </div><!--scroll-down--> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="CaseStudiesSlider" class="d-flex container-fluid"> | |
| <div class="row"> | |
| <div class="swiper Case_Studies"> | |
| <div class="swiper-wrapper"> | |
| <?php | |
| $slider_args = array( | |
| 'post_type' => 'ourcasestudy', | |
| 'post_status' => 'publish', | |
| 'posts_per_page' => 4, | |
| 'order' => 'ASC' | |
| ); | |
| $slider_loop = new WP_Query( $slider_args ); | |
| while ( $slider_loop->have_posts() ) : $slider_loop->the_post(); ?> | |
| <?php | |
| if (class_exists('MultiPostThumbnails')) { | |
| $case_name = 'slide-featured-image'; | |
| if (MultiPostThumbnails::has_post_thumbnail('ourcasestudy', $case_name)) { | |
| $case_id = MultiPostThumbnails::get_post_thumbnail_id( 'ourcasestudy', $case_name, $post->ID ); | |
| $case_feature_url = wp_get_attachment_image_src( $case_id, 'case-image' ); | |
| $case = wp_get_attachment_image( $case_id, 'feature-image', false, $attr ); | |
| } | |
| } | |
| ?> | |
| <div class="swiper-slide <?php echo get_post_meta($post->ID, 'header-theme', true); ?>" style="background-image:url('<?php echo $case_feature_url[0]; ?>');"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-lg-5 col-sm-12 case_left"> | |
| <h1><?php the_title(); ?></h1> | |
| <div class="slider_content"><?php the_excerpt(); ?></div> | |
| </div> | |
| <div class="col-lg-7 case_right"> | |
| <a href="<?php echo get_permalink(); ?>" class="btn btn-main small view-study">View Case</a></div> | |
| </div> | |
| </div> | |
| </div> | |
| <?php | |
| endwhile; | |
| wp_reset_postdata(); | |
| ?> | |
| </div> | |
| <div class="swiper-pagination"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="portfolio" class="container-fluid pb-5"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div id="portfolio-tabs"> | |
| <ul class="nav nav-tabs tabs-left"> | |
| <?php | |
| $taxonomy = 'our_portfolio_category'; | |
| $tax_args = array( | |
| 'post_type' => 'ourportfolio', | |
| 'orderby' => 'ID', | |
| 'order' => 'ASC' | |
| ); | |
| $terms = get_terms( $taxonomy, $tax_args ); | |
| $i=0; | |
| ?> | |
| <?php if ( $terms && !is_wp_error( $terms ) ) : ?> | |
| <?php foreach ( $terms as $term ) { | |
| $i++; | |
| $image_id = get_term_meta ( $term->term_id, 'image_id', true ); | |
| ?> | |
| <li class="<?php echo $term->slug;?>"><a href="#<?php echo $term->slug; ?>" class="<?php if($i == 1 ) { echo "active show"; } ?>" data-toggle="tab" data-trigger-class="<?php echo $term->slug; ?>"><?php echo $term->name; echo wp_get_attachment_image ( $image_id, 'full' ); ?></a></li> | |
| <?php } | |
| endif; | |
| ?> | |
| <li class="casestudy"><button>Case Study</button></li> | |
| </ul> | |
| </div> | |
| <!-- Tab panes --> | |
| <div class="tab-content"> | |
| <?php if ( $terms && !is_wp_error( $terms ) ) : ?> | |
| <?php foreach ( $terms as $term ) { | |
| $j++; | |
| ?> | |
| <div class="tab-pane <?php if($j == 1 ) { echo "active"; } ?>" id="<?php echo $term->slug; ?>"> | |
| <div class="swiper mainImage"> | |
| <div class="swiper-wrapper"> | |
| <?php | |
| $mainImage_query = new WP_Query( array( | |
| 'post_type' => 'ourportfolio', | |
| 'order' => 'ASC', | |
| 'posts_per_page' => -1, | |
| 'tax_query' => array( | |
| array ( | |
| 'taxonomy' => 'our_portfolio_category', | |
| 'field' => 'slug', | |
| 'terms' => $term->slug, | |
| ) | |
| ), | |
| ) ); | |
| while ( $mainImage_query->have_posts() ) : | |
| $mainImage_query->the_post(); ?> | |
| <div class="swiper-slide"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-lg-4 col-sm-12 pr-100 portfolio_left"> | |
| <h3 class="portfolio_term"><?php echo $term->name; ?></h3> | |
| <h2 class="portfolio_title"><?php the_title(); ?></h1> | |
| <div class="portfolio_content"><?php echo wp_trim_words( get_the_excerpt(), 75 ); ?></div> | |
| <a href="<?php echo get_permalink(); ?>" class="portfolio_link">Visit Website <i class="fal fa-long-arrow-right"></i></a> | |
| </div> | |
| <div class="col-lg-8 portfolio_right"> | |
| <?php | |
| if($term->slug == 'branding') { ?> | |
| <div class="MacBook"> | |
| <div class="mx-auto d-block MacFolio"> | |
| <div class="swiper iPadSlider"> | |
| <div class="swiper-wrapper"> | |
| <div class="swiper-slide"><img src="<?php echo get_the_post_thumbnail_url(); ?>"></div> | |
| <?php | |
| if (class_exists('MultiPostThumbnails')) { | |
| $x=1; | |
| while ($x<=5) { | |
| $ipad_name = 'feature-image-'.$x; | |
| if (MultiPostThumbnails::has_post_thumbnail('ourportfolio', $ipad_name)) { | |
| $ipad_id = MultiPostThumbnails::get_post_thumbnail_id( 'ourportfolio', $ipad_name, $post->ID ); | |
| $ipad_feature_url = wp_get_attachment_image_src( $ipad_id, 'ipad-image' ); | |
| $attr = array( | |
| 'class' => "ipImage", | |
| 'src' => $ipad_feature_url[0], // sets the url for the full image size | |
| ); | |
| $ipad = wp_get_attachment_image( $ipad_id, 'ipad-image', false, $attr ); | |
| echo '<div class="swiper-slide">'; | |
| echo $ipad; | |
| echo '</div>'; | |
| } | |
| $x++; | |
| } | |
| ?> | |
| <?php } ?> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <?php } | |
| else { ?> | |
| <div class="MacBook"> | |
| <?php | |
| if (class_exists('MultiPostThumbnails')) { | |
| // Loops through each feature image and grabs thumbnail URL | |
| $z=1; | |
| while ($z<=5) { | |
| $image_name = 'feature-image-'.$z; // sets image name as feature-image-1, feature-image-2 etc. | |
| if (MultiPostThumbnails::has_post_thumbnail('ourportfolio', $image_name)) { | |
| $image_id = MultiPostThumbnails::get_post_thumbnail_id( 'ourportfolio', $image_name, $post->ID ); // use the MultiPostThumbnails to get the image ID | |
| $image_thumb_url = wp_get_attachment_image_src( $image_id,'small-thumb'); // define thumb src based on image ID | |
| $image_feature_url = wp_get_attachment_image_src( $image_id,'feature-image' ); // define full size src based on image ID | |
| $attr = array( | |
| 'class' => "AppImage", // set custom class | |
| 'rel' => $image_thumb_url[0], // sets the url for the image thumbnails size | |
| 'src' => $image_feature_url[0], // sets the url for the full image size | |
| ); | |
| // Use wp_get_attachment_image instead of standard MultiPostThumbnails to be able to tweak attributes | |
| $image = wp_get_attachment_image( $image_id, 'feature-image', false, $attr ); | |
| echo '<div class="'.$image_name.'">'; | |
| echo $image; | |
| echo '</div>'; | |
| } | |
| $z++; | |
| } | |
| }; | |
| ?> | |
| <div class="mx-auto d-block MacFolio"> | |
| <img src="<?php echo get_the_post_thumbnail_url(); ?>"> | |
| </div> | |
| </div> | |
| <?php } ?> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <?php endwhile; | |
| wp_reset_postdata(); | |
| ?> | |
| </div> | |
| </div> | |
| <div thumbsSlider="" class="swiper portfolioThumbnails"> | |
| <div class="swiper-wrapper"> | |
| <?php | |
| $thumbnails_query = new WP_Query( array( | |
| 'post_type' => 'ourportfolio', | |
| 'order' => 'ASC', | |
| 'posts_per_page' => -1, | |
| 'tax_query' => array( | |
| array ( | |
| 'taxonomy' => 'our_portfolio_category', | |
| 'field' => 'slug', | |
| 'terms' => $term->slug, | |
| ) | |
| ), | |
| ) ); | |
| while ( $thumbnails_query->have_posts() ) : | |
| $thumbnails_query->the_post(); ?> | |
| <div class="swiper-slide"> | |
| <img src="<?php echo get_the_post_thumbnail_url(); ?>" class="mx-auto d-block slide_image"> | |
| </div> | |
| <?php endwhile; | |
| wp_reset_postdata(); | |
| ?> | |
| </div> | |
| </div> | |
| </div> | |
| <?php } | |
| endif; | |
| ?> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| <script> | |
| <?php | |
| $taxonomy = 'our_portfolio_category'; | |
| $tax_args = array( | |
| 'post_type' => 'ourportfolio', | |
| 'orderby' => 'ID', | |
| 'order' => 'ASC' | |
| ); | |
| $terms = get_terms( $taxonomy, $tax_args ); | |
| foreach ( $terms as $term ) { | |
| ?> | |
| jQuery( document ).ready(function($) { | |
| var swiper = new Swiper("<?php echo "#".$term->slug; ?> .portfolioThumbnails", { | |
| spaceBetween: 25, | |
| slidesPerView: 5, | |
| freeMode: true, | |
| watchSlidesProgress: true, | |
| }); | |
| var swiper2 = new Swiper("<?php echo "#".$term->slug; ?> .mainImage", { | |
| spaceBetween: 0, | |
| effect: 'fade', | |
| fadeEffect: { | |
| crossFade: true | |
| }, | |
| thumbs: { | |
| swiper: swiper, | |
| }, | |
| speed: 500 | |
| }); | |
| }); | |
| <?php } ?> | |
| </script> | |
| <script> | |
| jQuery( document ).ready(function($) { | |
| var swiper3 = new Swiper(".Case_Studies", { | |
| direction: "vertical", | |
| slidesPerView: 1, | |
| spaceBetween: 30, | |
| mousewheel: true, | |
| effect: 'fade', | |
| fadeEffect: { | |
| crossFade: true | |
| }, | |
| pagination: { | |
| el: ".Case_Studies .swiper-pagination", | |
| clickable: true, | |
| }, | |
| mousewheel: { | |
| forceToAxis: true, | |
| sensitivity: 1, | |
| releaseOnEdges: true, | |
| }, | |
| speed: 500 | |
| }); | |
| swiper3.on('slideChange', function () { | |
| if( jQuery('.Case_Studies .swiper-slide-visible').hasClass('light') === true ) { | |
| jQuery('body').addClass('header-light'); | |
| } | |
| else { | |
| jQuery('body').removeClass('header-light'); | |
| } | |
| }); | |
| $(function() { | |
| $('#titlebar #scrolldown').click(function() { | |
| $('#titlebar').addClass('hideit'); | |
| $('#CaseStudiesSlider .swiper-wrapper').addClass('Case_Cover'); | |
| $('html').removeClass('noScroll'); | |
| if( jQuery('.Case_Studies .swiper-slide-visible').hasClass('light') === true ) { | |
| jQuery('body').addClass('header-light'); | |
| } | |
| }); | |
| }); | |
| var swiper4 = new Swiper(".iPadSlider", { | |
| effect: 'fade', | |
| fadeEffect: { | |
| crossFade: true | |
| }, | |
| autoplay: { | |
| delay: 2500, | |
| disableOnInteraction: false, | |
| }, | |
| navigation: { | |
| nextEl: '.iPadSlider .swiper-button-next', | |
| prevEl: '.iPadSlider .swiper-button-prev', | |
| }, | |
| }); | |
| $('#portfolio .tabs-left li a').click(function(){ | |
| $('#portfolio-tabs').removeAttr('class'); | |
| $(this).closest('#portfolio-tabs').addClass($(this).attr('data-trigger-class')); | |
| }); | |
| }); | |
| </script> | |
| <?php get_footer(); ?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment