Add Border Between Bootstrap Columns from Twitter

Question

Ok, I have an interesting puzzle to solve.

I have a WordPress site that is outputting a Twitter feed using oAuth Twitter Feed for Developers Plugin

I needed that plugin because I need to display the 3 most recents tweets from a user horizontally. Here's the code that goes with the plugin:

<div class="container" id="b2btwitter">
  <?php
    $tweets = getTweets('anthonytravel', 3, array('exclude_replies' => true, 'include_rts' => false));
    foreach($tweets as $tweet){
        if($tweet['text']){
          echo '<div id="twitterCol" class="col-xs-6 col-sm-4">';
            $the_tweet = $tweet['text'];
            foreach($tweet['entities']['user_mentions'] as $key => $user_mention){
                $the_tweet = preg_replace(
                    '/@'.$user_mention['screen_name'].'/i',
                    '<a href="http://www.twitter.com/'.$user_mention['screen_name'].'" target="_blank">@'.$user_mention['screen_name'].'</a>',
                    $the_tweet);
            }
            foreach($tweet['entities']['hashtags'] as $key => $hashtag){
                $the_tweet = preg_replace(
                    '/#'.$hashtag['text'].'/i',
                    '<a href="https://twitter.com/search?q=%23'.$hashtag['text'].'&src=hash" target="_blank">#'.$hashtag['text'].'</a>',
                    $the_tweet);
            }
            foreach($tweet['entities']['urls'] as $key => $link){
                $the_tweet = preg_replace(
                    '`'.$link['url'].'`',
                    '<a href="'.$link['url'].'" target="_blank">'.$link['url'].'</a>',
                    $the_tweet);
            }
            echo '<h1>Anthony Travel</h1><h2><a href="https://www.twitter.com/AnthonyTravel">@anthonytravel</a></h2>';
            echo '<p>'.$the_tweet.'</p>';
            echo '<span> -- '.humanTiming(strtotime($tweet['created_at'])) . ' ago</span>';
            echo '</div>';
        } else {
            echo '
            <br /><br />
            <a href="http://twitter.com/anthonytravel" target="_blank">Click here to read anthonytravel\'S Twitter feed</a>';
        }
    }
    function humanTiming ($time)
    {
        $time = time() - $time; // to get the time since that moment
        $tokens = array (
            31536000 => 'year',
            2592000 => 'month',
            604800 => 'week',
            86400 => 'day',
            3600 => 'hour',
            60 => 'minute',
            1 => 'second'
        );
        foreach ($tokens as $unit => $text) {
            if ($time < $unit) continue;
            $numberOfUnits = floor($time / $unit);
            return $numberOfUnits.' '.$text.(($numberOfUnits>1)?'s':'');
        }
    }
  ?>

Everything works great with this. But what I need is a divider between the tweets. So two dividers. Something like this:

           |           |            
 Tweet 1   |  Tweet 2  |   Tweet 3 
           |           |           
           |           |           

As you can see, I can't just add a border to the right side of the div because then the last column would have the border. I need to add CSS to one or two of the columns and not the other(s).

Is there a way to do that in JavaScript or something?

My other thought would be to add the twitter feed three separate times, but do the latest tweet minus 1 or something to that effect. I just don't know if that's possible/how to do that with the Twitter API.

Answer 1

Solution found! Here's the final code:

<?php
    $x = 1;
    $tweets = getTweets('anthonytravel', 3, array('exclude_replies' => true, 'include_rts' => false));
    foreach($tweets as $tweet){

        if($tweet['text']){
          echo '<div id="twitterCol" class="col-sm-6 col-sm-4 border-'.$x++.'">';
            $the_tweet = $tweet['text'];
            foreach($tweet['entities']['user_mentions'] as $key => $user_mention){
                $the_tweet = preg_replace(
                    '/@'.$user_mention['screen_name'].'/i',
                    '<a href="http://www.twitter.com/'.$user_mention['screen_name'].'" target="_blank">@'.$user_mention['screen_name'].'</a>',
                    $the_tweet);
            }
            foreach($tweet['entities']['hashtags'] as $key => $hashtag){
                $the_tweet = preg_replace(
                    '/#'.$hashtag['text'].'/i',
                    '<a href="https://twitter.com/search?q=%23'.$hashtag['text'].'&src=hash" target="_blank">#'.$hashtag['text'].'</a>',
                    $the_tweet);
            }
            foreach($tweet['entities']['urls'] as $key => $link){
                $the_tweet = preg_replace(
                    '`'.$link['url'].'`',
                    '<a href="'.$link['url'].'" target="_blank">'.$link['url'].'</a>',
                    $the_tweet);
            }

            echo '<h1>Anthony Travel</h1><h2><a href="https://www.twitter.com/AnthonyTravel">@anthonytravel</a></h2>';
            echo '<p>'.$the_tweet.'</p>';
            echo '<span> -- '.humanTiming(strtotime($tweet['created_at'])) . ' ago</span>';
            echo '</div>';
        } else {
            echo '
            <br /><br />
            <a href="http://twitter.com/anthonytravel" target="_blank">Click here to read anthonytravel\'S Twitter feed</a>';
        }
    }
    function humanTiming ($time)
    {
        $time = time() - $time; // to get the time since that moment
        $tokens = array (
            31536000 => 'year',
            2592000 => 'month',
            604800 => 'week',
            86400 => 'day',
            3600 => 'hour',
            60 => 'minute',
            1 => 'second'
        );
        foreach ($tokens as $unit => $text) {
            if ($time < $unit) continue;
            $numberOfUnits = floor($time / $unit);
            return $numberOfUnits.' '.$text.(($numberOfUnits>1)?'s':'');
        }
    }
  ?>

Notice the top that has $x = 1; and the border-'.$x++.' bits. Thanks to @Rick for the idea! Essentially I added border-"*a number*" to the class of the wrapper div. That gave me a unique number for each tweet and allowed me to target those unique numbers with specific CSS, ie. a border. It took me a while to figure out that the variable needed to be defined outside the main foreach and then it could be made to repeat IN the foreach using ++. But I learned about PHP's ++!

Happiness

Answer 2

Right before if($tweet['text']) you could start a counter, and then assign your CSS based upon n the current step in the counter.