I want to know how to deal with saticfile's path in sorl-thumbnail
my code has error :
Could not parse the remainder: '{%' from '{%'
{% load thumbnail %}
{% thumbnail {% static 'img/logo.png' %} "100x80" format="PNG" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% endthumbnail %}
You cannot use the {% static %} tag inside a {% thumbnail %} tag. In general, you can't have any tags within any other tags.
Make sure that in your TEMPLATE_CONTEXT_PROCESSORS variable in your settings.py file contains 'django.core.context_processors.static' and try
{% load thumbnail %}
{% thumbnail STATIC_URL|add:'img/logo.png' "100x80" format="PNG" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% endthumbnail %}
Related
I'm trying to display thumbnails on amp website. I changed "img" into "amp-img", then the thumbnail doesn't display.
This following code doesn't work.
{% thumbnail item.image "100x100" crop="center" as im %}
<amp-img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"></amp-img>
{% endthumbnail %}
This works.
{% thumbnail item.image "100x100" crop="center" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% endthumbnail %}
But "img" is not allowed for amp.
Is there a way to use sorl thumbnail for amp?
As far as I know, this won't work, since the sorl-thumbnail doesn't support amp-img tag.
To work with thumbnail with amp-img the best possible solution I can suggest is use srcset, using srcset would enable your browser to fetch the appropriate image size. You can read more about srcset here
I use Sorl-Thumbnail in my django-project. I have a situation, when I havent got an image and I need to show no_image.png.
This code works:
{% thumbnail car.default_picture.image|default:"http://example.com/img/no_image.png" "240x180" crop="center" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% endthumbnail %}
But I want to use {% static "img/no_image.png" %} in default. I have an error:
TemplateSyntaxError: Syntax error. Expected: ``thumbnail source geometry [key1=val1 key2=val2...] as var`
How to fix it? Thanks.
I just found this alternative too:
{% thumbnail product.logo "200x200" crop="center" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% empty %}
<img src="{% static 'images/default.gif' %}" width="200" height="200">
{% endthumbnail %}
{% if car.default_picture.image %}
thumbnail
{% else %}
{% static "img/no_image.png" %}
{% endif %}
It works for me
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 %}
<img alt="" src="{{im.url}}" class="frame2">
{% 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
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.
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.
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 %}
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
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 %}
I'm using sorl-thumbnail and PIL for my django site.
How do I cut image when certain conditions meet? For example, create thumbnail of width 600px only when the original image width is greater than 600px.
{% thumbnail img.image "600" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" alt="{{ object.name }}" />
{% endthumbnail %}
If I understand you, you want the image to simply be 600px or less, i.e. you don't want sorl-thumbnail to stretch it to be 600px always.
If that's the case, you just need to add upscale=False:
{% thumbnail img.image "600" upscale=False as im %}
<img src="{{ im.url }}" width="{{ im.width }}" alt="{{ object.name }}" />
{% endthumbnail %}
Currently a bit stuck, wondering if anyone can assist. I am using django-adminfiles. Which is a neat little application. I want to use it to insert images into posts/articles/pages for a site i am building.
How django-adminfiles works is it inserts a placeholder i.e <<< ImageFile >>> and this gets rendered using a django template. It also has the feature of inserting custom options i.e (Insert Medium Image) , i figured i would used this to automatically resize images and include it in the post (similar to how WP does it).
Django-adminfiles makes use of sorl.thumbnail app to generate thumbnails.
So i have tried testing generating thumbnails:
The current template that is used to render the inserted image is:
{% spaceless %}
<img src="{{ upload.upload.url }}" width="{{ upload.width }}" height="{{ upload.height }}" class="{{ options.class }}" class="{{ options.size }}" alt="{% if options.alt %}{{ options.alt }}{% else %}{{ upload.title }}{% endif %}" />
{% endspaceless %}
I tried modifying this to:
{% load thumbnail %}
{% spaceless %}
<img src="{% thumbnail upload.upload.url 200x50 %}" width="{{ upload.width }}" height="{{ upload.height }}" class="{{ options.class }}" class="{{ options.size }}" alt="{% if options.alt %}{{ options.alt }}{% else %}{{ upload.title }}{% endif %}" />
{% endspaceless %}
I get the error:
Exception Value:
Caught an exception while rendering: Source file: '/media/uploads/DSC_0014.jpg' does not exist.
I figured the thumbnail needs the absolute path so tried putting that in the template, and that works.
i.e this works:
{% thumbnail '/Users/me/media/uploads/DSC_0014.jpg' 200x50 %}
So basically i need to generate the absolute path to the file give the relative path (to web root). You could do this by passing the MEDIA_ROOT setting to the template, but the reason i want to do a template tag is to programmatically set the image size.
Update
Tried this as per answer below:
templatetag:
from django import template
from proj.settings import MEDIA_ROOT
register = template.Library()
#register.filter(name='path')
def path(value):
value = MEDIA_ROOT + '/' + value
return value
Template:
{% load thumbnail %}
{% load images %}
{% spaceless %}
<img src="{{ upload.upload.url|path }}" width="{{ upload.width }}" height="{{ upload.height }}" class="{{ options.class }}" class="{{ options.size }}" alt="{% if options.alt %}{{ options.alt }}{% else %}{{ upload.title }}{% endif %}" />
{% endspaceless %}
sorl needs a file system location since it's a service side process. Assuming your file system address mirror your web addresses, you should be able to create a custom filter to convert file locations.
UPDATE
I was suggesting something like this:
{% thumbnail upload.upload.url|path 200x50 %}