Blackbird.py and background images
January 29, 2012 at 11:42 PM by Dr. Drang
In his comment on last night’s post about that fraction with the interesting decimal representation, Matthew McVickar pointed out a bug in my system for displaying tweets:
I’m curious about the background in that embedded tweet of mine. My Twitter profile background is solid blue, and I don’t have a background image set. Looking up one of my tweets with the API, though, I see that my profile_background_image_url variable points to that pixelated background in the embedded tweet. I recognize it as a background image that I used a while ago. It would appear that hitting ‘Remove background’ on the Twitter ‘Design Settings’ page just flips a switch to show the color and not a background image, while the image itself remains attached to the profile. And since background images trump colors in CSS, that’s why my embedded tweet features that old image! Strange.
Luckily the bug was easy to fix.
My system for displaying embedded tweets is called Blackbird.py. It’s my fork of Jeff Miller’s Python reimplementation of Robin Sloan’s original Blackbird Pie. A few weeks ago I did a significant rewrite, stealing a few ideas from Twitter’s own embedded tweet implementation to make tweets look better in the RSS feed. In doing so, I needed to add some JavaScript/jQuery code to the system to get the look I wanted here on ANIAT itself.
As of yesterday, the background was set with the line
$("#" + divID).css('background', 'url(' + data.user.profile_background_image_url + ') #' + data.user.profile_background_color);
which, for Matthew’s tweet that I quoted yesterday, is the jQuery equivalent of this CSS:
#t163374655128862720 {
background: url(https://si0.twimg.com/profile_background_images/15300442/Static.png) #0BAEE5;
}
(That long string with a t followed by several digits is the id of the <div> that contains the embedded tweet. The digits come from the status ID of the tweet, and the t stands for “tweet.”)
If the image is available, it will be displayed. As Matthew discovered, Twitter doesn’t delete the image when you choose “Remove background” from your design settings—it just flips the value of a Boolean variable.
That Boolean variable is called profile_use_background_image, and it’s available in the user section of the data returned by the statuses/show command of the Twitter API. By changing the JavaScript to
if (data.user.profile_use_background_image == true) {
$("#" + divID).css('background', 'url(' + data.user.profile_background_image_url + ') #' + data.user.profile_background_color);
}
else {
$("#" + divID).css('background', '#' + data.user.profile_background_color);
}
the embedded tweet respects the user’s choice of background.
The new code is in the Blackbird.py GitHub repository and has been installed here. Because it’s JavaScript and changes the page on the fly, Matthew’s tweet, which had the wrong background yesterday, has the right background today. Like this:
@drdrang Have you seen this ‘mind-melting’ equation? Seems to be up your alley of amateur math naïveté. blog.untitledmagazine.net/post/166434898…
— Matthew McVickar (@matthewmcvickar) Sat Jan 28 2012
So now when people read yesterday’s post and see his comment about a pixelated background image, they’ll think he’s nuts. I can live with that.
Update 1/30/12
Note to self: If you’re going to embed a tweet twice, and both instances might appear on the same page, make sure you change the id of one of them by hand. Two <div>s with the same id being altered by jQuery can lead to really stupid looking results.
Second update 1/30/12
Mr. McVickar’s wish is apparently my command. Here’s an another line of JavaScript/jQuery I added to the styleTweets function to change the link color to the tweeter’s preference.
$("#" + divID + " a").css('color', '#' + data.user.profile_link_color);
Apart from a couple of things associated with the sidebar, which have no business in an embedded tweet, profile_link_color is the last user setting that comes in response to a call to statuses/show. So I should be done tweaking Blackbird.py for a while.
