Thumbnails in the django admin panel using sorl.

Question

Hey,

I am trying to have the pictures I upload in the Django admin panel to show up as thumbnails instead of the path. I have sorl installed and can make thumbnails that show up in my views.

I have found 2 snippets (http://www.djangosnippets.org/snippets/579/ and http://www.djangosnippets.org/snippets/934/) that I have tried to implement, but both attempts have failed because of the meager documentation and my as yet shallow understanding of the Django framework.

Could someone please provide a dumbed-down step-by-step guide of how I can get this to work?

Thanks!

Answer 1

Yeah :) I can ;)

First you need to create a custom template tag that handles the thumbnail:

from django.template import Library
from django.utils.safestring import mark_safe
from django.contrib.admin.templatetags.admin_list import result_headers

register = Library()

def results(cl):
    out = []
    for item in cl.result_list:
        url = cl.url_for_result(item)
        code = '<a href="%(url)s">%(img)s</a> <div><a href="%(url)s">%(title)s</a></div>' % {
            'url': url,
            'img': item.preview.thumbnail_tag,
            'title': item.title,
        }
        out.append(mark_safe(code))

    return out

def gallery_result_list(cl):    
    return {'cl': cl,
            'result_headers': list(result_headers(cl)),
            'results': results(cl)}
result_list = register.inclusion_tag("admin/app_name/model/change_list_results.html")(gallery_result_list)

where item.preview.thumbnail_tag is the thumnail created by sorl :) [I got the original code from the default template tag]

Second you need to create a template for your model (that uses the new custom template tag), it must be in this directory schema: templates_dir/admin/app_name/model/change_list.html

and have the following code:

{% extends "admin/change_list.html" %}
{% load adminmedia admin_list my_admin_tags i18n %}

{% block result_list %}
    {% if action_form and actions_on_top and cl.full_result_count %}{% admin_actions %}{% endif %}
    {% gallery_result_list cl %}
    {% if action_form and actions_on_bottom and cl.full_result_count %}{% admin_actions %}{% endif %}
{% endblock %}

as you can see in the tag function you need to create one more template (called change_list_result.html) for display the image correctly:

<style>
td.page { text-align: center; }
td.page a { font-weight: bold; }
</style>
{% if results %}
<table cellspacing="0">
<tbody>
<tr>
{% for result in results %}
    <td class="page">
        {{ result }}
    </td>
    {% if forloop.counter|divisibleby:3 %}
</tr><tr>
    {% endif %}
{% endfor %}
</tr>
</tbody>
</table>
{% endif %}

so at the end you'll have 3 files:

1. templates_dir/admin/app_name/model_name/change_list.html
2. templates_dir/admin/app_name/model_name/change_list_result.html
3. your_project/app_name/templatetags/my_admin_tags.py

and, of course, templatetags must be added to INSTALLED_APP in settings ;)

this is all ;) Hope this can be helpful.