How to thumbnail static files?

Question

I want to resize my static files with sorl thumbnail but it doesnt work

here is my codes

{% if not new.photo %}

{% with path="{{STATIC_URL}}/images/empty-news.jpg" %}
{% thumbnail path "80x80" crop="center" as im %}
<a href="#" class="image"><img alt="" src="{{im.url}}" class="frame2"></a>
{% endthumbnail %}
{% endwith %}

{% else %}
{% thumbnail new.photo "80x80" crop="center" as im %}
<a href="{% url news_detail new.slug %}" class="image">
<img alt="" src="{{im.url}}" class="frame2"></a>
{% endthumbnail %}
{% endif %}

If I have image it shows image but when I dont have image I cant use default image because thumbnail doesn't work

Latia

Are you sure that path contains valid link to image? – Excalibur

here's easy-thumbnails rationale for being limited to MEDIA_ROOT github.com/SmileyChris/easy-thumbnails/issues/210 – Rawboned

Answer 1

Ugly option that worked for me, passing in the path that you would normally pass to the static template tag (note that it assumes the http protocol, so it could be improved):

{% with 'http://'|add:request.get_host|add:STATIC_URL|add:image_path as path %}
    {% thumbnail path "720x306" crop="center" as im %}
      <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
    {% endthumbnail %}
{% endwith %}

This works by building up the absolute path to the static image.

Faunie

I don't think this will work with static assets hosted elsewhere (S3 for example) – Abranchiate

Answer 2

Honestly...this looks fine; which means there is probably something simple wrong in your setup.

Possible bad setup: How are you defining STATIC_URL in your settings? Also, what is the value of DEBUG (make sure this is set to True if you're developing locally)? As @goliney pointed out, your path might be messed up. Try pulling out the thumbnail blocks out, and set the src of your image to {{ STATIC_URL }}/images/empty-news.jpg and verify that works before trying to do the thumbnails.

Forgot to load thumbnails: Make sure to put {% load thumbnail %} in your template before any references to the {% thumbnail %} block.

Behah

my static url and thumbnail settings are fine. They work. I can thumbnail other images that is dinamic but if it be static , it doesn't work.Also My static url is defined correctly. – Latia

Answer 3

The following will work

{% with STATIC_URL|add:"/images/empty-news.jpg" as path %}
    {% thumbnail path "80x80" crop="center" as im %}
        <a href="#" class="image">
            <img alt="" src="{{im.url}}" class="frame2"></a>
    {% endthumbnail %}
{% endwith %}

Ieshaieso

This didn't work for me as sorl wouldn't accept a relative URL. I adapted this to accept an absolute URL (see my answer elsewhere on this page). – Faunie

Answer 4

I'm working through the same issue myself. It seems that if you want to use STATIC_URL in your templates you'll need to make sure that path you pass to the thumbnail tag is absolute (treating the path as if it were external.)

Apparently the relative paths only work for images within the MEDIA_ROOT, seemingly designed for images coming from models.

As a test, try typing in the full http path.

See: http://sorl-thumbnail.readthedocs.org/en/latest/examples.html

Darelldarelle

Answer 5

To cover a little more the uglyness i made a custom filter, using a constant in settings.py SITE_URL:

settings.py

[...]
SITE_URL = "google.it"
[...]

templatetags/staticthumb.py

from django.conf import settings

from django import template

register = template.Library()

@register.filter()
def static_url(value):
    return ''.join(["http://", settings.SITE_URL, settings.STATIC_URL, value])

Then to use it in the template:

{% load thumbnail staticthumb %}

{% with image_path|static_url as path %}
   {% thumbnail path "720x306" crop="center" as im %}
      <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
   {% endthumbnail %}
{% endwith %}

Joinville