At the onset of this div, I took the opportunity to pass some more arguments into the loop. In following Bootstrap’s instructions on carousel creation, the next step is to combine some more HTML and PHP starting with the div class “carousel-inner”. This is important as we want the carousel indicators to sync with the carousel items which we will visit next. This is what makes the indicator “brighter” or seem “lit up” as seen in the above image. The class assignment being passed: if ( $the_query->current_post = 0 ) : active endif is using PHP to loop through our items and apply the active Bootstrap class to the current carousel item. You can see that it’s simply an ordered list with one line item. This is the sole purpose of our fist loop.
#Bootstrap carousel fluid image code
What were doing with the code below (considering in PHP, 0 actually equals 1 or “current” or in this case “active”) is, we’re creating a loop that simply changes the active state of the bootstrap carousel indicators at the bottom of the carousel. Remember, we’re using only WordPress Codex hooks here, nothing custom. You will also see rewind_posts() used below as once we reach the end of our loop, we want to “rewind” back to the first post or “carousel-item” and start again. Since I am using WP_Query(), I can use the arguments defined in the above gist. Using these arguments, I can specify the post-type or category and it allows for further customization.įrom here, we’re going to need to start the carousel HTML portion that will call in the specific WordPress hooks associated with the carousel indicators only.
So, considering the task at hand, the first thing I want to do is create any custom arguments I want to pass into the loop at the top of my include page as seen below: One loop to loop the “carousel-indicators” at the bottom, another to loop the “carousel items” (images and text) themselves. The most complicated part being that we’re running two separate loops using WP_Query() rather than the standard WordPress Loop. The PHP behind this tutorial is not very complicated. I made my carousel into an include file that is being called in on “front-page.php”, so the gists I’m posting are able to be used to create an include, or, just use the code in-page, once again, your decision as a designer. I’m sure using non-mobile first methods will work just as well using a guttered column and the “img-fluid” class, but that decision is up to you. So, there will be some overlapping of boundaries at times but good CSS and mobile first techniques make this very do-able. For my tutorial and example, I’m using a Bootstrap 4 “container-lg” which is a full-bleed (non-guttered) container. If you’re looking for more flexibility within the WordPress Loop, I’m sure adding the right hooks and arguments to your code will produce results.Īlso, consider the sizing of images! This will be particular to your own build-out. If you want to show all categories or just one, this will work great. Choose three for a three item carousel, choose 10 if you want your visitors to fall off 🤐.Īnother item to consider is how many categories your blog has. !important How many items you choose here will be reflected in your carousel. To set the amount of carousel items go to Settings -> Reading in your WordPress dashboard and you will see: This is important because we need to use the WordPress hook rewind_posts() to essentially make the loop - loop (super corn-ball, I get it 😜), as seen here on Bootstrap’s website. The first thing we need to consider here is how many bootstrap carousel “items” we want to show. This all relies on a relatively simple administrative decision in page editing: change management (which can be difficult for some), but by using the built in WordPress “featured image” portion of a post - along with consistent image cropping - this Bootstrap Carousel / WordPress Loop combo works flawlessly. Even pulling in the_excerpt(), using rewind_posts() to go back to the beginning of the loop, and other useful loop programming can be applied to the Bootstrap Carousel. The great thing about this tutorial is that, as long as you can get your users to utilize the “ featured image” portion of the post, the rest is relatively simple. Anyhow, I decided to run with this on a project I was recently a part of and I think you’ll like it. Wouldn’t it be great if you could utilize the Bootstrap 4 Carousel with your latest WordPress blog posts by using featured images? Like, every time I post something new, it will replace the current “newest” image in the carousel - bump that to the second slot - and so on and so forth, giving the carousel a more dynamic use.
#Bootstrap carousel fluid image how to
Back in 2015 I wrote a similar tutorial on how to do this with the WordPress theme customizer… Any-who… one day I was thinking. Well, not really a battle per se, more of a camaraderie or working relationship.
0 kommentar(er)
