장고:사진 올리기 - 편집 역사

Sam: /* 장고! 웹 프레임워크! 틀:장고 장고:개요 장고:웹페이지설계 장고:앱 장고:url 장고:model 장고:DB 장고:모델 필드 장고:모델의 변경 장고:view 장고:클래스형 뷰, 제네릭 뷰 장고:view 각종 기능 장고:template 장고:static. 정적파일 사용하기 장고:CSS 사용하기 장고:JS 사용하기 장고:글꼴 사용 장고:부트스트랩 장고:media. 미디어 파일 사용하기 장고:관리자페이지 장고:settings.py 장고: */

2023-02-06T09:19:34Z

장고! 웹 프레임워크! 틀:장고 장고:개요 장고:웹페이지설계 장고:앱 장고:url 장고:model 장고:DB 장고:모델 필드 장고:모델의 변경 장고:view 장고:클래스형 뷰, 제네릭 뷰 장고:view 각종 기능 장고:template 장고:static. 정적파일 사용하기 장고:CSS 사용하기 장고:JS 사용하기 장고:글꼴 사용 장고:부트스트랩 장고:media. 미디어 파일 사용하기 장고:관리자페이지 장고:settings.py 장고:

@@ 1번째 줄: / 1번째 줄: @@
 {{장고}}
 <br />
@@ 48번째 줄: / 11번째 줄: @@
      <input type="file" name="image" id="image" accept="image/*" value="{{ form.image.value|default_if_none:''}}">
 </form>
-</syntaxhighlight>수정페이지의 탬플릿도 그대로 사용하면 되는데, 필요에 따라 '등록하기'를 '수정하기'로 바꾼다든가 간단한 조작만 하면 된다.
+</syntaxhighlight><br />
 ===상세 페이지 변경===
 이미지가 보이는 곳은 상세화면이므로 detatil.html을 수정한다. 적당한 자리에 다음과 같은 형태로 끼워넣는다. image 속성 하위엔 url 속성이 있어 이를 통해 이미지를 가져온다.<syntaxhighlight lang="html+django">
@@ 74번째 줄: / 36번째 줄: @@
 </syntaxhighlight>그런데, 이건 디버그모드가 True일 때에만 작동한다. 이것은 확인용으로, 외부서버와 연결한 후에는 지워버린다.
 <br />
 =이미지 리사이징 및 포멧 변경=
 ==django-imagekit==
 고용량의 이미지를 올릴 때 이미지 목록에선 이미지 전체가 아닌, 썸네일을 보여주는 편이 경제적이다. 혹은 사진을 흑백사진으로 만든다든가, 용량을 바꾼다든가, 사진의 불필요한 부분을 다듬는다든가 간단한 조작이 필요할 때 사용하는 패키지이다.
@@ 200번째 줄: / 117번째 줄: @@
 |}
-=== 팁 ===
+===팁===
 보통 경로를 지정할 때 아래 메서드를 정의해 사용한다.<syntaxhighlight lang="python">
 def user_path(self, filename):

192.168.219.100: /* 모델작성 */

2021-06-17T11:59:37Z

모델작성

