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 %}
Related
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 %}
when I use external images it works fine:
{% thumbnail "http://127.0.0.1:8000/media/files/logo.png" "40x40" crop="80% top" as im %}
<img src="{{ im.url }}">
{% endthumbnail %}
But when I change first line to:
{% thumbnail "http://127.0.0.1:8000/media/{{ field.value }}" "40x40" crop="80% top" as im %}
And {{ field.value }} is string files/logo.png for sure, it doesn't work any more. Is it possible to use Django tags inside thumbnail template tag and how?
It seems like thumbnail tag interpret {{ field.value }} literally.
How about using add filter?
{% thumbnail "http://127.0.0.1:8000/media/"|add:field.value "40x40" ... %}
Check whether field.value is a valid string.
I have working solr-thumbnail in several parts of my project, but this time I want to display an image from a URL, I have it like this:
{% load thumbnail %}
{% thumbnail profile_picture_url "150x150" crop="center" as img %}
<img src="{{ img }}">
{% endthumbnail %}
The view passes the value profile_picture_url as "http://....image.jpg". The image is correctly displayed if I just use:
<img src="{{ profile_picture_url }}">
What am I doing wrong ?
Thank you
SORL-Thumbnail is looking for the image object, not the URL. Pass it profile_picture instead of profile_picture_url and then call the url attribute of img in the src attribute of the img tag.
{% load thumbnail %}
{% thumbnail profile_picture "150x150" crop="center" as img %}
<img src="{{ img.url }}">
{% endthumbnail %}
I have the sorl.thumbnail template tag on my site but the template always renders it out like this (it's the img tag that is messing up):
<li>
<a href="myamazonurl/screenshots/tl-opening.jpg">
<img src="myamazonurl:80/cache%2F53%2Ff4%2F53f489f64c64ee345301c55b9f8ed0af.jpg">
</a>
</li>
From what I can see the image saved in the db has the correct path and my media url is also correct since the link to the image is 100% ok. Here is my template code:
{% load thumbnail %}
{% for galleryImage in app.album.screenshots.all %}
{% thumbnail galleryImage.image "92x92" crop="center" colorspace="GRAY" as im %}
<li>
<a href="{{ MEDIA_URL }}{{ galleryImage.image }}">
<img src="{{ im.url|safe }}">
</a>
</li>
{% endthumbnail %}
{% endfor %}
I have tried googleing/stacking for everything, and I have no idea an more. I have no idea where the port is coming from or where to configure it. I need pointing in the right direction by wiser people :)
Please let me know if you need to know more.
P.S the galleryImage.image is just a normal image field
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 %}