Search code examples
djangouploaddjango-templatesthumbnailssorl-thumbnail

Sorl thumbnail not opening image in template (Django)


I've followed a tutorial to create a thumbnail for uploading and posting filecontent and images in a template. I'm using Django 1.6. With one version the of get_method() related to the thumbnail field the place for uploaded image or text shows in the html one_labeling_index.html below but unopened and with the second version, sorl - thumbnail, it doesn't show anything at all after using the "Browse" - upload button.

in models.py

from sorl.thumbnail import get_thumbnail
from django.core.files.base import ContentFile
# instance, is instance from django and filename is name of uploaded file
#  formats str to filename format str

def get_upload_file_name(instance,filename):
    return "uploaded_files/%s_%s" % (str(time()).replace('.', '_'), filename)

class Labeling(models.Model):

    sentence = models.CharField(max_length=200)
    datetime = models.DateTimeField()
    title = models.CharField(max_length=70)
    current_count = models.IntegerField()
    label = models.CharField(max_length=200)
    # thumbnail field
    thumbnail = models.FileField(upload_to=get_upload_file_name)


 def __unicode__(self):
        return self.sentence

class OneLabeling_Phrase(models.Model):

    sentence = models.CharField(max_length=200)
    label = models.CharField(max_length=200)
    thumbnail = models.FileField(upload_to=get_upload_file_name)

in views.py

def LabelingIndex(request):
        labels = Labeling.objects.all()

        return render(request,"labeling_index.html", {"labels":labels})


def one_labeling(request,postID):

    one_labeling = Labeling.objects.get(id=postID)
    if request.method == 'POST':
        form = LabelingForm(request.POST, request.FILES)

        if form.is_valid():
            postonelabeling(request, one_labeling)

    else:
        form = LabelingForm()

    m = {"form":form, "one_labeling":one_labeling}
    m.update(csrf(request))

    return render_to_response('one_labeling_index.html', m)

in forms.py

class LabelingForm(forms.ModelForm):


    class Meta:
        model = Labeling
        fields = ('title', 'current_count', 'sentence', 'label', 'thumbnail')

in urls.py

   url(r'^labeling$', LabelingIndex),
   url(r'^labeling(?P<postID>\d+)$',one_labeling),

in html labeling_index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


{% for one_labeling in labels %}

    <h2><a href="/labeling{{ one_labeling.id}}">{{ one_labeling.title }}</a></h2>

    <p>{{ one_labeling.sentence }}</p>
    <p>{{ one_labeling.label }}</p>

    {% for c in one_labeling.onelabeling_phrase.set_all %}

         <p>{{ one_labeling.sentence }}</p>
         <p>{{ one_labeling.label }}</p>
         <p>{{ one_labeling.thumbnail }}</p>





    {% endfor %}

{% endfor %}


</body>
</html>

in one_labeling_index.html

{% load static %}
{% load thumbnail %}
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>





<form action="" method="post" enctype="multipart/form-data">{% csrf_token %}
<ul>
    {{ one_labeling.thumbnail}}


     {{form.as_ul}}


    <p><img src="{% get_static_prefix %}{{one_labeling.get_thumbnail}}" width="200"/></p>

      # with soal - thumbnail
    {% thumbnail item.image my_size_string crop="left" as im %}
       <img src="{{thumbnail.labeling}}"width="200">
    {% empty %}
    <p>No image</p>
    {% endthumbnail %}


</ul>



</body>
</html>

Solution

  • the place for uploaded image or text shows in the html one_labeling_index.html below but unopened

    I'm not sure what this means, but I assume you mean the space is there but there's no image showing. In this case, this is happening because you've placed a <img> with a broken source. The rest isn't showing anything at all because the code is broken.

    There are some elements missing here. For instance, I'm not sure where variable item is coming from? Regardless, you're using sorl-thumbnail wrong. Take a look at the examples in the docs. Remember you have thumbnail item.image AS im, which means your image object is now referenced with 'im'. im has attributes url, width, height. So your code should be:

    {% thumbnail one_labeling.thumbnail '200x200' crop="left" as im %}
       <img src="{{ im.url }}" width="{{ im.width }}" heigh="{{ im.height }}">
    {% empty %}
       <p>No image</p>
    {% endthumbnail %}
    

    get_thumbnail is a method from sorl-thumbnail, not your model, so you can't say {{ one_labeling.get_thumbnail }} unless you actually created this method in the the Labeling model. If you want to set the sorl-thumbnail from the model:

    from sorl.thumbnail import get_thumbnail
    
    class Labeling(models.Model):
       pass
    
       def get_thumb(self):
            im = get_thumbnail(thumbnail, '200x200', crop='center', quality=99)
            return im.url # remember that sorl objects have url/width/height attributes
    

    So, in your template you could have:

    <img src="{{ one_labeling.get_thumb }}" />
    

    Hope this helps.