I have the following code setup to pull sticky posts from WordPress and put them in a Bootstrap Carousel.
How would I go about adding a responsive thumbnail navigation row horizontally that highlights the active thumbnail and limits them to 6 or so?
http://pastebin.com/hmBDmtg2
Like this:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<?php
$i = 0;
$the_query = new WP_Query(array(
'post__in' => get_option('sticky_posts'),
'ignore_sticky_posts' => 1,
'posts_per_page' => 7
));
while ( $the_query->have_posts() ) : $the_query->the_post();
$i++;
?>
<div class="item <?php if($i == 1) { echo 'active'; }?>">
<?php the_post_thumbnail('large');?>
<div class="carousel-caption">
<h4><?php the_title();?></h4>
<p><?php the_excerpt();?></p>
</div>
</div><!-- item active -->
<?php
endwhile;
wp_reset_postdata();
?>
</div><!-- carousel-inner -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- #myCarousel -->
Related
I'm trying to make a carousel with Bootstrap 4 posts - but something is wrong.
I only get 5 posts and I do not want to - I realize it's for 'posts_per_page' => 5 - but can anyone suggest me how to make 5 posts on one slide and 5 other posts on the other slide?
My code:
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<?php
$args = array(
'post_type' => 'auta',
'posts_per_page' =>5,
);
$my_query = new WP_Query($args);
$count = 0;
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>
<div class="carousel-item <?php echo ($count == 0) ? 'active' : ''; ?>">
<div class="offset1">
<?php the_title(); ?>
</div>
</div>
<?php endwhile; wp_reset_query(); ?> <?php
$limit_query = new WP_Query($args);
while ($limit_query->have_posts()) :$limit_query->the_post();$do_not_duplicate = $post->ID;?>
<div class="carousel-item">
<div class="offset1">
<?php the_title(); ?>
</div>
</div>
<?php endwhile; wp_reset_query(); ?>
</div>
<!-- Carousel nav -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
I am trying to build an image slider / carousel using Bootstrap. The images should be shown from the Wordpress post categories 'Aktuell' and 'Referenz' which I have created. The code below works perfectly for me when I want to show 1 image from the category 'Aktuell' and 3 images from the category 'Referenz'.
<div id="myCarousel" class="carousel slide hidden-sm hidden-xs ">
<div class="carousel-inner">
<?php
$the_query = new WP_Query(array(
'category_name' => 'Aktuell',
'posts_per_page' => 1,
));
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item active">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('full'); ?>
<div class="carousel-caption">
<h3><?php the_title();?></h3>
<p><?php the_excerpt();?></p>
<h1>»</h1>
</div>
</a>
</div><!-- item active -->
<?php
endwhile;
wp_reset_postdata();
?>
<?php
$the_query = new WP_Query(array(
'category_name' => 'Referenz',
'posts_per_page' => 3,
'orderby' => 'rand'
));
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('slider');?>
<div class="carousel-caption">
<h3><?php the_title();?></h3>
<p><?php the_excerpt();?></p>
<h1>»</h1>
</div>
</a>
</div><!-- item -->
<?php
endwhile;
wp_reset_postdata();
?>
</div><!-- carousel-inner -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- #myCarousel -->
What I want to do is to show 3 images from each category. So when I use 'posts_per_page' => 3, on line #6, the slide function will not work anymore when I click on the left or right arrows to slide. Instead the images are getting displayed below each other.
how can I get this fixed?
I could find a way to make it work like this:
function the_carousel_item($post, $post_per_page, $offset = 0, $orderby = 'rand', $active = NULL) {
$the_query = new WP_Query(array(
'category_name' => $post,
'posts_per_page' => $post_per_page,
'orderby' => $orderby,
'offset' => $offset
));
$active_css_class = (isset($active)) ? $active : '';
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item <?= $active_css_class ?>">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('slider');?>
<div class="carousel-caption">
<h3><?php the_title();?></h3>
<p><?php the_excerpt();?></p>
<h1>»</h1>
</div>
</a>
</div><!-- item -->
<?php
endwhile;
wp_reset_postdata();
}
<div id="myCarousel" class="carousel slide hidden-sm hidden-xs ">
<div class="carousel-inner">
<?php
// Display the starter image from the post 'Aktuell'
the_carousel_item('Aktuell', 1, 0, 'ID', 'active');
// Display posts from 'Aktuell'
the_carousel_item('Aktuell', 3, 1, 'ID');
// Display posts from 'Referenz'
the_carousel_item('Referenz', 3);
?>
</div><!-- carousel-inner -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- #myCarousel -->
<div class="container inner-cont container-contact-field">
<div class="row mobile contact-field">
<div class="col-xs-8 col-xs-offset-2">
<?php dynamic_sidebar('footer_1'); ?>
<?php dynamic_sidebar('footer_2'); ?>
</div>
</div>
</div>
You want showing 1 image above (Aktuell) and 3 image slider below (Referenz), or 1 above 1 slider, or what?
If 3 image below, your slider will not work because you already set 'posts_per_page' => 3
I am building my Wordpress theme with Bootstrap and am using a carousel on my front page right below the navbar. I found a great way to loop through the images here [1]: http://www.lanexa.net/2012/04/how-to-make-bootstrap-carousel-display-wordpress-dynamic-content/
I wanted to run a test on one of the slider areas so I put in the code for the first loop and it displays the title and the excerpt but my image does not show up at all. How can I fix this issue and what is a good way to loop through the rest of the images in the carousel. I added the second loop with the code I found in the link and it messed up my page so I took it out. Here is what I have so far still with some static content that I want to loop through as well. I am going to have 3 images going in the carousel. This is my first real project with Wordpress as I am trying to build my portfolio theme so any help is appreciated!
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<?php
$the_query = new WP_Query(array(
'category_name' => 'Home Carousel',
'posts_per_page' => 1
));
while ($the_query->have_posts() ) :
$the_query->the_post();
$attachment_ids[] = get_the_ID();
endwhile;
wp_reset_postdata();
?>
<!-- Indicators -->
<ol class="carousel-indicators">
<?php foreach($attachment_ids as $attachment_id_k=>$attachment_id_v ){
if($attachment_id_k == 0){$class_active = 'class="active"';}
else{$class_active = 'class=""';}
?>
<li data-target="#myCarousel" <?php echo $class_active;?> data-slide-to="<?php echo $attachment_id_k;?>"></li>
<?php } ?>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-inner">
<?php foreach($attachment_ids as $attachment_id_k=>$attachment_id_v ){
if($attachment_id_k == 0){$class_active = 'class="item active"';}
else{$class_active = 'class="item"';}
?>
<div <?php echo $class_active;?>>
<div class="display_table">
<div class="display_table_cell">
<?php
$default_attr = array(
'class' => "gallery_images",
'alt' => 'Gallery Images',
);
echo wp_get_attachment_image( $attachment_id_v, 'full', 1, $default_attr );
$image_data = get_post( $attachment_id_v );
if($image_data->post_excerpt != ''){
?>
<div class="carousel-caption my_caption">
<p><?php echo $image_data->post_excerpt;?></p>
</div>
<?php }?>
</div>
</div>
</div>
<?php } ?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
Here is the Working Code !!!
First through the while loop get all the post IDS in an array
<?php
$the_query = new WP_Query(array(
'category_name' => 'Home Carousel',
'posts_per_page' => 1
));
while ($the_query->have_posts() ) :
$the_query->the_post();
$attachment_ids[] = get_the_ID();
endwhile;
wp_reset_postdata();
?>
Now through the array $attachment_ids get the carousel working
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php foreach($attachment_ids as $attachment_id_k=>$attachment_id_v ){
if($attachment_id_k == 0){$class_active = 'class="active"';}
else{$class_active = 'class=""';}
?>
<li data-target="#myCarousel" <?php echo $class_active;?> data-slide-to="<?php echo $attachment_id_k;?>"></li>
<?php } ?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php foreach($attachment_ids as $attachment_id_k=>$attachment_id_v ){
if($attachment_id_k == 0){$class_active = 'class="item active"';}
else{$class_active = 'class="item"';}
?>
<div <?php echo $class_active;?>>
<div class="display_table">
<div class="display_table_cell">
<?php
$default_attr = array(
'class' => "gallery_images",
'alt' => 'Gallery Images',
);
echo wp_get_attachment_image( $attachment_id_v, 'full', 1, $default_attr );
$image_data = get_post( $attachment_id_v );
if($image_data->post_excerpt != ''){
?>
<div class="carousel-caption my_caption">
<p><?php echo $image_data->post_excerpt;?></p>
</div>
<?php }?>
</div>
</div>
</div>
<?php } ?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
put this javascript code at footer.php, since its bootstrap carousel so need some javascript to set the options
<script type="text/javascript">
$('.carousel').carousel({
interval: 3000
})
</script>
In your code item section you write
<?php the_post_thumbnail('full');?>
but I found that in that tutorial link they used
<?php the_post_thumbnail('large');?>.
Can you check it. Is this the reason for your error ?
I am trying to make a slider cycle through the custom posts in Wordpress, displaying 4 at a time.
I would like it to cycle through the posts and just loop back to the first one when it has reached the last post.
My code is:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php
$args = array(
'posts_per_page' => '4',
'post_type' => 'dogs',
);
$myDogs = new WP_Query( $args ); ?>
<?php while ( $myDogs->have_posts() ) : $myDogs->the_post();?>
<div id="sl-cont" class="col-sm-12 col-md-3 col-lg-3">
<div class="well">
<?php the_post_thumbnail('slider-size'); ?>
<div class="dog-caption">
<p><span class="title"><?php the_title(); ?></span><br/>
<?php the_excerpt(); ?><br/>
Read more >> </p>
</div>
</div><!--end of well-->
</div><!--end of container-->
<?php endwhile;
wp_reset_postdata();?>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<?php
$args = array(
'posts_per_page' => '4',
'post_type' => 'dogs',
'offset' => 1
);
$myDogs = new WP_Query( $args ); ?>
<?php while ( $myDogs->have_posts() ) : $myDogs->the_post();?>
<div id="sl-cont" class="col-sm-12 col-md-3 col-lg-3">
<div class="well">
<?php the_post_thumbnail('slider-size'); ?>
<div class="dog-caption">
<p><span class="title"><?php the_title(); ?></span><br/>
<?php the_excerpt(); ?><br/>
Read more >> </p>
</div>
</div><!--end of well-->
</div><!--end of container-->
<?php endwhile;
wp_reset_postdata();?>
</div>
<!--/row-->
</div>
<!--/item-->
</div> <!--/carousel-inner-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><img src="<?php bloginfo('template_directory'); ?>/img/left-paw.png"> </a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><img src="<?php bloginfo('template_directory'); ?>/img/right-paw.png"></a>
`
Can anyone help?
I tried few plugins for having featured product slider carousal for my woocommerce wordpress site but they didn't work as i intended so i tried to create on my own. Its almost worked except that it is displaying additional posts that don't exist at all. They don't exist even as products. First picture shows the product that is featured. Second picture is extra content that don't exist at all. The number of such unnecessary posts is equal to the multiple of total number of featured products. Suggestion on similar question reflects almost what i have done but It have problems. In my case i have 5 featured products and it is displaying 25 unnecessary posts. Currently, i tried just to display one item at a time and after fixing this issue i will display 3 posts at a time so it loops twice giving 6 posts to slide.
<div id="featured" class="carousel slide ">
<div class="carousel-inner ">
<?php
$args = array( 'post_type' => 'product',
'meta_key' => '_featured',
'meta_value' => 'yes',
'posts_per_page' => 8,
'post_status' => 'publish',
'offset' => 0,
'numberposts' => 6,
//'orderby' =>'rand',
'order' => 'DESC'
);
$featured_loop = new WP_Query( $args );
//echo "<pre>";
//print_r($featured_loop);
//echo "</pre>";
if ( $featured_loop->have_posts()){
$i = 1; $count;
for ($count=0; $count < 6;) {
foreach ( $featured_loop as $featured ) {
$featured_loop->the_post();
?>
<div class=
<?php
echo '"';
echo 'item ';
if ($i == 1) {
echo 'active';
}
echo '"';
?>>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 ">
<div class="thumbnail">
<i class="tag"></i>
<a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php
if (has_post_thumbnail( $featured->post->ID )){
echo get_the_post_thumbnail($featured->post->ID, 'shop_catalog');
}
else {
echo '<img width ="150" src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" class="img-responsive img-rounded" />';
}
?>
</a>
</div><!-- thumbnail -->
<div class="panel-body text-center">
<h6><?php the_title(); ?> </h6>
</div><!-- panel-body text-center -->
</div><!-- col-xs-6 col-sm-4 col-md-4 col-lg-4 -->
</div>
<?php
$i++;
}
$count++;
}
}
?>
</div><!-- carousal item class ends -->
</div><!-- carousal inner ends -->
<a class="left carousel-control" href="#featured" data-slide="prev"><i class="fa fa-arrow-left"></i></a>
<a class="right carousel-control" href="#featured" data-slide="next"><i class="fa fa-arrow-right"></i></a>
<?php wp_reset_postdata(); wp_reset_query(); ?>
</div><!-- carousel slide -->
First of all, your iteration is wrong. You are first running a malformed for loop n= 6 times, then for each integer from 0 to 5 you a running a foreach loop m times, resulting in a malformed loop with complexity of O(n*m) that don't solve your problem.
Here's your code, rewritten. Hope it helps.
<div id="featured" class="carousel slide ">
<div class="carousel-inner ">
<?php
$args = array(
'post_type' => 'product',
'meta_key' => '_featured',
'meta_value' => 'yes',
'posts_per_page' => 6,
'post_status' => 'publish',
'offset' => 0,
'order' => 'DESC'
);
$featured_loop = new WP_Query( $args );
if ( $featured_loop->have_posts() ):
while ( $featured_loop->have_posts() ) : $featured_loop->the_post(); ?>
<div class="<?php echo 'item'; ?>">
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 ">
<div class="thumbnail">
<i class="tag"></i>
<a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php echo woocommerce_get_product_thumbnail(); ?>
</a>
</div>
<div class="panel-body text-center">
<h6><?php the_title(); ?> </h6>
</div>
</div>
</div>
<?php endwhile; ?>
<a class="left carousel-control" href="#featured" data-slide="prev"><i class="fa fa-arrow-left"></i></a>
<a class="right carousel-control" href="#featured" data-slide="next"><i class="fa fa-arrow-right"></i></a>
<?php wp_reset_postdata(); endif; ?>
</div>
</div>
<?php wp_reset_query(); ?>
Answering this with help from #Sorin Gheata. He forgot to make it work as bootstrap carousel.
<div id="featured" class="carousel slide ">
<div class="carousel-inner ">
<?php
$args = array(
'post_type' => 'product',
'meta_key' => '_featured',
'meta_value' => 'yes',
'numberposts' => 6,
'posts_per_page' => 6
);
$featured_loop = new WP_Query( $args );//global $product;
if ( $featured_loop->have_posts() ):
while ( $featured_loop->have_posts() ) : $featured_loop->the_post(); ?>
<div class=
<?php
echo '"';
echo 'item ';
if ($i == 1) {
echo 'active';
}
echo '"';
?>>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 ">
<div class="thumbnail">
<i class="tag"></i>
<a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php echo woocommerce_get_product_thumbnail(); ?>
</a>
</div>
<div class="panel-body text-center">
<h6><?php the_title(); ?> </h6>
</div>
</div>
</div>
<?php $i++; endwhile; ?>
<a class="left carousel-control" href="#featured" data-slide="prev"><i class="fa fa-arrow-left"></i></a>
<a class="right carousel-control" href="#featured" data-slide="next"><i class="fa fa-arrow-right"></i></a>
<?php wp_reset_postdata(); endif; ?>
</div>
</div>
<?php wp_reset_query(); ?>