파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 강의를 듣고 정리한 글입니다.

인스타그램은 이미지를 크롭해서 저장하기 때문에 출력시 후처리가 필요없다.

만약 우리 프로젝트에서 크롭처리가 되지 않은 이미지를 입력받았고 이를 크롭해서 보여주고 싶을 수도 있을 것이다. 이 때 easy-thumbnails 라이브러리를 활용하면 손쉽게 이미지를 후처리해서 보여줄 수 있다.

본 포스팅에서는 여러 크기로 저장된 이미지를 일정 크기로 크롭해서 출력하는 코드를 작성해본다.

easy-thumbnails 설치 및 장고 프로젝트에 추가

---

django 버전 확인

poetry의 경우 의존성을 확인한다. django 4.0으로 설치할 경우 아래 오류를 볼 수 있다.

$ poetry add easy-thumbnails
Using version ^2.8 for easy-thumbnails
Updating dependencies
Resolving dependencies... (0.0s)

  SolverProblemError

  Because easy-thumbnails (2.8) depends on django (>=2.2,<4.0)
   and no versions of easy-thumbnails match >2.8,<3.0, easy-thumbnails (>=2.8,<3.0) requires django (>=2.2,<4.0).
  So, because askcompany depends on both Django (^4.0) and easy-thumbnails (^2.8), version solving failed.

django 버전 변경

$ poetry remove django
$ poetry add django@3.2  # 3.2로 할 경우 의존성 에러가 나지 않는다.

easy_thumbnails 설치

$ poetry add easy_thumbnails

장고 프로젝트에 easy_thumbnails 추가

settings.INSTALLED_APPS에 추가

# settings.py

INSTALLED_APPS = [
    # ...
    'easy_thumbnails',
]

데이터베이스 마이그레이션

$ python manage.py migrate easy_thumbnails

템플릿에서 크롭 적용

• {% load thumbnail %}: 템플릿에서 easy_thumbnails을 로드한다.
• {% thumbnail post.photo 512x512 crop %}: 512x512 크기로 크롭된 이미지를 요청한다.

{% extends 'instagram/layout.html' %}
{% load thumbnail %}

{% block content %}
  <div class="container">
    <div class="row pt-3 pb-3">
      <div class="col-sm-3" style="text-align: center">
        <img src="{{ page_user.avatar_url }}" alt="" class="rounded-circle" style="width: 160px;">
      </div>
      <div class="col-sm-9">
        {{ page_user.username }}
        <a href="{% url 'profile_edit' %}" class="btn btn-secondary btn-sm">Edit Profile</a>
        <hr/>
        {{ post_list_count }} posts, 0 followers, 0 following
        <hr>
        {{ page_user.name }}
      </div>
    </div>
    <div class="row mt-3">
      {% for post in post_list %}
        <div class="col-sm-4 mb-3">
          <img src="{% thumbnail post.photo 512x512 crop %}" alt="{{ post.caption }}" style="width: 100%;">
        </div>
      {% endfor %}
    </div>
  </div>
{% endblock %}