Простой блог на Django - часть 14. Работа с картинками или добавляем поле типа "Изображение"

В этой заметке я хочу уделить внимание работе с картинками: рассмотрим как их хранить, выводить и как прикреплять к посту. Тем более в самом шаблоне есть соответствующая заглушка для этого - серое пространство, которое находится под заголовком; вот на её месте и будет выводиться картинка. 

Но прежде чем мы начнём работу с изображениями, нам понадобится библиотека Pillow, установить которую можно так:

pip install Pillow

Теперь перейдём к коду. И первое что тут напрашивается само собой - создать поле, которое будет называться image и которое будет находиться в табличке с постами. Поэтому редактируем модель posts/models.py:

image = models.ImageField(upload_to='images', null = True)

Здесь мы собственно задаём поле типа "ImageField", и в параметре upload_to указываем папку, где будут храниться изображения. Ну и чтобы соответствующее поле добавилось в таблицу базы данных, необходимо создать и применить миграцию

В файл settings.py прописываем переменные:

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

Что здесь и для чего:

MEDIA_URL - url для управления медиафайлами,
MEDIA_ROOT - путь для хранения картинок.

Чтобы всё это заработало как нужно, в файл /newapp/newapp/urls.py пропишем:

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Так же импортируем необходимые функции:

from django.conf import settings
from django.conf.urls.static import static

Поскольку добавлять изображения мы будем так же, через форму, то будет логичным дополнить наш файл forms.py соответствующим полем:

fields = ['title', 'text', 'image']

Этих изменений будет вполне достаточно для того, чтобы загрузка картинки через форму уже работала.

Вывод картинок в frontend

Чтобы вывести картинку на лицевую часть сайта, достаточно в сам шаблон post.html, в начале секции "content", прописать: 

<img src="{{ post.image.url }}" width="100%" alt="" />

при этом картинка будет отображена над текстом. Однако если мы посмотрим на сам базовый шаблон, то увидим, что картинка должна выводиться несколько в ином месте, а именно здесь:

<header class="masthead" style="background-image: url('img/home-bg.jpg')">

тут сама собой напрашивается мысль обозначить здесь секцию, которая будет изменяться из дочернего шаблона. Что я и сделал:

<header class="masthead" style="background-image: url('{% block image %}{% endblock %}')">

Ну и остаётся в самом шаблоне post.html подменить эту секцию: 

{% block image %} {% if post.image %} {{ post.image.url }} {% endif %} {% endblock %}

И если сейчас обновить страничку с постом, то можно увидеть картинку в том месте, где раньше была заглушка - такой результат мы и хотели получить. 

Коммит с изменениями - https://github.com/maclen2007/simple_django_blog/commit/8b1280558f7f1682559336c9f675240c0e34a760

Комментарии ()

    Вы должны авторизоваться, чтобы оставлять комментарии.