Question

I’m currently building a portfolio site for a client, and I’m having trouble with one small area. I want to be able to upload multiple images (varying number) inline for each portfolio item, and I can’t see an obvious way to do it.

The most user-friendly way I can see would be a file upload form with a JavaScript control that allows the user to add more fields as required. Has anybody had any experience with an issue like this? Indeed, are there any custom libraries out there that would solve my problem?

I’ve had little call for modifying the admin tool before now, so I don’t really know where to start.

Thank you to anybody who can shed some light.

Answer 1

You can extend the Admin interface pretty easily using Javascript. There’s a good article on doing exactly what you want with a bit of jQuery magic.

You would just have to throw all of his code into one Javascript file and then include the following in your admin.py:

class Photo(admin.ModelAdmin):
    class Media:
        js = ('jquery.js', 'inlines.js',)

Looking at his source, you would also have to dynamically add the link to add more inlines using Javascript, but that’s pretty easy to do:

$(document).ready(function(){
    // Note the name passed in is the model's name, all lower case
    $('div.last-related').after('<div><a class="add" href="#" onclick="return add_inline_form(\'photos\')">');
});

You probably need to do some styling to make it all look right, but that should get you started in the right direction.

Also, since you’re in inline land, check out the inline sort snippet.