Добавление картинок к постам

sorl-thumbnail

Скопировать код
(venv) $ pip install Pillow

Скопировать код
(venv) $ pip install sorl-thumbnail

Скопировать кодPYTHON
INSTALLED_APPS = [
    # ... 
    'sorl.thumbnail',
]

Скопировать код
<!-- Загрузка тегов библиотеки в шаблон -->
{% load thumbnail %}

<!-- Пример использования тега для пропорционального уменьшения и обрезки картинки до размера 100x100px с центрированием -->
<!-- и вставляет в код изображение которое отобразится пользователю. -->
{% thumbnail item.image "100x100" crop="center" as im %}
        <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% endthumbnail %}

Настройки проекта

Скопировать кодPYHTON
class Post(models.Model):
    text = models.TextField()
    pub_date = models.DateTimeField('Дата публикации', auto_now_add=True)
    author = models.ForeignKey(User, on_delete=models.CASCADE, related_name='author_posts')
    group = models.ForeignKey(
    Group, on_delete=models.CASCADE, related_name='group_posts', blank=True, null=True
    )
    # поле для картинки
    image = models.ImageField(upload_to='posts/', blank=True, null=True)

Скопировать кодPYTHON
from django import forms
from .models import Post

class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ['group', 'text', 'image']

Скопировать кодPYTHON
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

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

Скопировать кодPYTHON
# эти строки — в начало файла, рядом с импортом других модулей
from django.conf import settings
from django.conf.urls.static import static

# эти строки — в самый конец файла

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Обновление шаблона

Скопировать кодHTML
<div class="card mb-3 mt-1 shadow-sm">
    {% load thumbnail %}
    {% thumbnail post.image "960x339" crop="center" upscale=True as im %}
        <img class="card-img" src="{{ im.url }}">
    {% endthumbnail %}
        <div class="card-body">
                ...

Скопировать кодHTML
<form method="post" enctype="multipart/form-data">

Обновление view-функции

Скопировать кодPYHTON
@login_required
def post_edit(request, username, post_id):
    profile = get_object_or_404(User, username=username)
    post = get_object_or_404(Post, pk=post_id, author=profile)
    if request.user != profile:
        return redirect('post', username=username, post_id=post_id)
    # добавим в form свойство files
    form = PostForm(request.POST or None, files=request.FILES or None, instance=post)
    
    if request.method == 'POST':
        if form.is_valid():
            form.save()
            return redirect("post", username=request.user.username, post_id=post_id)

    return render(
        request, 'post_edit.html', {'form': form, 'post': post},
    )

Результат

Задание

1. Выведите иллюстрации к постам:

• в шаблон главной страницы
• в шаблон профайла автора
• в шаблон страницы группы

2. Напишите тесты, которые:

• проверяют страницу конкретной записи с картинкой: на странице есть тег <img>
• проверяют, что на главной странице, на странице профайла и на странице группы пост с картинкой отображается корректно, с тегом <img>
• проверяют, что срабатывает защита от загрузки файлов не-графических форматов

Скопировать кодPYTHON
>>> with open('posts/file.jpg','rb') as img:
...     post = self.client.post("<username>/<int:post_id>/edit/", {'author': self.user, 'text': 'post with image', 'image': img})