timbroder.com

To get inline Admin Previews in the list view

1) Inherit from PreviewAdmin in your ModelAdmin
2) In your model’s template directory, create a folder called preview, and create a template for that model’s preview

Example for model Article

class ArticleAdmin(PreviewAdmin, other admin.ModelAdmin,,,_):
list_display = (..,.., ‘admin_slide_preview’)
…
…

then edit
app_that_has_ArticleModel/templates/preview/article.html

whatever is in article.html will be shown inline
Access your Article object through {{ object }} in the template

code updates on github

class PreviewAdmin(admin.ModelAdmin):
    #add to your ModelAdmin
    #list_display = ('headline','created_date', 'state', 'admin_slide_preview')
    def admin_slide_preview(self, obj):
        return "

" % obj.id
    admin_slide_preview.allow_tags = True
    admin_slide_preview.short_description = 'Preview'

    def get_preview(self, request, object_id):
        sub = self.queryset(request)[0]
        template = "preview/%s.html" % sub.__class__.__name__
        return object_detail(request, queryset=self.queryset(request), object_id=object_id, template_name=template.lower())

    def get_urls(self):
        urls = super(PreviewAdmin, self).get_urls()
        my_urls = patterns('',
            (r'^(?P\d+)/preview/$', self.get_preview),
        )
        return my_urls + urls

    class Media:
        js = js = ('js/jquery.js',
                   'js/jquery.adminpreview.js'

//base.css
.previewslide {
cursor:pointer;
cursor:hand;
}

//jquery.adminpreview.js
$(document).ready(function(){
 $(".previewslide").click(function(){
  $.ajax({
   url:$(this).attr('id'),
   context: $(this).parent().parent(),
   success:function(data){
    var $html = $(data);
    $('.previewed').each(function(){
     $(this).remove();
    });

    if(!$html.hasClass('previewed')){
     $html.addClass('previewed');
    }

    $html.addClass($(this.context).attr('class'));
    $(this.context).after($html);
   }
  });
 });
});