В этой главе мы будем работать над отображением изображений на веб-сайте, чтобы пользователи могли видеть изображения списков.
Откройте 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