i'm using sorl thumbnail library and i have a problme
i cannot Keep the aspect ratio of my images .
{% thumbnail product.image "268x250" quality=85 crop='center' as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% endthumbnail %}
This is my code
but it makes my pictures very Unclear cause it crops the picture very badly
is there any solution, not crop the pictures and only make them smaller with keeping aspect ratio ???
i want keeping aspect ratio of my pictures
Related
I have a Django template that I'm using to send emails. I'm using Sorl thumbnail to generate a thumbnail to be used in the email.
{% thumbnail event.image '90x100' crop=True as im %}
<img class="float-center"
src="{{ im.url }}" alt="">
{% endthumbnail %}
The issue is the src is an absolute path on the filesystem. I would like to prepend the im.url with my server's web address. I tried a few ways of concatenating strings but nothing seemed to stick.
I'm using sorl-thumbnail 12.2
{% load thumbnail %}
{% for image in citem.get_images %}
<div class="image-block">
{% thumbnail image.img.path '180x180' as thumb %}
{% thumbnail image.img.path '640x640' as medium %}
<a data-lightbox="i-{{image.id}}" href="{{medium.url}}" title="{{citem.display_plant_smart}}">
<img class="img-rounded img-responsive bound-img-big" src="{{ thumb.url }}" alt="{{citem.display_plant_smart}}" style="padding-bottom: 1px"/>
</a>
{% endthumbnail %}
Usually this code was working, for some unknown reason it stops working.
Now I'm getting
[Errno 2] No such file or directory
Even the file exists on disk. When trying to run sorl migrations I get this:
django.db.utils.ProgrammingError: relation "thumbnail_kvstore" already exists
I'm using MAC and the same is happening in linux as well. I've already fake the migration with no success. The images are there in the disk.
I have serious performing problem with my templates. After some test, I found out that the slowest part from the rendering was the thumbnails, generated from sorl-thumbnail.
Below is the issued part from my template:
{% for listing in listings %}
<li class="pic_view">
<ul>
<li class="picture">
<a href="{% url 'listing' listing.id listing.title %}">
{% thumbnail listing.get_picture "240x143" crop="center" as im %}
<img src="{{ im.url }}">
{% empty %}
tc
{% endthumbnail %}
<div class="overlay"></div>
</a>
</li>
<li class="artist">
<a href="{% url 'profile_artist' listing.artist_id listing.artist.user.first_name %}">
{% thumbnail listing.artist.get_avatar "60x60" crop="center" as im %}
<img src="{{ im.url }}">
{% empty %}
tc
{% endthumbnail %}
</a>
</li>
</ul>
</li>
{% endfor %}
Currently I have about 6 listings and below is the measured time for rendering:
- 8512 ms on first rendering
- 4680 ms on reload
- 112 ms when thumbnail tags are removed
Can you please give me some advice on this point. The number above are measured with Debug=True, but there is no difference when the flag is False. Also accordingly to Django documentation, I have included the followings TEMPLATE_LOADERS:
TEMPLATE_LOADERS = (
'django.template.loaders.filesystem.Loader',
'django.template.loaders.app_directories.Loader',
('django.template.loaders.cached.Loader', (
'django.template.loaders.filesystem.Loader',
'django.template.loaders.app_directories.Loader',
)),
)
Sorl does this behind the scenes (the chapter in the docs are here, here is the TL;DR version)
Compute a hash value from the original file name and the options
given
Check in the database if that hash is already present, if so,
deliver associated thumbnail
If not, resize the image, store it in the media location, create a
database record with the hash/filename association, deliver
thumbnail
That being said, 4.5 seconds for a couple of database lookups is wayyyyyy too long. There is something else going on here.
Sorl Thumbnail generates thumbnails on the fly hence time consuming operation, what you need is to create the thumbnails using cronjob or celery (preferred) with the preferred sizes. There is package already called sorl-thumbnail-async which does what you are looking for and uses celery. So if the thumbnails are not available show dummy image as soon as the thumbnails are available they will be rendered. Also use memcached as a cache backend for django which is really good in terms of performance.
Suppose, I have 20 images of size 1600 X 900 in a page. How do I load the images in the size that I specify on a template? In the css I can do it. But I want to change the actual size of the image, so that when clicked on the particular image, it will load the original image with its original size. Is there any way that I can do it? I tried using easy_thumbnails and it was great, until it gave me problems when I deployed it using the apache server. Any help will be deeply appreciated. Thank you!
EDIT:
.html:
{% for Status in status %}
<p class="user">{{ Status.creator.get_full_name }}</p>
{% if Status.image %}
<div class="image_image">
<center>
<img src="{{ MEDIA_URL }}{{Status.image}}" width=300px />
</center>
</div>
<p class="status_image">{{Status}}</p>
<span class="clear"></span>
<hr>
{% else %}
<p class="status_status">{{Status}}</p>
<span class="clear_right"></span>
<hr>
{% endif %}
{% endfor %}
Try to use sorl thumbnail, it even supports Amazon S3 Server.
pip install sorl-thumbnail
To Installed apps:
'sorl.thumbnail',
add {% load thumbnail %} to your template.
{% thumbnail firma.firma_logo "130x110" format="PNG" as im %}
<div class="logo" style="background-image:url('{{ im.url }}')"></div>
{% endthumbnail %}
The make image format PNG is important, it converts into JPEG by the default. And if the user uploads file in transparent format, it sucks.
My views.py:
# obj is of Model subclass, image is its ImageField
timg = get_thumbnail(obj.image, "160x110", quality=50)
context['timg'] = timg
return render(request, '16_upload01.html', context)
My template:
{% thumbnail timg "100x100" crop="center" as timg %}
<img src="{{ timg.url }}" width="{{ timg.width }}" height="{{ timg.height }}">
{% empty %}
<p>No image</p>
{% endthumbnail %}
It shows "No image" forever. But I can see timg in console:
(Pdb) timg
<sorl.thumbnail.images.ImageFile object at 0x10f83a450>
Also, in settings.py I set THUMBNAIL_DEBUG = True, yet can't see any error show up, why?
EDIT
Still NO thumbnail image shows up
views:
obj = Image.objects.filter(id=1)
timg = get_thumbnail(obj.image, "160x110", quality=50)
context['timg'] = timg
return render(request, '16_upload01.html', context)
template:
<img src="{{ timg.url }}" width="{{ timg.width }}" height="{{ timg.height }}">
You are trying to fetch the thumbnail twice; once in your view with get_thumbnail and then again in your template with {% thumbnail ... %}. Both of these do the same thing (the template tag makes use of get_thumbnail in the background) so pick one or the other.
Have a look at the sorl documentation and you will see the different ways of implementing thumbnails. The resulting timg thumbnail file - that is returned whichever approach you choose - has an url attribute that you can then use to display the thumbnail:
<img src="{{ timg.url }}" />