Row-fluid or container-fluid in Roots? (also, carousel usage?)

1

What’s the bootstrap equivalent to this in roots? I can’t seem to find the styling for row-fluid to style some columns/scaffolding.

Also, unrelated but what’s the best option to use the bootstrap carousel in wp?

2

Roots has moved from 2.3.2 to Bootstrap 3: checking out their migration guide should help. The whole scaffolding framework was changed significantly, with one change being every row is now fluid (the containers are not full width though!).

As for the carousel implementation, there are some plugins in the WordPress repository which do this, but I’ll also be releasing my own in the not too distant future.

3

Thanks for the fast reply. I’ll take a look, but I think it’s just what I needed.

For the carousel, I want to stray away from plugins as much as possible to focus more on branding and increase page speed. I’ll try to put together something of my own or wait for yours.

Thanks again.

4

There are plugins producing the Bootstrap carousel markup (not sure if any are Bootstrap 3), so it shouldn’t reduce page speed. Carousels have mixed (but mostly poor) results when it comes to branding. The thing they sell best is a design; great for devs, but they’re not so good at shifting products or services.

5

Like you I wanted to stay away from plugins but the Bootstrap carousel was a bit too basic for my needs. In the end I built my own plugin which uses FlexSlider from WooThemes. It’s a case of adding the FlexSlider JavaScript code from jquery.flexslider-min.js to your plugins.js file in your Roots theme and the css from flexslider.css to your Roots CSS file. Also add the fonts from /fonts/ and change the paths from the code from flexslider.css so that they point to the correct directory.

Then, if you want to have your carousel, just add the following to your main.js file:

jQuery(document).ready(function ($) {
  $('.flexslider').flexslider({
    animation: "fade",
	slideshowSpeed: 5000,
	animationSpeed: 1500,
  });

If you wanted to show a slideshow of the featured images of your recent posts, you could use something like the following:

<div id="frontSlide" class="flex-container flex-nav-container">
  <div class="flexslider">
    <ul class="slides">
<?php 
$args = array('posts_per_page' => 10);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
     $featured_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
     $featured_image = wp_get_attachment_image_src( get_post_thumbnail_id());
     $featured_image = $featured_image[0];
	 
	 if($featured_image !== FALSE) 
	     {
	                 ?>
                     <li><img src="<?php echo wp_make_link_relative($featured_image);?>" class="img-responsive" /></li>
                      <?php
			
		 }
endwhile;
wp_reset_query();
				?>
</ul>
</div>
</div>

I usually create a custom post type called banners and use featured images from that. Banners also has a custom field in which I can select a page or post that the banner links to. Finally I have a custom image size called banner so I can make sure we are using the appropriately sized image for the slider. It’s all a bit complicated, but I like doing it this way since I have full control over the code.

Having said that, I’d have a wait and look at the plugin from @foxaii - sounds good!

2 Likes