[Django - Thumbnail] 섬네일 지정하기
이미지파일들이 있을 때 대표하는 이미지파일 = 썸네일
썸네일 기능을 사용하면 좋은점
1. 썸네일 파일 지정 용이
2. 파일 용량 관리 ( 확장자, 압축방식 지정 가능, 중복사용가능)
3. 파일 분류에 효율적
썸네일은 썸네일로, 원본파일은 본파일대로
미디어를 사용하기 위한 사전작업
1. settings.py에 미디어파일을 사용하기 위한
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'blog' , 'static')
]
#현재 static 파일들이 어디에 있는지
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
#static 파일을 어디에 모을건지
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
#이용자가 업로드한 파일을 모으는 곳
MEDIA_URL = '/media/'
#이용자에게 사진을 보여줄 때, url의 구성요소,media파일의 url을 설정한것과 같다
2. models.py에 클래스를 만들어준다.
from dijango.db import models
class Picture(models.Model):
text = models.TextField()
image = models.ImageField(upload_to="blogimg") // blogimg에 올려라 인자 설정을 해줌
==> 장고에 알려줘야하기 때문에 , migrate를 해줘야한다.
python manage.py makemigrates
python manage.py migrate
3. urls.py에
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [] + static(settings,MEDIA_URL, document_root=settings.MEDIA_ROOT)
4. home.html
<img src="{{blog.image.url}}" width = 500>이런식으로 표현해줘야한다
미디어파일에는 무조건 .url을 붙여줘야한다.
썸네일을 만들기 위해서
1. pip 패키지를 받아준다.
pip install pillow
pip install django-imagekit
2. 새로운 앱이 설치가 되었으니 settings.py 에 새로운 앱 추가
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'staticBlog',
'mediaformBlog',
'imagekit',
]
3. 썸네일을 사용하는 앱의 models.py 에 import & 썸네일에 해당하는 변수 사용
from django.db import models
from imagekit.models import ImageSpecField #추가
from imagekit.processors import ResizeToFill #추가
class mediaformBlog(models.Model):
subject = models.CharField(max_length = 200)
drafter = models.CharField(max_length = 100)
date = models.DateTimeField()
textBody = models.TextField()
picture = models.ImageField(upload_to = "mediaformBlog/", blank = True, null = True) #image #사진을 안올릴 수도 있어서, blank와 nul을 모두 true처리
imageThumbnail = ImageSpecField(source = 'picture', processors=[ResizeToFill(120,100)]) #추가
ImageSpecField 함수를 사용해서 썸네일을 만드는 것
ResizeToFill 함수를 이용해서 크기조절을 쉽게 할 수 있다. ResizeToFill(가로,세로)
source 안에는 이 image소스를 사용해 썸네일을 지정하겠다 하는 이미지를 넣어준다.
processors는 크기를 조정해주는 기능
**models.ImageSpecField이런식으로 사용해서
AttributerError: module 'django.db.models' has no attribute "ImageSpecField' 오류가 났다.**
4. home.html에 띄어주도록 만든다
{% for blog in blogInfo %}
<tr>
<td width='15%'><h2>{{blog.subject}}</h2></td>
<td><h5 width='15%'>{{blog.drafter}}</h5></td>
<td><img src="{{blog.imageThumbnail.url}}"></td>
<td width='70%'>{{blog.summary}}
<div class="more"><a href="{% url 'detailMedia' blog.id %}">...more</a></div></td>
</tr>
{% endfor %}
alt = "대체할 파일 경로"를 써주는 것
media파일을 띄울때는 무조건 .url을 붙여야한다
ImageSpecField의 인자
image_thumbnail = ImageSpecField(source = 'image', processors = [ResizeToFill(120, 60)], format = 'JPEG', options = {'quality':60})
format은 파일의 형식을 지정해주는 것
options는 파일의 퀄리티를 지정해준느 것