0

This is the site that I am working with. I need to make the green images into recent post thumbnails, to be able to have a content writer/author (non developer) designate a thumbnail to display in the carousel of recent posts. I am doing this in wordpress through a theme I am designing. I have the carousel implemented as one can see but I don't know how to make the green images show recent posts' thumbnails'.

Here is the code

    <div class="jumbotron" >
        <div class="container-fluid">
            <div class="row" id="spacer"></div>
            <div class="row" id="btn-row">
                <div class="col-md-3"></div>
                <div class="col-md-6" class="splash-btn-col">
                    <a href="http://52.35.5.149/content/content/" class="splash-btn">Content</a>
                    <a href="http://www.fractured-gaming.com/forums/" class="splash-btn">Forums</a>
                </div>
                <div class="col-md-3"></div>
            </div>
            <div class="row">
                <div id="owl-demo" class="owl-carousel owl-theme">
                     <div class="item"><h1>1</h1></div>
                     <div class="item"><h1>2</h1></div>
                     <div class="item"><h1>3</h1></div>
                     <div class="item"><h1>4</h1></div>
                     <div class="item"><h1>5</h1></div>
                     <div class="item"><h1>6</h1></div>
                     <div class="item"><h1>7</h1></div>
                     <div class="item"><h1>8</h1></div>
                     <div class="item"><h1>9</h1></div>
                     <div class="item"><h1>10</h1></div>
                     <div class="item"><h1>11</h1></div>
                     <div class="item"><h1>12</h1></div>
                     <div class="item"><h1>13</h1></div>
                     <div class="item"><h1>14</h1></div>
                     <div class="item"><h1>15</h1></div>
                     <div class="item"><h1>16</h1></div>
                </div>

                <script>
                    $(document).ready(function() {

                  var owl = $("#owl-demo");

                  owl.owlCarousel({
                      items : 10, //10 items above 1000px browser width
                      itemsDesktop : [1000,5], //5 items between 1000px and 901px
                      itemsDesktopSmall : [900,3], // betweem 900px and 601px
                      itemsTablet: [600,2], //2 items between 600 and 0
                      itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
                  });

                  // Custom Navigation Events
                  $(".next").click(function(){
                    owl.trigger('owl.next');
                  })
                  $(".prev").click(function(){
                    owl.trigger('owl.prev');
                  })
                  $(".play").click(function(){
                    owl.trigger('owl.play',1000); //owl.play event accept autoPlay speed as second parameter
                  })
                  $(".stop").click(function(){
                    owl.trigger('owl.stop');
                  })

                });
                </script>
            </div>
        </div>  
    </div>

So I tried this below and it made the screen white and when i inspect with google chrome the body is empty for some reason.

    <div class="jumbotron" >
        <div class="container-fluid">
            <div class="row" id="spacer"></div>
            <div class="row" id="btn-row-fluid">
                <div class="col-xs-3"></div>
                <div class="col-xs-6" class="splash-btn-col">
                    <div class="col-xs-5">
                        <a href="http://52.35.5.149/content/content/" class="splash-btn" id="content-btn">Content</a>
                    </div>
                    <div class="col-xs-2"></div>
                    <div class="col-xs-5">
                        <a href="http://www.fractured-gaming.com/forums/" class="splash-btn">Forums</a>
                    </div>
                </div>
                <div class="col-xs-3"></div>
            </div>
            <div class="row">
                <div id="owl-demo" class="owl-carousel owl-theme">
                 <?php 
                    $args = array(
                        'post_type' => 'post', //this tells WP what type of posts you want to get (post, page, etc..)
                        'posts_per_page' => 1, // this is the number of posts you want to get
                        'order' => 'DESC' // this is the order you want it to use
                        'orderby' => date // you want to order by date if you want the latest ones
                    );

                    // Custom query.
                    $query = new WP_Query( $args );  // creating the query

                    // Check that we have query results.
                    if ( $query->have_posts() ) { 
                        // Start looping over the query results.
                        while ( $query->have_posts() ) {

                            //get the post
                            $query->the_post();
                            $id=get_the_ID(); //getting post id (not neccessary here)
                            $url=wp_get_attachment_image_src( get_post_thumbnail_id( $id ), 'full' ); //getting the url of the post image
                            ?>     

                    <div class="item">
                        <a href="<?php the_permalink();?>"><img src="<?php echo $url;?>"></a>
                    </div>

                            <?php         
                        } 
                    } 
                    // Restore original post data.
                    wp_reset_postdata(); 
                    ?>
                </div> 

                <script>
                    $(document).ready(function() {

                  var owl = $("#owl-demo");

                  owl.owlCarousel({
                      items : 6, //10 items above 1000px browser width
                      itemsDesktop : [1000,5], //5 items between 1000px and 901px
                      itemsDesktopSmall : [900,3], // betweem 900px and 601px
                      itemsTablet: [600,2], //2 items between 600 and 0
                      itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
                  });

                  // Custom Navigation Events
                  $(".next").click(function(){
                    owl.trigger('owl.next');
                  })
                  $(".prev").click(function(){
                    owl.trigger('owl.prev');
                  })
                  $(".play").click(function(){
                    owl.trigger('owl.play',1000); //owl.play event accept autoPlay speed as second parameter
                  })
                  $(".stop").click(function(){
                    owl.trigger('owl.stop');
                  })

                });
                </script>
            </div>
        </div>  
    </div>

:

0

I can't see your site. However, based on the code you added, you could try something like this: css:

.owl-controls .owl-pagination .owl-page span{
height: 50px;
width:50px;
background-size: cover;
background-position: center;}

JS:

$('.owl-controls .owl-pagination .owl-page').each(function(index, value){
    $(this).children('span').css('background-image', "url('"+$('.owl-carousel .owl-wrapper .item').eq(index).find('img').attr('src')+"')");
});

Here is a working example: http://codepen.io/BertoMejia/pen/LRLRBg

| improve this answer | |
  • Sorry but that wouldnt remotley accomplish what I said? Looking for answers to my actual question.... This is static. My question is how to have a dynamiclly populated carousel with wp. – Weber Sep 28 '16 at 2:23
  • Ok. When I originally looked at your question, it did not have the php. I thought that is what you were looking for. Try adding quotes around "date" in your args. That is probably breaking the script. – Berto Sep 28 '16 at 17:17
  • It was. Thank you for your help. I really appreciate it – Weber Oct 9 '16 at 19:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.