|  About Me  |  Blogs  |  Photos  |  Publications  |  Resume  | 

Display random comic strips from rss feed

I was growing bored of my old wordpress theme so I set out to do something more fun. I wrote a python script to return a random comic strip from the dilbert rss feed and set it as the background of my header.

The script, written in mod python, uses feedparser to grab an image location. It then fetches it and returns the image content.

from mod_python import apache
import feedparser, string, re, urllib2
from random import randrange

def dilbert_daily(req):
    d = feedparser.parse("http://www.tapestrycomics.com/dilbert.xml")
    url = d.entries[randrange(0, len(d.entries)-1, 1)].enclosures[0].url
    req.content_type = "image/jpeg"
    return urllib2.urlopen(url).read()

In the wordpress theme set the background image of header to the script url, i.e.,

#header {
        background: url("http://blog.ibao.net/themes/custom-dilbert/scripts/dilbert_daily") repeat bottom left;
        padding: 0;
        margin: 0 auto;
        height: 211px;
        width: 100%;
        }

and one more thing, set the heading slightly transparent so we can still make out the comic dialogue where the heading is.

h1, h1 a, h1 a:hover, h1 a:visited, .description {
        color: green;
        -moz-opacity:0.9; /*Mozilla*/
        filter: alpha(opacity=75); /*IE*/
        width:100%; /* need to also specify layout for IE filter to work */
        }

so there we have it! Our own dilbert digest. You Likey?

Sidenote
  • Safari/Konqueror fix: It appears that on konqueror based browsers the styles defined in the page header takes precedence over the ones in css. I had some duplicate definitions for header background in the header file which overrides the css so I had to delete that. This makes sense, however there was another behaviour which doesn't. The width and height css attribute for the header id doesn't seem to be honoured on the page. I had to specify it in the page for it to work properly, i.e.,
    <div id="header" style="width:100%;height:211px;">
    
    Thanks to Diego for pointing this out :)

Leave a Reply

You must be logged in to post a comment.