← 이전 판		2021년 6월 17일 (목) 11:59 판
175번째 줄:		175번째 줄:
	class Profile(models.Model):		class Profile(models.Model):
	avatar = models.ImageField(upload_to='avatars')		avatar = models.ImageField(upload_to='avatars')
	avatar_thumbnail = ImageSpecField(source='avatar',		avatar_thumbnail = ImageSpecField(source='avatar', # 원본의 위치 지정
	processors=[ResizeToFill(100, 50)], # 가로, 세로 순서.		processors=[ResizeToFill(100, 50)], # 가로, 세로 순서.
	format='JPEG',		format='JPEG',
193번째 줄:		193번째 줄:

	class Profile(models.Model):		class Profile(models.Model):
	avatar_thumbnail = ProcessedImageField(upload_to='avatars',		avatar_thumbnail = ProcessedImageField(upload_to='avatars', # 올릴 위치 지정.
	processors=[ResizeToFill(100, 50)],		processors=[ResizeToFill(100, 50)],
	format='JPEG',		format='JPEG',
199번째 줄:		199번째 줄:
	</syntaxhighlight>		</syntaxhighlight>
	\|}		\|}

			=== 팁 ===
			보통 경로를 지정할 때 아래 메서드를 정의해 사용한다.<syntaxhighlight lang="python">
			def user_path(self, filename):
			extention = filename.split('.')[-1] # 파일의 확장자만 추출한다.
			return '경로/{}/{}.{}'.format(self.user.username, 'profile', extention)
			</syntaxhighlight>

	===탬플릿에서의 사용===		===탬플릿에서의 사용===

192.168.219.100: /* 모델 작성 */

2021-05-27T13:08:28Z

모델 작성

← 이전 판		2021년 5월 27일 (목) 13:08 판
27번째 줄:		27번째 줄:
	image=models.ImageField(upload_to='images/%Y/%m/%d', default='images/no_image.png')		image=models.ImageField(upload_to='images/%Y/%m/%d', default='images/no_image.png')
	#setting 값에 지정된 상대경로를 사용하기 위해 경로 처음엔 /를 두지 않는다.		#setting 값에 지정된 상대경로를 사용하기 위해 경로 처음엔 /를 두지 않는다.
	</syntaxhighlight>upload_to는 저장할 경로를 정하는 것, default는 이미지 업로드가 되어있지 않을 때 사용할 것을 의미한다.		</syntaxhighlight>upload_to는 저장할 경로를 정하는 것. 경로는 연도, 월, 일자로 구분하는데, 하나의 디렉터리에 관리하는 것보다 찾는 속도가 빠르다. 그리고 파일의 내용에 대해 유추하기도 어렵다.

			저장경로는 f'경로/%Y/{변수}' 형태로 지정해 넣을 수도 있다.

			default는 이미지 업로드가 되어있지 않을 때 사용할 것을 의미한다.

	default 는 해당 미디어를 찾지 못했을 때 나타내 보여줄 것.		default 는 해당 미디어를 찾지 못했을 때 나타내 보여줄 것.
222번째 줄:		226번째 줄:
	===이외 사용===		===이외 사용===
	위에선 이미지 처리를 모델에서 수행했는데, form에서 처리하고 모델에선 일반 이미지 필드를 사용할 수도 있다.		위에선 이미지 처리를 모델에서 수행했는데, form에서 처리하고 모델에선 일반 이미지 필드를 사용할 수도 있다.

			삭제 : 이미지를 수정하면 기존의 이미지는 남아있는 상태에서 새 이미지를 올리게 되는데, 여기에 대한 낭비는 줄여야 하지 않을까??

Sam: /* 모델작성 */

2021-03-25T12:31:54Z

모델작성

← 이전 판		2021년 3월 25일 (목) 12:31 판
117번째 줄:		117번째 줄:
	=이미지 리사이징 및 포멧 변경=		=이미지 리사이징 및 포멧 변경=

	==imagekit==		==django-imagekit==
	고용량의 이미지를 올릴 때 이미지 목록에선 이미지 전체가 아닌, 썸네일을 보여주는 편이 경제적이다. 혹은 사진을 흑백사진으로 만든다든가, 용량을 바꾼다든가, 사진의 불필요한 부분을 다듬는다든가 간단한 조작이 필요할 때 사용하는 패키지이다.		고용량의 이미지를 올릴 때 이미지 목록에선 이미지 전체가 아닌, 썸네일을 보여주는 편이 경제적이다. 혹은 사진을 흑백사진으로 만든다든가, 용량을 바꾼다든가, 사진의 불필요한 부분을 다듬는다든가 간단한 조작이 필요할 때 사용하는 패키지이다.

			기존에 사용하던 이미지 모델이 있더라도 적용하면 /media/CACHE 디렉터리 안에 기존 디렉터리 경로와 같은 형태로 썸네일을 만든다.
	{\| class="wikitable"		{\| class="wikitable"
	!과정		!과정
126번째 줄:		128번째 줄:
	\|설치		\|설치
	\|사전에 PIL이나 Pillow같은 이미지 조작툴이 설치되어 있어야 한다.		\|사전에 PIL이나 Pillow같은 이미지 조작툴이 설치되어 있어야 한다.
			django-imagekit과 imagekit은 다르니 혼동하지 않도록 유의.
	\|pip install django-imagekit		\|pip install django-imagekit
	\|-		\|-
132번째 줄:		135번째 줄:
	\|INSTALLED_APPS 하위에 'imagekit' 추가		\|INSTALLED_APPS 하위에 'imagekit' 추가
	\|}		\|}
	이후		이후.

	===모델작성===		===모델작성===
144번째 줄:		147번째 줄:
	\|모델작성을 통해 활용하는 게 가장 쉬운 방법.		\|모델작성을 통해 활용하는 게 가장 쉬운 방법.
	원본 이미지도 함께 저장한다.		원본 이미지도 함께 저장한다.


			섬네일은 /media/CACHE/ 디렉터리에 저장된다.
			{\| class="wikitable"
			\|+processors 옵션
			!옵션
			!설명
			\|-
			\|ResizeToFill
			\|해당 크기에 채워 리사이징.(넘친 부분 잘라 크기 통일)
			\|-
			\|<code>ResizeToFit</code>
			\|해당 크기안에 들어오게 리사이징.(원본비율 유지)
			\|-
			\|
			\|
			\|}
	\|<syntaxhighlight lang="python">		\|<syntaxhighlight lang="python">
	from django.db import models # 기존 모델에서 사용.		from django.db import models # 기존 모델에서 사용.
152번째 줄:		172번째 줄:
	avatar = models.ImageField(upload_to='avatars')		avatar = models.ImageField(upload_to='avatars')
	avatar_thumbnail = ImageSpecField(source='avatar',		avatar_thumbnail = ImageSpecField(source='avatar',
	processors=[ResizeToFill(100, 50)],		processors=[ResizeToFill(100, 50)], # 가로, 세로 순서.
	format='JPEG',		format='JPEG',
	options={'quality': 60})		options={'quality': 60})
187번째 줄:		207번째 줄:
	\|}		\|}

	=== admin 등록 ===		===admin 등록===
	<syntaxhighlight lang="python">		<syntaxhighlight lang="python">
	from django.contrib import admin		from django.contrib import admin

