Last active
April 18, 2018 22:54
-
-
Save KreigD/28a338ead39224b6f61502c1b7729922 to your computer and use it in GitHub Desktop.
Bootstrap Carousel Integration with WordPress Loop. Displays post thumbnail and heading.
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 | |
// I'm using both Bootstrap 4.0 and MD Bootstrap, so you may want to tweak some of this yourself | |
// Also remmeber to link up some styles, or the div with your background image won't display | |
$args = array( | |
'post_type' => 'portfolio', // my own custom post type | |
'meta_query' => array( // pull in featured posts from metadata connected to a custom featured post plugin | |
array( | |
'key' => 'featured-checkbox', | |
'value' => 'yes' | |
) | |
) | |
); | |
$the_query = new WP_Query($args); | |
?> | |
<!--Carousel Wrapper--> | |
<div id="carousel-portfolio" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false"> | |
<!--Indicators--> | |
<ol class="carousel-indicators"> | |
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?> | |
<li data-target="#carousel-portfolio" data-slide-to="<?php echo $the_query->current_post; ?>" class="<?php if ( $the_query->current_post == 0 ) : ?>active<?php endif; ?>"></li> | |
<?php endwhile; endif; ?> | |
</ol> | |
<!--/Indicators--> | |
<?php rewind_posts(); ?> | |
<!--Slides--> | |
<div class="carousel-inner" role="listbox"> | |
<?php | |
if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); | |
$thumbnail_id = get_post_thumbnail_id(); | |
$thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'full-size', true ); | |
$thumbnail_meta = get_post_meta( $thumbnail_id, '_wp_attatchment_image_alt', true ); | |
?> | |
<!--Slide--> | |
<!-- Set the featured image as the background image of the div --> | |
<div class="carousel-item <?php if ( $the_query->current_post == 0 ) : ?>active<?php endif; ?> view hm-white-strong" style="background: url('<?php echo $thumbnail_url[0]; ?>') no-repeat center center; background-size: cover;"> | |
<!-- Caption --> | |
<div class="full-bg-img flex-center"> | |
<ul class="animated fadeInUp col-md-12"> | |
<li> | |
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"> | |
<img src="<?php site_icon_url( 'thumbnail' ); ?>" class="img-fluid mx-auto" alt="<?php get_bloginfo( array('name', 'description') ); ?>"> | |
</a> | |
</li> | |
<li style="color:black;"> | |
<p class="flex-item lead"> | |
<?php the_excerpt(); ?> | |
</p> | |
</li> | |
<li> | |
<!-- I have this pointing to a portfolio archive, but you can point it anywhere --> | |
<a target="_blank" href="<?php echo esc_url( home_url( '/portfolio/' ) ); ?>" class="btn btn-primary btn-lg flex-item" rel="nofollow">See my work</a> | |
</li> | |
<li> | |
<a target="_blank" href="mailto:<?php get_bloginfo('admin_email'); ?>" class="btn btn-default btn-lg flex-item" rel="nofollow">Hire Me</a> | |
</li> | |
<li> | |
<a href="<?php the_permalink(); ?>" class="text-muted"> | |
<!-- A caption showing which portoflio piece is in the background --> | |
<p class="flex-item font-italic">Pictured: | |
<?php the_title(); ?> | |
</p> | |
</a> | |
</li> | |
</ul> | |
</div> | |
<!-- /.Caption --> | |
</div> | |
<!--/.Slide--> | |
<?php endwhile; endif; ?> | |
</div> | |
<!--/Slides--> | |
<!--Controls--> | |
<a class="carousel-control-prev" href="#carousel-portfolio" role="button" data-slide="prev"> | |
<span class="carousel-control-prev-icon" aria-hidden="true"></span> | |
<span class="sr-only">Previous</span> | |
</a> | |
<a class="carousel-control-next" href="#carousel-portfolio" role="button" data-slide="next"> | |
<span class="carousel-control-next-icon" aria-hidden="true"></span> | |
<span class="sr-only">Next</span> | |
</a> | |
<!--/.Controls--> | |
</div> | |
<!--/Carousel Wrapper--> | |
<?php wp_reset_postdata(); ?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment