Readers of this site (save those reading it through an aggregator) will notice the randomly rotating banner at the top of the page. I included the banner to add a little more color on the site, show off a few photos I have taken, and to give me an excuse to write a custom view in Python. Django made it easy.
In brief, here are the steps involved:
- define a directory where the banners will live
- set up the URLconf
- create a view to handle the request and render the response
- include the
<img>tag in the template
The central decision I had to make was how the banners would be managed. My first inclination was to store the image information in a database and have them managed through Django’s admin interface. That seemed to be a bit overkill for my humble site, and would have required the creation of a model and the inclusion of the Python Image Library (to handle file uploads using the ImageField field type).
All I really need is a directory to house the banners, and then the banners could be added and deleted through my normal codebase update process (rsync over ssh, if you must know). Since I would like the ability to easily change this location, I create an entry in the project settings file, to be used by the view function:
# in settings.py
BANNER_DIR = os.path.join(os.path.dirname(__file__), 'static', 'images', 'banners')
This variable simply specifies an OS-independent file system path pointing to the directory where the images will reside.
Next, I add a URL to the URLconf, instructing requests for /images/banner/ to be handled by the specified view function:
# in urls.py
urlpatterns += patterns('',
(r'^images/banner/$', 'stringify.weblog.views.banner'),
)
The view function is responsible for receiving the request, gathering a list of all the banner images from the aforementioned settings.BANNER_DIR directory, and randomly selecting one to return in the response:
# in weblog/views.py
def banner(request):
import settings, glob, random, os.path
from django.http import HttpResponse
image_ext = None
image_data = None
image_dir = settings.BANNER_DIR
ext_mimetypes = {
'jpg': 'image/jpeg',
'gif': 'image/gif',
'png': 'image/png', }
if os.path.isdir(image_dir):
images = []
for ext in ext_mimetypes.keys():
paths = glob.glob(os.path.join(image_dir, '*.' + ext))
images.extend(paths)
if len(images) > 0:
image = random.choice(images)
image_ext = image.split('.')[-1]
image_data = open(image, 'rb').read()
return HttpResponse(image_data, mimetype=ext_mimetypes.get(image_ext))
Note the ext_mimetypes dictionary both limits the types of files served, and also provides a lookup for the mime type for the HTTP response. If I wanted to also serve, say, TIFF images, all I would have to do is add 'tif': 'image/tiff',.
With all the elements in place, all that is left to do now is to upload some images — all with similar dimensions — to the settings.BANNER_DIR directory, and include an <img> tag in a template somewhere:
<!-- in templates/weblog/base_site.html -->
<img id="banner" src="/images/banner/?{% now "YmdHis" %}" width="600" height="75" alt="" />
One last little bit of trickery involves the use of Django’s {% now %} template tag to append the current time to the end of the URL in the query string. This is an anti-caching measure to prevent browsers (IE in particular) from caching the URL and loading the same image each time. What good is a rotating banner if it does not rotate?
