Resizing Image on upload in Django

2009-02-21T00:00:00-08:00

I had trouble wrapping my head around Django ORM's handling of Images.

The first hurdle was realizing that there is no easy way to store images in the database. I couldn't be too upset with that, it was a flawed concept at best. I wrote a dump script to fix this, and converted my app to read from disk. One of those "good" problems.

When it came to uploading new content... I seemed to hit every roadblock. So I thought this guide might be of use for people (other than future-me). What I want to do is upload an image, resize it per the requirements of my app, and save the resized image.

The Template

The template was fairly easy, yet I forgot to specify the enctype attribute. Here's what you need:

<h2>Upload a new photo</h2>

<form action="" method="POST" class="cmxform" enctype="multipart/form-data">
  <fieldset>
    <ul>
      <li>
        
        <label for="id_image">Photo</label>
        
      </li>

    </ul>
  </fieldset>
  <input type="submit" value="Submit" class="submit"/>
</form>

Resizing an image

Resizing an image was straightforward. The Python Imaging Library is very easy to work with, and very similar to the PHP GD Library. There was one caveat...

def handle_uploaded_image(i):
    # resize image
    imagefile  = StringIO.StringIO(i.read())
    imageImage = Image.open(imagefile)

    (width, height) = imageImage.size
    (width, height) = scale_dimensions(width, height, longest_side=240)

    resizedImage = imageImage.resize((width, height))

    imagefile = StringIO.StringIO()
    resizedImage.save(imagefile,'JPEG')
    # ...

I'm using OS X and didn't have libjpeg installed. The recommended way was to install it via fink.

Generating a filename

I like using MD5 to generate filenames for images because MD5 almost guarantees uniqueness ("unique enough").

   ...
    filename = hashlib.md5(imagefile.getvalue()).hexdigest()+'.jpg'
    ...

Saving the file via the model

The model is supposed to put the files in the right spot and populate the meta data.

You can supposedly do this via:

   ...
    my_object = MyDjangoObject()
    my_object.photo.save(filename, content)
    ...

That will also take care of my_object.save(). The trick is that content needs to be a django.core.files.File object or things will never work. Further more, you can't use a StringIO for your File object. A true file object is best. Hence rewriting the JPEG:

    imagefile = open(os.path.join('/tmp',filename), 'w')
    resizedImage.save(imagefile,'JPEG')
    imagefile = open(os.path.join('/tmp',filename), 'r')
    content = django.core.files.File(imagefile)

Note: I also had to reopen the imagefile.

All together now

@login_required
def my_view(request, slug, item_slug):

    if request.method == 'POST':
        form = NewImageForm(request.POST, request.FILES)

        if form.is_valid():
            handle_uploaded_image(request.FILES['image'])
            return HttpResponseRedirect(elsewhere)
    else:
        form       = NewImageForm()

    return render_to_response(somewhere, locals(),
                              context_instance=RequestContext(request))

def handle_uploaded_image(i):
    # resize image
    imagefile  = StringIO.StringIO(i.read())
    imageImage = Image.open(imagefile)

    (width, height) = imageImage.size
    (width, height) = scale_dimensions(width, height, longest_side=240)

    resizedImage = imageImage.resize((width, height))

    imagefile = StringIO.StringIO()
    resizedImage.save(imagefile,'JPEG')
    filename = hashlib.md5(imagefile.getvalue()).hexdigest()+'.jpg'

    # #save to disk
    imagefile = open(os.path.join('/tmp',filename), 'w')
    resizedImage.save(imagefile,'JPEG')
    imagefile = open(os.path.join('/tmp',filename), 'r')
    content = django.core.files.File(imagefile)

    my_object = MyDjangoObject()
    my_object.photo.save(filename, content)

I'm sure there's room to optimize this flow. But this gets the job done. I do wish I could have used a StringIO instead of an actual file to save the image. Writing to disk twice seems silly.

Textmate Snippets for YUI em calculations

2007-05-08T00:00:00-07:00

[tags]yui, yahoo, css, snippet, textmate, ems, px[/tags]

If you use YUI grid layouts you'll notice that ems are the preferred units and for good reason. But ems don't make sense to people like us who want to be super precise down to the pixel... pixels make sense.

So type in a number select it and run this ruby script as a TextMate command (that outputs as a snippet):

You'll have the proper tab stops to change the newly calculated ems from width to margin-left or margin-right or whatever it is you desire.

TextMate + YUI = YUI snippets!

2007-04-30T00:00:00-07:00

I do a lot of YUI grid layouts and I love the nestable grids:

<div class="yui-g$1"> 
    <div class="yui-u first">
        $2
    </div>
    <div class="yui-u">
        $3
    </div>
</div>

There's a tab stop after yui-g in case you want to use one of the variants (yui-gb, yui-gc, etc).

I'm working on a site that uses two equal width columns... a lot... so this comes in quite handy. So long tables.

Dave Dash