I've been looking at the sorl-thumbnail's documentation, and I still can't figure out how to:
upload images to sorl-thumbnail.
selectively show images from sorl-thumbnail.
(for example, load a specific image from sorl-thumbnail from a view and show it, with customized size, etc.)
Could you give some specific examples on how to use this library in a django view?
If you want greater flexibility you can generate the thumbnail right in the view. The following is straight from the sorl-thumbnail documentation:
from sorl.thumbnail import get_thumbnail
im = get_thumbnail(my_file, '100x100', crop='center', quality=99)
im then is the same thing as what you'd get back from the thumbnail template tag. So, you can add that variable to the template context, or just some part of it. For example if you just wanted the URL:
my_context = {
'image_url': im.url,
}
You can use sorl.thumbnail using the thumbnail template tags. Here's an example:
{% load thumbnail %}
{% thumbnail recipe.image "430x250" as thumb %}
<img src="{{ thumb.url }}" width="{{ thumb.width }}" height="{{ thumb.height }}" alt="{{ recipe.title }}" />
{% endthumbnail %}
You don't upload images to sorl.thumbnail or load them from sorl.thumbnail. After proper configuration it will resize and store the images automatically and you can use the thumbnail template tag to get the proper URL of the image.
When I have to use sorl-thumbnail I make difference between 2 kind of images:
Django objects with ImageField
When I have an object in Django with an ImageField I render it with thumbnail like this:
# Let's supose our object imagefield is called img
{% thumbnail obj.img "100" upscale=false as im %}
<img src="{{ im.url }}"/>
{% empty %} # In case the object doesn't have an image, use generic one
{% thumbnail "img/empty_img.jpg" "236" upscale=false as im %}
<img src="{{ im.url }}" />
{% endthumbnail %}
{% endthumbnail %}
Images by url/path
To load images using local path of the project:
{% thumbnail "img/myImage.jpg" "236" upscale=false as im %}
<img src="{{ im.url }}" />
{% endthumbnail %}
Important: Remember that thumbnail concatenates the MEDIA_URL to the path you provide, so in this case you need a path like yourapp/media/img/myImage.jpg
To load images using an URL is easy and sample:
{% thumbnail "http://www.nextgen-gallery.com/wp-content/uploads/2008/12/abend.jpg" "236" upscale=false as im %}
<img src="{{ im.url }}" />
{% endthumbnail %}
Related
I have been working on a social media website where you can upload images and videos and follow other users.
I managed to upload and display uploaded files to the website.
I used FileField to load the image and video files, but when I implement it in my Template it shows both spaces, because there both using the same source url {{ source.file.url }}
models.py
class Post(models.Model):
title = models.CharField(max_length=150)
file = models.FileField(upload_to='uploads/%Y-%m-%d')
models code works perfectly
feeds.html
{% if post.file.url %}
<video class="video-context" width="500px" height="500px" controls>
<source src="{{ post.file.url }}" type="video/mp4">
</video>
{% endif %}
{% if post.file.url %}
<img class="image-context" src="{{ post.file.url }}" type="image/jpg" type="image/jpeg">
{% endif %}
heres a sreenshot empty video player over img
Now the problem is that both File Types are going trough one Model: FileField. The source is {{ source.file.url }} , the HTML is searching both files, but there only either image or video, so what can i do with the other empty file?
How can I hide it?
You can use the download link without specifying the file type.
<a href src="{{ post.file.url }}">
I am trying to store images on a database and then display them on a Django template. For some reason Django is only showing the alt (alternate - html attribute) instead of the actual image.
This is the template
{% extends "myapp/layout.html" %}
{% load static %}
{% block body %}
<div class="sidenav">
Gallery
About
Contact
</div>
<div class="main">
<h2>Gallery</h2>
{% for image in images %}
<img class="gallery" src="{% static '{{image.image.url}}' %}" alt="{{image.description}}">
{% endfor %}
</div>
{% endblock %}
This is my model
from django.db import models
# Create your models here.
class Image(models.Model):
image = models.ImageField(upload_to='images/')
description = models.CharField(max_length=50)
def __str__(self):
return "Description of image: " + self.description
This is what I'm seeing
These are normally media urls, so you render these with:
<img class="gallery" src="{{ image.image.url }}" alt="{{image.description}}">
You need to add the views regarding media files to the urlpatterns, as described in the documentation.
or if these really only contain a path relative to the static folder, you work with:
<img class="gallery" src="{% static image.image.url %}" alt="{{image.description}}">
But it is not very likely that this is the case.
Regardless what the Note that Django only serves static/media files in debug mode (DEBUG = True). If you run this on production, you will need to configure apache/nginx/… to serve static/media files.
I am currently learning Django and making my first steps. I try to build a webgallery to learn all the basic stuff. I successfully displayed some images using static files. So I tried saving Images through ImageFields and "upload_to" in my DB, saving it to my static directory. I tried to display everyone of them with a for loop in an tag. My img displays properly with using a {% static %} tag but when I try to insert a {{ }} Tag it isn't working, although it's the same url it doesn't work.
I tried changing my STATIC FILE in settings.py
I tried various other forms of nesting my {{}} in there
Reading the docs to staticfile https://docs.djangoproject.com/en/2.2/howto/static-files/
This thread Display an image located in the database in Django
This thread https://docs.djangoproject.com/en/2.2/topics/files/#using-files-in-models
My Code:
<p>Overview</p>
{% block content %}
<div>
{% for image in images %}
{{ image.img_photo }} <!-- webgalleries/test.jpg -->
{% load static %}
<img src="{% static 'webgalleries/test.jpg' %}" alt="{{ image }}"> <!-- working -->
<img src="{% static '{{ image.img_photo }}' %}" alt="{{ image }}"> <!-- not working -->
{% empty %}
<p>No content</p>
{% endfor %}
</div>
{% endblock content %}
I expect the output to be an img from my static directory.
A hint, some advice or other forms of help is highly appreciated.
Thank you so much!
okay if you want to display images from database you should do these steps :
1- go to your settings.py and write this code there ,
MEDIA_ROOT= os.path.join(BASE_DIR,"media")
MEDIA_URL= "/media/"
2- then create new folder in your project called 'media' and create folder inside 'media' called 'images' (finally result will be like this 'media/images' )
3- go to your model.py in your class that having 'img_photo'
and you should write the model like this
class Images(models.Model):
img_photo = models.ImageField(upload_to='images/',null=True, blank=True)
def get_image(self):
if self.img_photo and hasattr(self.img_photo, 'url'):
return self.img_photo.url
else:
return '/path/to/default/image'
def __str__(self):
return self.img_photo
4- go to admin.py then write :
from yourapp.models import Images
then add this line below
admin.site.register(Images)
then open your terminal or console and write :
1- python manage.py makemigrations
2- python manage.py migrate
5- in html code you must write :
{% for image in Images %}
<img src="{{ image.get_image }}" >
{% endfor %}
go to admin panel and upload any photo for test
I've got a django-cms plugin with a image field and I've noticed that the size of the images I upload using this plugins is bigger than the originals one. This can't happen, do you have any idea what could be causing this? Could it be some kind of configuration?
The definition of the field in the models.py:
image = models.ImageField(db_column='IMAGE', verbose_name=_(u'Image (1280x600)'), upload_to='Destaques')
This is a snippet of the template where I render the image:
{% load cms_tags staticfiles i18n %}
{% load thumbnail %}
{% thumbnail instance.imagem '1660' as im %}
<div class="item" id="item_{{ instance.id }}" style="background: url('{{ im.url }}') no-repeat center / cover;">
Could it be because of the thumbnail generation?
Thank you :)
{% endthumbnail %}
Assuming you are using the easy-thumbnails plugin, in your thumbnail tag:
{% thumbnail instance.imagem '1660' as im %}
the '1600' is specifying the size of the generated thumbnail. The format for the size is given in the docs as [width]x[height] and since you only have a single number it is interpreted as as width of 1660px. If the uploaded image was 1280x600 it would generated a thumbnail that is 1660x778.
Python, Django, pyuploadcare, html5, jquery,
The Django documentations for pyuploadcare are useful for image customization and file uploading and stuff like that, but what they don't tell you is how to display the image in the webpage. For example, i can display the URL where the image is stored, but i cannot display the image itself in the webpage
i want to make this as clear as possible to the reader so I'll give another example:
To build an image gallery, i would need all the images displayed on one page, i can do that using the for loops
for photo in photos
Photo and photos are defined in views.py
{% extends 'base.html' %}
{% for photo in photos %}
{{ photo.caption }}
{{ photo.photo }}
{% endfor %}
{% block content %}
{% endblock %}
photo.caption is an models.CharField()
photo.photo is an ImageField() from
from pyuploadcare.dj.models import ImageField
everything is working properly but i don't know how to display the images on the webpage.
Any help would be apreciated
Simple
<img src="{{ photo.photo }}" /> should be enough, as ImageField just holds the CDN URL value.