Feeding blog posts from a category into Bootstrap (jQuery) Carousel

  • Resolved chrisjb

    (@chrisjb)


    11 years, 7 months ago

    Hi all,

    I’m having some trouble getting post feature images and headlines (with links) from one category to display in a jQuery carousel on my blog home page.

    I’m a total novice at PHP so I’m just trying to use the WordPress Codex to get the thing to work. Having some real troubles though and would be really grateful if anyone could shove me in the right direction to a tutorial or Codex page that might be able to help.

    I’m trying to use this format to bring the posts in:

    <ul>
<?php
global $post;
$args = array( 'numberposts' => 5, 'offset'=> 1, 'category' => 1 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) :	setup_postdata($post); ?>
	<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>

    That’s fine, all except the feature images display in a different div to the headlines so I’m not quite sure how to use the above in this scenario (as I said I’m a total PHP novice!). Here is my HTML:

    <div id="myCarousel" class="carousel slide">
	<div class="row">
          <div class="span5 carousel-inner">
		<?php $posts_array = get_posts( $args ); ?>
		<div class="item active"><a href="<?php $permalink = get_permalink( $id ); ?>"></a><?php the_post_thumbnail();?></a></div>
		<div class="item"><a href="<?php $permalink = get_permalink( $id ); ?>"></a><?php the_post_thumbnail();?></a></div>
		<div class="item"><a href="<?php $permalink = get_permalink( $id ); ?>"></a><?php the_post_thumbnail();?></a></div>
	  </div>
	  <div class="span3 feature-headlines">
            <ul>
              <li>
                <h4><a href="<?php get_category_link( $category_id ); ?> "><?php get_the_category( $id ) ?></a> /</h4>
                <h3><?php the_title(); ?></h3>
	      </li>
	      <li>
                <h4><a href="<?php get_category_link( $category_id ); ?> "><?php get_the_category( $id ) ?></a> /</h4>
                <h3><?php the_title(); ?></h3>
	      </li>
	      <li>
                <h4><a href="<?php get_category_link( $category_id ); ?> "><?php get_the_category( $id ) ?></a> /</h4>
                <h3><?php the_title(); ?></h3>
	      </li>
            </ul>
          </div>
          <!-- /.feature-headlines -->
	</div>
	<!-- /.row -->
      </div>
      <!-- /#myCarousel -->

    As you can see I’m doing it all wrong and have managed to get myself into a pickle!

    All that displays is the image and the headline for just one of the posts and no links or categories!

    Please help!

    Thank you in advance for any help you can provide.

    Cheers,

    Chris

Viewing 1 replies (of 1 total)
  • Thread Starter chrisjb

    (@chrisjb)

    11 years, 4 months ago

    I managed to fix this in the end. Had some issues as I wanted to be able to use videos in the slideshow as well + a few other tweaks. But hopefully this code will help others:

    <?php
                $posts_array = get_posts(array('numberposts' => 3, 'category' => 101));
                $active = ' active';
                $slidecount = 1;
                ?>
                <div id="myCarousel" class="span8 carousel slide">
                    <div class="carousel-inner">
                        <?
                        foreach ($posts_array as $car) {
                            if (has_post_video($car->ID)) {
                                echo '<div style="height:100%;width:100%;" class="item' . $active . ' vid" id="slide' . $slidecount . '">';
                                echo get_the_post_video($car->ID, '100%', '100%');
                                echo '</div>';
                            } else {
                                $url = wp_get_attachment_url(get_post_thumbnail_id($car->ID));
                                $article_date = get_the_time('D d M');
                                $article_headline = get_the_title($car->ID);
                                echo '
					  <div class="item' . $active . '" id="slide' . $slidecount . '">
						<a href="' . get_permalink($car->ID) . '">
						  <div class="carousel-headline">
						    <span class="article-date">' . $article_date . '</span>
						    <h2>' . $article_headline . '</h2>
						  </div>
						  <img src="' . $url . '">
						</a>
					  </div>
					  ';
                            }
                            $slidecount++;
                            $active = '';
                        }
                        ?>
                    </div>
                    <div class="carousel-controls">
                        <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                        <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
                    </div>
                </div>
                <!-- /#myCarousel -->
                <div class="span8 feature-headlines">
                    <ul class="clearfix">
                        <?php
                        $divcount = 1;
                        foreach ($posts_array as $car2) {
                            $cat = get_the_category($car2->ID);
                            $promo_headline = get_post_meta($car2->ID, 'promo_headline', true);

                            echo '<li class="slide' . $divcount . '"><div>';
                            echo '<h3>' . '<a href="' . get_permalink($car2->ID) . '">' . $promo_headline . '</a></h3>';
                            for ($i = 1; $i <= 1; $i++) {

                                if ($cat[0]->cat_name == 'Features') {
                                    echo '<p><a href="' . get_category_link($cat[1]->cat_ID) . '">' . $cat[1]->cat_name . '</a></p></div></li>';
                                } else {
                                    echo '<p><a href="' . get_category_link($cat[0]->cat_ID) . '">' . $cat[0]->cat_name . '</a></p></div></li>';
                                }
                            }
                            $divcount++;
                        }
                        ?>

    In that code I have also used a custom field called “promo_headline”, which is a shorter version of the post title. This is useful if you want the full headline in the slideshow and a shorter version in ‘other bit’ (as above).

Viewing 1 replies (of 1 total)
  • The topic ‘Feeding blog posts from a category into Bootstrap (jQuery) Carousel’ is closed to new replies.

Tags