How to add images to articles in Django?

Question

Django

Hello.
When I add an article to the site via the django admin, I also need to add an image to it. How to do it? And how to make it appear on the page with the article. As far as I know, ImageField is used for this, but it's not so simple there.
Could you give an example of how to implement this or throw off a link to the lesson?
I understand that now many will recommend that I search on Google, but still I did not find a complete instruction there, everywhere it is only explained in parts.
Thanks in advance!

Answer 1

If you use only one image
- add a field for the image to the model
- add an image placeholder to the template

# models.py
class Article(models.Model):
     title = models.CharField(max_length=255)
     content = models.TextField()
     img = models.ImageField(upload_to='/article', 
                      height_field=100, width_field=100)

For simplicity, we place the code that you will later transfer to views.py from urls.py!
https://docs.djangoproject.com/en/dev/topics/class...

#urls.py
    url(r'^article/(?P<pk>[0-9]+)/$', DetailView.as_view(
context_object_name="article",
model=Article,
template_name="article.html"
), name='article-detail'),

#article.html
<h1>{{ article.title }}
<img src="{{ article.img.url }}">
<content>{{ article.context }}

If you are interested in rich editor
https://pypi.python.org/pypi/django-summernote
https://github.com/summernote/django-summernote

Answer 2

django-ckeditor
If ImageField is needed:

class YourModel(Model):
    # ...
    image = ImageField(upload_to='images/', null=True, blank=True)

The upload_to parameter is required and accepts a string or a function. The images will be placed in the media/upload_to folder, where upload_to is what you specified in the upload_to parameter. The function (if the string does not suit you) will be called and two arguments will be passed to it - instance and filename - a model instance and a file name. You must return the path to the file along with the file (for example: images/hello/world/some_file.jpg). For example, I used this:

def generate_path(instance, filename):
    ext = filename.rsplit('.', 1)[-1]
    h = md5(instance.user.username.encode()).hexdigest()
    result = 'photos/%s/%s/%s.%s' % (h[:2], h[2:4], h[4:], ext)
    path = os.path.join(settings.MEDIA_ROOT, result)
    if os.path.exists(path):
        os.remove(path)
    return result

Such a hierarchy is needed so that many files do not accumulate in one folder, otherwise the system can work for a long time.
Be sure to specify MEDIA_ROOT and MEDIA_URL in the settings. Let's say like this:

MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL = '/media/'