Preview Of Gallery in Django Admin

Question

I want to display the selected gallery in my admin. I'm not very capable of writing custom fields and couldn't find any well documented guidelines about it.

As for my question, I've written basic classes such as:

class GalleryViewWidget(forms.TextInput):
    def render(self,name,value,attrs):
        rendered = super(GalleryViewWidget, self).render(name, value, attrs)
        return rendered + mark_safe(....)

class ProductModelForm(forms.ModelForm):
    information = forms.CharField(widget=forms.Textarea)
    gallery = GalleryViewWidget
    class Media:
        css = {
            'all': (settings.MEDIA_URL + 'css/preview.css',)
        }
        js=(
                "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js",
                settings.MEDIA_URL + 'js/preview.js',
            )
    class Meta:
        model = Product

In my preview.js file, I want to send an ajax request, the problem is I don't know where to handle this ajax call. In my ProductModelForm ?

I'd really appreciate that if anyone gives me any knowledge about how to handle this ajax thing or another way to display selected gallery in my admin ?

score 3 · Accepted Answer · answered Jul 30 '11 at 06:29

Here I saw a bit outdated tutorial about it... It creates your own thumbnails. You need to use "sorl-thumbnail" now-days for thumbnails generation and storing it's a bit easier and more right way IMHO...

Nevertheless it's a tutorial of how to build a photo previews in admin. You could use it or enhance it with AJAX calls. But IMHO again it's not necessary...

P.S. It's better to download full sources of this app from the start.

so... article:

Django Tutorial: Photo Organizer and Sharing App Part I. Enhancing Admin.

score 1 · Answer 2 · answered Aug 02 '11 at 22:58

Your widget (with extra feature of handling postfix in file name) might look like this:

class ImageThumbnailWidget(forms.FileInput):

    def __init__(self, postfix=None, attrs={}):
         self.postfix = postfix
         super(ImageThumbnailWidget, self).__init__(attrs)

    def render(self, name, value, attrs=None):
        output = []
        if value and hasattr(value, "url"):
            img_path = value.url.split('/')[:-1]
            img_path = "/".join(img_path)
            img_name = value.url.split('/')[-1]
            if self.postfix:
                name_parts = img_name.split(".")
                ext = name_parts.pop()
                img_name_start = "_".join(name_parts)
                img_name = "%s%s.%s" % (img_name_start, self.postfix, ext)
            output.append('%s<br/><img src="%s/%s" /> <br />%s ' % 
                (_('Currently:'), img_path, img_name, _('Change:')))
        output.append(super(ImageThumbnailWidget, self).render(name, value, attrs))
        return mark_safe(u''.join(output))

Hope it helps. If it doesn't fit your needs, write some more details and I'll try to figure out something (I'd like to know where exactly do you want to show the preview of gallery - is it "changelist" or "change_view" of product, where you have inline formset with images).

phoku · Answer 3 · 2011-08-05T07:03:19.873

I'll answer the Where do I put my Admin/ModelForm Ajax views? part of your question, for the gallery part maybe have a look at photologue.

As for creating views which are called from the admin forms, I found creating simple custom views the easiest. In your Javascript code you just call {% url my_ajax_view %} with data specific to your app.

For example (a modified version of ajaxy foreignkey search):

class ForeignKeySearchInput(forms.HiddenInput):
    """
    A Widget for displaying ForeignKeys in an autocomplete search input 
    instead in a ``select`` box.
    """
    [ ... stuff removed ... ]
    def render(self, name, value, attrs=None):
        [ ... snip ... ]
        context = Context({
            'search_url': reverse('tools_autocomplete_search'),
            'model_name': self.rel.to._meta.module_name,
            'app_label': self.rel.to._meta.app_label,
            [ ... snip ... ]
        })
        template = loader.get_template('admin/widgets/foreignkeysearchinput.html')
        return rendered + mark_safe(template.render(context))

The key here is to hand the required data to the widget template, which then uses this data to call the ajax callback correctly.

The actual view then is as simple (or complicated) as your problem.

def ajax_search(request):
    """
    Searches in the fields of the given related model and returns the 
    result as a simple string to be used by the jQuery Autocomplete plugin
    """
    query = request.GET.get('q', None)
    app_label = request.GET.get('app_label', None)
    model_name = request.GET.get('model_name', None)
    search_fields = request.GET.get('search_fields', None)

    [ ... snip ... ]
    return HttpResponse(simplejson.dumps(data, indent=2))

Alternatively you can embedd ajax view into a ModelAdmin subclass (or a Mixin), but if you don't want to muck about with the internals of django.contrib.admin routing the above is way easier.

Preview Of Gallery in Django Admin

3 Answers3