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.
2
Answers
Solution found! Here's the final code:
Notice the top that has
$x = 1;
and theborder-'.$x++.'
bits. Thanks to @Rick for the idea! Essentially I addedborder-"*a number*"
to the class of the wrapperdiv
. 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 mainforeach
and then it could be made to repeat IN theforeach
using++
. But I learned about PHP's++
!Happiness
Right before
if($tweet['text'])
you could start a counter, and then assign your CSS based upon n the current step in the counter.