Django. Отображение фотографий на HTML странице (часть 11)

Добавим теперь фотографии домов, для этого расширим модель. В файле models.py напишем:

photo = models.ImageField("фотография", upload_to="houses/photos", default="", blank=True)

Мы создали поле house_photo, в котором будет храниться ссылка на изображение дома.

default ="" - значение по умолчанию, это пустая строка.
blank=True – говорит, что можно добавлять дом без фотографии.
upload_to="houses/photos" - путь где будут храниться фотографии

Нажмем Ctrl+Alt+R – создадим миграцию

makemigrations houses
migrate houses

Возможно вы получите следующие ошибки

ERRORS:
houses.House.house_photo: (fields.E210) Cannot use ImageField because Pillow is not installed.
HINT: Get Pillow at https://pypi.python.org/pypi/Pillow or run command:
"pip install Pillow".

Для выполнения следующей миграции без ошибок, нам нужно установить библиотеку Pillow.
Pillow - это библиотека для работы с изображениями.

Выполним:

pip install Pillow

И снова мы можем увидеть следующие ошибки:

pip install pillow failed with error code 1
error for pip install Pillow on Ubuntu virtualenv
failed building wheel for Pillow

Для их исправления нужно выполнить следующие команды

sudo apt-get install python-dev
sudo apt-get install python3-dev
sudo apt-get install libjpeg8-dev zlib1g-dev

Теперь снова выполним команду и в этот раз должно все получиться:

pip install Pillow

Collecting Pillow
Using cached Pillow-3.2.0.zip
Building wheels for collected packages: Pillow
Running setup.py bdist_wheel for Pillow ... done
Stored in directory: /home/vlad/.cache/pip/wheels/88/2d/ce/3ff4ae4e2b8600d1bde1cbde5dfcc6d8770222c38348fe9139
Successfully built Pillow
Installing collected packages: Pillow
Successfully installed Pillow-3.2.0

Снова выполним миграцию:

python manage.py makemigrations houses
python manage.py migrate houses

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

Добавим переменную MEDIA_ROOT, которой присвоим "media"

os.path.join(BASE_DIR, "media")

, то есть мы будем хранить файлы в папке "media", которая будет находится в папке проекта BASE_DIR

Также добавим переменную MEDIA_URL, которой присвоим строку "/media/"

MEDIA_URL - это адрес по которому пользователь сможет получить доступ к нашим медиа файлам.

Теперь перейдем в файл urls.py и импортируем в него функцию static

from django.conf.urls.static import static

А также импортируем настройки проекта:

from django.conf import settings

После, к urlpatterns прибавим функцию static()
Первым аргументом укажем settings.MEDIA_URL, а вторым именованный document_root=settings.MEDIA_ROOT

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

Переходим в админку, выбираем дом бюджет, теперь мы видим, что появилось новое поле Фотография, которое в отличии от других полей не выделено жирным, то есть оно не обязательно для заполнения. Добавим фото и нажмем сохранить. Фотография загрузится на сервер в папку houses/photos

Теперь в папке проекта должна появится папка media, внутри которой houses и photos, в соответствии со структурой upload_to

Выведем теперь фотографию на сайт. Откроем шаблон houses_list.html и напишем:

if, затем нажмем TAB, чтобы быстро создать инструкцию

{% if house.house_photo %}


{% endif %}

А в теле инструкции напишем:

img, затем нажмем TAB, чтобы быстро создать конструкцию

<img alt="" src="" />

В скобках {{ }} добавим house.house_photo.url и house.house_name

Разберем код:

Мы добавили условие, если у дома есть фотография house.house_photo, то подставить в атрибут src="" ссылку на неё {{ house.house_photo.url }}, а в атрибут alt="" имя дома {{ house.house_name }}

Откроем сайт и посмотрим, фотография Бюджетного дома - теперь выводится.

Отлично!