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 %}
Related
I want have a simple model for images. there is a option to upload unlimited images. but I want don't want them to be shown under each other. for instance just show the first 5 images then some text and then again another 5.
right now my code is like this:
{% for img in images %}
<img src="{{ img.images.url }}" class="img-fluid" alt="">
{% endfor %}
I want the Structure to be like this:
for loop for img0 to 5,
then everything elese,
then another for loop for img6 to 10,
Thanks for the solutions and apologies for my bad English
You can work with the |slice template filter [Django-doc]:
{% for img in images|slice:":5" %}
<img src="{{ img.images.url }}" class="img-fluid" alt="">
{% endfor %}
…
{% for img in images|slice:"5:10" %}
<img src="{{ img.images.url }}" class="img-fluid" alt="">
{% endfor %}
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 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 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
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 %}