django template - displaying images in table

Question

I can't get images (or image links) to display on template. Everything else is working on the template but the image "render_thumbnail", which is defined in a custom model method. What am I doing wrong? -btw the render_thumbnail works on another template when I am working only with the Images table, and am displaying using - images.render_thumbnail. Thanks.

Models.py

class Listings(models.Model):
    createdate = models.DateTimeField(auto_now_add=True)
    expirydate = models.DateTimeField(null=True, blank=True)
    price = models.IntegerField(null=True, blank=True)
    broker_y_n = models.CharField(max_length=1, blank=True, choices=broker, default='n')
    listing_type = models.ForeignKey(ListingType)
    listing_status = models.ForeignKey(ListingStatus, default=3)
    customer = models.ForeignKey(Customer)

class Image(models.Model):
    title = models.CharField(max_length=60, blank=True, null=True)
    image = models.ImageField(upload_to="images/", blank=True, null=True)
    thumbnail = models.ImageField(upload_to="images/", blank=True, null=True)
    thumbnail2 = models.ImageField(upload_to="images/", blank=True, null=True)
    #tags = models.ManyToManyField(Tag, blank=True)
    #albums = models.ManyToManyField(Album, blank=True)
    created = models.DateTimeField(auto_now_add=True)
    #rating = models.IntegerField(default=50)
    width = models.IntegerField(blank=True, null=True)
    height = models.IntegerField(blank=True, null=True)
    listings = models.ForeignKey(Listings)
    def save(self, *args, **kwargs):
        # Save image dimensions
        super(Image, self).save(*args, **kwargs)
        im = PImage.open(pjoin(MEDIA_ROOT, self.image.name))
        self.width, self.height = im.size
        # large thumbnail
        fn, ext = os.path.splitext(self.image.name)
        im.thumbnail((256,256), PImage.ANTIALIAS)
        thumb_fn = fn + "-thumb2" + ext
        tf2 = NamedTemporaryFile()
        im.save(tf2.name, "JPEG")
        self.thumbnail2.save(thumb_fn, File(open(tf2.name)), save=False)
        tf2.close()
        # small thumbnail
        im.thumbnail((60,60), PImage.ANTIALIAS)
        thumb_fn = fn + "-thumb" + ext
        tf = NamedTemporaryFile()
        im.save(tf.name, "JPEG")
        self.thumbnail.save(thumb_fn, File(open(tf.name)), save=False)
        tf.close()
        super(Image, self).save(*args, **kwargs)
    def size(self):
        # Image size #
        return "%s x %s" % (self.width, self.height)
    def render_thumbnail(self):
        return mark_safe("""<a href = "/media/%s"><img border="0" alt=""     src="/media/%s" /></a>""" % ((self.image.name, self.thumbnail.name)))
    #render_thumbnail.allow_tags = True
    def render_thumbnail2(self):
        return mark_safe("""<a href = "/media/%s"><img border="0" alt="" src="/media/%s" /></a>""" % ((self.image.name, self.thumbnail2.name)))
    #render_thumbnail.allow_tags = True
    def __unicode__(self):
    return self.image.name

View.py

def details_customer(request, user_id):
    customer = get_object_or_404(Customer, user=user_id)
    cusnum=customer.id
    image = Image.objects.all()    
    listings = Listings.objects.filter(customer=cusnum).values(
        'id',
        'price',
        'listing_type__desc',
        'listing_status',
        'listing_status__desc',
        'canoekayak__builder',
        'image__title',
        'image__thumbnail',
        'image__render_thumbnail',        
        )
    context = Context({
        'title': 'Details',
        'customer': customer,
        'image' : image,        
        'listings' : listings,
        })
    return render_to_response('bsmain/details.html', context)

Template table

<TABLE id="some_id">    
<TBODY>
    {% load humanize %}
    {% for row in listings %}
    <tr>
        <td>{{ row.id }}</td>
        <td align="right">{{row.price|intcomma}}</td>
        <td>{{ row.listing_type__desc}}</td>
        <td>{{ row.listing_status}}</td>
        <td>{{ row.listing_status__desc}}</td>
        <td>{{ row.canoekayak__builder}}</td>
        <td>{{ row.image__title}}</td>
        <td>{{ row.image__thumbnail}}</td
        <td>{{ row.image__render_thumbnail}}</td            
    </tr>
    {% endfor %}
</TBODY>

Answer 1

If you want to make your code simpler, I would like to recommend to use application django-tables2. This approach can solve all your issues about generating tables.

As documentation sais:

django-tables2 simplifies the task of turning sets of data into HTML tables. It has native support for pagination and sorting. It does for HTML tables what django.forms does for HTML forms. e.g.

Its features include:

• Any iterable can be a data-source, but special support for Django querysets is included.
• The builtin UI does not rely on JavaScript.
• Support for automatic table generation based on a Django model.
• Supports custom column functionality via subclassing.
• Pagination.
• Column based table sorting.
• Template tag to enable trivial rendering to HTML.
• Generic view mixin for use in Django 1.3.

Creating a table is as simple as:

import django_tables2 as tables

class SimpleTable(tables.Table):
    class Meta:
        model = Simple 

This would then be used in a view:

def simple_list(request):
    queryset = Simple.objects.all()
    table = SimpleTable(queryset)
    return render_to_response("simple_list.html", {"table": table},
                              context_instance=RequestContext(request))

And finally in the template:

{% load django_tables2 %} 
{% render_table table %}

This example shows one of the simplest cases, but django-tables2 can do a lot more! Check out the documentation for more details.

It is also possible to use dictionary instead of queryset.

For displaying images in table cells you can use custom table column HtmlColumn

from django.utils.safestring import mark_safe
import django_tables2 as tables

from pytils.numeral import get_plural
class HtmlColumn(tables.Column):
    def render(self, value):
        return mark_safe(value)

or create new ImageColumn in the same way and transfer only src attribute, instead of whole img tag.