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
Related
Why does this not work in Django?
{% for img in image_list %}
{% if img != image_list[-1] %}
<img src="{% get_media_prefix %}{{ img.image }}" class="img-fluid rounded" alt="Recipe Image Secondary">
<br>
{% endif %}
{% endfor %}
Simple Python (works):
for img in image_list:
if img != (image_list[-1]):
print(img)
{% if img != image_list[-1] %}
throws a TemplateSyntaxError Could not parse the remainder: '[-1]' from 'image_list[-1]'
You can work with the |last template filter [Django-doc] to obtain the last item of a sequence:
{% for img in image_list %}
{% if img != image_list|last %}
<img src="{{ img.image.url }}" class="img-fluid rounded" alt="Recipe Image Secondary">
<br>
{% endif %}
{% endfor %}
or in this case work with forloop.last [Django-doc]:
{% for img in image_list %}
{% if not forloop.last %}
<img src="{{ img.image.url }}" class="img-fluid rounded" alt="Recipe Image Secondary">
<br>
{% endif %}
{% endfor %}
{% for img in image_list %}
{% if not forloop.last %}
<img src="{% get_media_prefix %}{{ img.image }}" class="img-fluid rounded" alt="Recipe Image Secondary">
<br><br>
{% else %}
<img src="{% get_media_prefix %}{{ img.image }}" class="img-fluid rounded" alt="Recipe Image Secondary">
{% endif %}
{% endfor %}
I am serving pictures from a loop. Some of the referenced URL's do not exist though. In that case I want to reference to a default pic.
I tried
{% for hit in hits %}
{% if url_for('static', filename='pictures/' + hit['jpg']) %}
<img class="rounded-circle article-img" src="{{ url_for('static', filename='pictures/' + hit['jpg']) }}">
{% else %}
<img class="rounded-circle article-img" src="{{ url_for('static', filename='pictures/' + 'default.jpg') }}">
{% endif %}
{% endfor %}
which seemed to be a bit naive since it didn't change anything. Do you have an idea for a good way to handle this?
You can always chose the right image path before rendering the template. So maybe something with os.path.isfile:
import os
from Flask import render_template
...
for i in range(len(hits)):
if not os.path.isfile('relative/path/to/pictures/' + hits[i]['jpg']):
hits[i]['jpg'] = 'default.jpg'
render_template('/my/template.html', hits = hits, ...)
Template:
{% for hit in hits %}
<img class="rounded-circle article-img" src="{{ url_for('static', filename= 'pictures/' + hit['jpg']) }}">
{% endfor %}
I am using Django-Oscar with AWS S3 to host my product images. The carousel that displays images is presenting the product images correctly, but it is showing the thumbnail size image. I want to display the full-size image, not the thumbnail, on hover or click.
I am using django-compressor as well, so the images are stored in the cache folder on S3.
Should I change the template to enable this, or is there a django-oscar setting that can handle this?
Relevant code:
<div class="carousel-inner" role="listbox">
{% for image in all_images %}
<div class="item {% if forloop.first %}active{% endif %}">
{% thumbnail image.original "440x400" upscale=False as thumb %}
<img src="{{ thumb.url }}" alt="{{ product.get_title }}" />
{% endthumbnail %}
</div>
{% endfor %}
</div>
To something like this:
<div class="carousel-inner" role="listbox">
{% for image in all_images %}
<div class="item {% if forloop.first %}active{% endif %}">
<a href="{{ image.url }}" target="_blank">
{% thumbnail image.original "440x400" upscale=False as thumb %}
<img src="{{ thumb.url }}" alt="{{ product.get_title }}" />
</a>
{% endthumbnail %}
</div>
{% endfor %}
</div>
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 %}
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 %}