Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Angelina Bethoney
Angelina Bethoney
117 Points
Posted by Angelina Bethoney
Angelina Bethoney
117 Points

Making Bootstrap Carousel Responsive

I'm following along with the Bootstrap to WP courses. In the course, the website uses featured blog posts for their carousel. They show how to set up a new $args and how to select the chosen category.

I would like to use the carousel for my individual portfolio pieces page. I want the carousel to slide through pictures of the portfolio piece. Is there direct code I need to set up in the args (for instance should I use some sort of get_image or something??)? Is there a way to make this responsive so I can add the pictures in from the dashboard?

Thanks for you help!

2 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Hi,

You would just use the same WP_Query call you would use to display your portfolio items on your portfolio page :)

http://codex.wordpress.org/Class_Reference/WP_Query#Type_Parameters

Angelina Bethoney
Angelina Bethoney
117 Points
Angelina Bethoney
Angelina Bethoney
117 Points

I'm still just a little confused. My carousel is up, but it will not show anything. This is my code:

"""

<?php get_header(); ?>

    <?php

    $args = array(
      'post_type' => 'post_thumbnail_id'
    );
    $the_query = new WP_Query ($args);  
    ?>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <?php if (have_posts ()) : while ($the_query->have_posts()) : $the_query -> the_post(); ?> <li data-target="#carousel-example-generic" 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>

<?php rewind_posts();?>

<!-- Wrapper for slides --> <div class="carousel-inner"> <?php if (have_posts ()) : while ($the_query->have_posts()) : $the_query -> the_post(); ?> <div class="item active"> <?php $thumbnail_id = get_post_thumbnail_id(); $thumbnail_url = wp_get_attachment_image_src($thumbnail_id, 'thumbnail-size', true);

    ?>
  <p><img src="<?php echo $thumbnail_url[0];?>" alt="<?php the_title();?>">Featured Image</p>
  <div class="carousel-caption"><?php the_title();?>
  </div>
</div>
<?php endwhile; endif; ?>
<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    ...
  </div>
</div>

...

</div>

<!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>

<?php get_footer(); ?> """

As for the "Featured Image" custom field type - I can't seem to figure out how to use more than one picture. Is there a way to make this an option?