Last active
March 9, 2019 12:44
-
-
Save sudopower/a61eadf48f654bf03b9e6bbf3a267470 to your computer and use it in GitHub Desktop.
Image Gallery using CSS GRID inside of Owl Carousel to Loop Through a Category of Posts (Wordpress)
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
<style> | |
.grid-container-portfolio-home { | |
padding-top: 1em; | |
display: grid; | |
grid-template-columns: 1fr 1fr 1fr 1fr; | |
grid-template-rows: 1fr 1fr 1fr; | |
grid-gap:1em; | |
grid-template-areas: "main-img main-img sec-img-1 sec-img-2" "main-img main-img sec-img-3 sec-img-4" ". . . ."; | |
} | |
.main-img { grid-area: main-img;background-size: cover;width: 100%;height:50vh; } | |
.sec-img-1 { grid-area: sec-img-1;background-size: cover; } | |
.sec-img-2 { grid-area: sec-img-2;background-size: cover; } | |
.sec-img-3 { grid-area: sec-img-3;background-size: cover; } | |
.sec-img-4 { grid-area: sec-img-4;background-size: cover; } | |
</style> | |
<!--SITE CONTENT--> | |
<div class="owl-carousel owl-theme" id="port"> | |
<?php | |
$args = array( | |
'category' => 7 | |
); | |
$the_query = new WP_Query( $args ); | |
if ( $the_query->have_posts() ) { | |
while ( $the_query->have_posts() ) { | |
$the_query->the_post(); | |
//LOOP START | |
$attachments = get_children(array('post_parent' => $post->ID, | |
'post_status' => 'inherit', | |
'post_type' => 'attachment', | |
'post_mime_type' => 'image', | |
'order' => 'ASC', | |
'orderby' => 'menu_order ID')); | |
//print_r($attachments); | |
foreach($attachments as $att_id => $attachment) { | |
$full_img_url[] = wp_get_attachment_url($attachment->ID); | |
// Your Code here | |
} | |
?> | |
<div class="item grid-container-portfolio-home"> | |
<div class="main-img" style="background-image:url('<?php if(isset($full_img_url)){echo $full_img_url[0];}?>');"></div> | |
<div class="sec-img-1" style="background-image:url('<?php if(isset($full_img_url)){echo $full_img_url[1];}?>');"></div> | |
<div class="sec-img-2" style="background-image:url('<?php if(isset($full_img_url)){echo $full_img_url[2];}?>');"></div> | |
<div class="sec-img-3" style="background-image:url('<?php if(isset($full_img_url)){echo $full_img_url[3];}?>');"></div> | |
<div class="sec-img-4" style="background-image:url('<?php if(isset($full_img_url)){echo $full_img_url[4];}?>');"></div> | |
</div> | |
<?php unset($full_img_url);//LOOP END | |
} | |
/* Restore original Post Data */ | |
wp_reset_postdata(); | |
} else { | |
// no posts found | |
} | |
?> | |
</div> | |
<!--SITE CONTENT--> | |
<!--in the footer after enqueuing scripts--> | |
<script> | |
$(document).ready(function() { | |
$(".owl-carousel#port").owlCarousel({ | |
loop: true, | |
nav: true, | |
dots: false, | |
items: 1, | |
autoplay: true, | |
autoplay: 3000, | |
responsive: { | |
0: { | |
nav: true | |
}, | |
600: { | |
nav: true | |
}, | |
1000: { | |
nav: true | |
} | |
} | |
}); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment