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

Откройте settings.py и убедитесь, что приведенный ниже код присутствует в файле.

Пути для MEDIA_URL и MEDIA_ROOT были настроены еще в главе 1.

#example/settings.py
... 
DEBUG = True
...
                                                      
STATIC_URL = ‘/static/’
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
FILE_UPLOAD_PERMISSIONS = 0O640
                                                      
...

Откройте urls.py из папки проекта и добавьте следующий код.

#example/urls.py 
          
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
  path('admin/', admin.site.urls),
  path('', include('listings.urls')),
  path('users/', include('users.urls')),
] 
if settings.DEBUG:
  urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Оператор if устанавливает путь для обслуживания медиафайлов для веб-сайта.

В то время как DEBUG = True указанный выше путь будет использоваться для обслуживания изображений.

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

Шаблон объявлений — изображения

Откройте all_listings.html и добавьте следующий код для отображения изображений для списков.

#listings/templates/listings/all_listings.html
{% extends "listings/base.html" %}
{%block content%}
<h1>LISTINGS</h1>
<div class="col">
  <div class="card">
  {% for listing in all_listings %}
  <img src="{{ listing.main_photo.url }}" 
        width=300px height=200px alt="connect">
  <img src="{{ listing.photo_1.url }}" 
        width=300px height=200px alt="connect">
  <p><b>Title:</b> {{ listing.title }}</p>
  <p><b>Condition:</b> {{ listing.condition }}</p>
  <p><b>Sale Type:</b> {{ listing.sale_type }}</p>
  <p><b>Price:</b> $ {{ listing.price|floatformat:2 }}</p>
  <p><b>Location:</b> {{ listing.city }}, {{ listing.state }}</p>
  <p><b>Post Date:</b> {{ listing.list_date }}</p>
  <ul>
    <a class="btn" 
      href="{% url 'listings:detail' listing.id %}">View Listing
    </a>
  </ul>
  <hr>
  {% endfor %}
  </div>
</div>
{%endblock content%}

Мы отображаем два изображения для каждого списка на странице списков.

.url предоставляет Django путь к расположению изображения.

Сохраните изменения и введите команду python manage.py runserver.

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

Шаблон подробного списка — изображения

Нам также нужно показать изображения на странице подробного списка.

Откройте detail.html и добавьте следующий код.

#listings/templates/listings/detail.html
{% extends "listings/base.html" %}
{% block content %}
        
<div class="main">                
<h2>LISTING:</h2>
<p><b>Title: {{ detail.title }}</p>
<p><b>Condition:</b> {{ detail.condition }}</p>
<p><b>Product Type:</b> {{ detail.product_type }}</p>
<p><b>Sale Type:</b> {{ detail.sale_type }}</p>
<p><b>Price: $</b> {{ detail.price }}</p>
<p><b>Location:</b> {{ detail.city }}, {{ detail.state }}</p>
<p><b>Contact Email:</b> {{ detail.contact_email }}</p>
<p><b>Post Date:</b> {{ detail.list_date }}</p>
<p><b>Photos:</b></p>
<img src="{{ detail.main_photo.url }}" width= 400px height=400px />
<img src="{{ detail.photo_1.url }}" width= 400px height=400px />
{% if detail.photo_2%}
<img src="{{ detail.photo_2.url }}" width= 400px height=400px />
{% endif %}
</div>
        
{% endblock content %}

Пользователи могут отправить до трех изображений. Из трех изображений первые два являются обязательными, а третье — необязательным. Мы используем оператор if для отображения третьего только в том случае, если он существует.

Сохраните изменения и введите команду python manage.py runserver.

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

Если вам нравится сериал, следите за мной в Twitter и на Youtube, чтобы узнать больше.

Youtube: Брайам Лоайза

Твиттер: balt1794