Sam: /* imagekit */

2021-03-25T05:57:31Z

imagekit

← 이전 판		2021년 3월 25일 (목) 05:57 판
117번째 줄:		117번째 줄:
	=이미지 리사이징 및 포멧 변경=		=이미지 리사이징 및 포멧 변경=

	== imagekit ==		==imagekit==
	고용량의 이미지를 올릴 때 이미지 목록에선 이미지 전체가 아닌, 썸네일을 보여주는 편이 경제적이다. 혹은 사진을 흑백사진으로 만든다든가, 용량을 바꾼다든가, 사진의 불필요한 부분을 다듬는다든가 간단한 조작이 필요할 때 사용하는 패키지이다.		고용량의 이미지를 올릴 때 이미지 목록에선 이미지 전체가 아닌, 썸네일을 보여주는 편이 경제적이다. 혹은 사진을 흑백사진으로 만든다든가, 용량을 바꾼다든가, 사진의 불필요한 부분을 다듬는다든가 간단한 조작이 필요할 때 사용하는 패키지이다.
	{\| class="wikitable"		{\| class="wikitable"
134번째 줄:		134번째 줄:
	이후		이후

	=== 모델작성 ===		===모델작성===
	다음 코드는 https://pypi.org/project/django-imagekit/<nowiki/>에서 공개된 코드를 변형한 것이다.		다음 코드는 https://pypi.org/project/django-imagekit/<nowiki/>에서 공개된 코드를 변형한 것이다.
	{\| class="wikitable"		{\| class="wikitable"
176번째 줄:		176번째 줄:
	\|}		\|}

	=== 탬플릿에서의 사용 ===		===탬플릿에서의 사용===
	{\| class="wikitable"		{\| class="wikitable"
	!과정		!과정
187번째 줄:		187번째 줄:
	\|}		\|}

	=== 이외 사용 ===		=== admin 등록 ===
			<syntaxhighlight lang="python">
			from django.contrib import admin
			from imagekit.admin import AdminThumbnail
			from .models import Photo

			class PhotoAdmin(admin.ModelAdmin):
			list_display = ('__str__', 'admin_thumbnail')
			admin_thumbnail = AdminThumbnail(image_field='thumbnail')

			admin.site.register(Photo, PhotoAdmin)
			</syntaxhighlight>

			===이외 사용===
	위에선 이미지 처리를 모델에서 수행했는데, form에서 처리하고 모델에선 일반 이미지 필드를 사용할 수도 있다.		위에선 이미지 처리를 모델에서 수행했는데, form에서 처리하고 모델에선 일반 이미지 필드를 사용할 수도 있다.

Sam: /* 이미지 리사이징 및 포멧 변경 */

2021-03-25T01:59:07Z

이미지 리사이징 및 포멧 변경

@@ 55번째 줄: / 55번째 줄: @@
 </syntaxhighlight>
-== 라우팅 ==
+==라우팅==
 <nowiki>{{ user.profile.image.url }}</nowiki> 형태로 이미지를 불러오기도 한다. 모델의 속성에 이미지를 넣으면, 속성.url 형태로 내용을 불러올 수 있다.
@@ 115번째 줄: / 115번째 줄: @@
 </syntaxhighlight>
-==이미지 리사이징 및 포멧 변경==
+=이미지 리사이징 및 포멧 변경=
 https://pypi.org/project/django-imagekit/

Sam: /* 등록 만들기 */

2021-03-24T04:24:29Z

등록 만들기

← 이전 판		2021년 3월 24일 (수) 04:24 판
33번째 줄:		33번째 줄:
	===pillow 설치===		===pillow 설치===
	모델을 반영하기 위해 makemigrations를 실행하면 에러가 뜬다. HINT로 pillow를 설치하라는 메시지가 뜬다. 메시지 그대로 <code>python -m pip install Pillow</code>를 입력하자.		모델을 반영하기 위해 makemigrations를 실행하면 에러가 뜬다. HINT로 pillow를 설치하라는 메시지가 뜬다. 메시지 그대로 <code>python -m pip install Pillow</code>를 입력하자.

	~~<br />~~

	~~==라우팅==~~

	~~===url===~~
	~~<nowiki>{{ user.profile.image.url }}</nowiki> 형태로 이미지를 불러오기도 한다. 모델의 속성에 이미지를 넣으면, 속성.url 형태로 내용을 불러올 수 있다.~~

	~~DB에는 해당 이미지의 주소가 저장된다.~~

	~~path 뒤에 다음과 같이 추가하자.<syntaxhighlight lang="python">~~
	~~from django.conf.urls.static import static~~
	~~from django.conf import settings~~

	~~urlpatterns =[~~

	~~] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)~~
	~~</syntaxhighlight>미디어 디렉토리를 url에 연결해넣는다. 이를 static을 통해 불러온다.~~

	<br />		<br />
72번째 줄:		54번째 줄:
	{% endif %}		{% endif %}
	</syntaxhighlight>		</syntaxhighlight>

			== 라우팅 ==
			<nowiki>{{ user.profile.image.url }}</nowiki> 형태로 이미지를 불러오기도 한다. 모델의 속성에 이미지를 넣으면, 속성.url 형태로 내용을 불러올 수 있다.

			그런데, 위처럼 url로 불러올 때엔 urls.py에 라우팅해주어야 한다.

	====urls.py 수정(혹시 외부서버에 연결해 사용할 요량이라면 필요 없다.)====		====urls.py 수정(혹시 외부서버에 연결해 사용할 요량이라면 필요 없다.)====
	보통 여기까지 하면 관리자페이지에서 사진을 올려 확인하는 과정을 거친다. 그런데, 위처럼 해서 이미지를 등록해도 이미지가 보이지 않는데, 이는 urls.py에 미디어 경로가 등록되지 않았기 때문이다.		보통 여기까지 하면 관리자페이지에서 사진을 올려 확인하는 과정을 거친다. 그런데, 위처럼 해서 이미지를 등록해도 이미지가 보이지 않는데, 이는 urls.py에 미디어 경로가 등록되지 않았기 때문이다.

	때문에 이를 위해 최상단의 urls.~~py에~~ 다음과 같은 내용을 추가해준다.(기존 urlpatterns의 하단에)<syntaxhighlight lang="python">		때문에 이를 위해 최상단의 urls.py의 urlpatterns에 다음과 같은 내용을 추가해준다.(기존 urlpatterns의 하단에)<syntaxhighlight lang="python">
	from django.conf.urls.static import static		from django.conf.urls.static import static
	from django.conf import settings		from django.conf import settings
128번째 줄:		115번째 줄:
	</syntaxhighlight>		</syntaxhighlight>

	== 이미지 리사이징 및 포멧 변경 ==		==이미지 리사이징 및 포멧 변경==
	https://pypi.org/project/django-imagekit/		https://pypi.org/project/django-imagekit/

2021년 2월 25일 (목) 08:31에 Sam님의 편집

2021-02-25T08:31:43Z

← 이전 판		2021년 2월 25일 (목) 08:31 판
127번째 줄:		127번째 줄:
	file_overwrite=False		file_overwrite=False
	</syntaxhighlight>		</syntaxhighlight>

			== 이미지 리사이징 및 포멧 변경 ==
			https://pypi.org/project/django-imagekit/

Sam: /* 라우팅 */

2021-01-05T03:08:26Z

라우팅

← 이전 판		2021년 1월 5일 (화) 03:08 판
39번째 줄:		39번째 줄:

	===url===		===url===
	<nowiki>{{ user.profile.image.url }}</nowiki> 형태로 이미지를 불러오기도 한다.		<nowiki>{{ user.profile.image.url }}</nowiki> 형태로 이미지를 불러오기도 한다. 모델의 속성에 이미지를 넣으면, 속성.url 형태로 내용을 불러올 수 있다.

	DB에는 해당 이미지의 주소가 저장된다.		DB에는 해당 이미지의 주소가 저장된다.

Sam: /* 라우팅 */

2021-01-04T10:17:02Z

라우팅

← 이전 판		2021년 1월 4일 (월) 10:17 판
36번째 줄:		36번째 줄:
	<br />		<br />

	== 라우팅 ==		==라우팅==

	=== url ===		===url===
	<nowiki>{{ user.profile.image }}</nowiki> 형태로 이미지를 불러오기도 한다.		<nowiki>{{ user.profile.image.url }}</nowiki> 형태로 이미지를 불러오기도 한다.

	DB에는 해당 이미지의 주소가 저장된다.		DB에는 해당 이미지의 주소가 저장된다.