본문 바로가기

IT/django(장고)

[django]장고 개발_9 - 썸네일 , pagination

썸네일을 만들기 먼저 설치해야 될 게 있어요

pip install pillow 

pip install pilkit

pip install django-imagekit 

이 세가지를 설치하시는데 각 각 썸네일을 만드는데 도움을 줘요.

pillow - PIL(Python Imaging Libarary)를 fork 한 것으로, 파이썬 이미지 처리를 도와줘요.

pillkit - PIL, pillow를 쉽게 사용하게 도와줘요.

django-imagekit - 이미지 썸네일 만드는 것을 도와줘요.

 

pip freeze를 사용해서 잘 설치가 되었는지 확인을 해주시고,

 

INSTALLED_APPS = [
	....
	'imagekit',
]

 

프로젝트 settings.py 에서 가서 imagekit을 추가해주세요.

 

from imagekit.models import ImageSpecField #썸네일 함수
from imagekit.processors import ResizeToFill #사이즈조절

class Post(models.Model):
    #objects = models.Manager() #vs code 오류 발생시
    author = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
    title = models.CharField(max_length=200)
    text = models.TextField()
    created_date = models.DateTimeField(
            default=timezone.now)
    published_date = models.DateTimeField(
            blank=True, null=True)
    upload_file = models.ImageField(    #유효성 검사를 위해서 ImageField를 사용
        blank=True,#해당 속성이 비어도 되는지 유무
        null=True,#null이 들어가도 되는지 유무
        upload_to="image"#경로 설정 (입력 안하면 uploads에 바로 올라가짐)
        )
    #유효성 검사를 위해서 ImageField를 사용
    upload_thumbnail = ImageSpecField(
        source='upload_file',#원본 IageField이름
        processors=[ResizeToFill(120,80)],#사이즈 조정
        format='JPEG',#최종 저장 포맷
        options={'quality' : 60}#저장 옵션
        )

 

ource='upload_file', #원본 IageField이름
processors=[ResizeToFill(120,80)], #사이즈 조정
format='JPEG', #최종 저장 포맷
options={'quality' : 60} #저장 옵션

 

app/models.py 에서 Post 클래스에 upload_thumbnail을 추가해주면

 

페이지가 보이는 템플릿으로 가서

 

        {% if post.upload_file %}
            <img src="{{ post.upload_file.url }}" >
            <img src="{{ post.upload_thumbnail.url }}" >
        {% endif %}

 

<img src="{{post.upload_thumbnail.url }}" > 추가하시면 썸네일이 생성이 돼요.

 

 

이번에는 페이지로 넘어가는 걸 만들어보겠어요.

먼저 views.py에서 상단에 import를 추가 from django.core.paginator import Paginator

 

from django.core.paginator import Paginator

def post_list(request):
    post = Post.objects.all()
    paginator = Paginator(post , 3)
    page = request.GET.get('page')
    posts = paginator.get_page(page)
    return render(request, 'app/post_list.html' , {'posts':posts })

 

post_list를 변경해주세요.

 

{% if posts.has_previous %}
        <a href="?page=1"> 맨 앞 </a>
        <a href="?page={{posts.has_previous_page_number}}">이전</a>
        {% endif %}

        <span>{{posts.number}}</span> / <span>{{posts.paginator.num_pages}}</span>

        {% if posts.has_next %}
        <a href="?page={{posts.next_page_number}}">다음</a>
        <a href="?page={{posts.paginator.num_pages}}">맨 뒤</a>
        {% endif %}

 

그리고 post_list.html에 페이지 부분을 추가해주세요.

그러면 실행이 잘되는 걸 확인하실 수 있어요.

 

 

메소드 설명
count() 총 객체 수
num_pages() 총 페이지 수
page(n) n번째 페이지 반환
page_range() 페이지 리스트 반화(1부터 시작하는)
has_next() 다음 페이지의 유무
has_previous() 이전 페이지의 유무
get_page() n번째 페이지 가져오기
previous_page_number() 이전 페이지 번호 반환