1. Static Files
2. Media Files
- 2.1. ImageField()
  - 2.1.2. FileField()
- 2.2. Before Using Media Files
3. Image File CRUD
4. Image Resizing

1. Static Files

1.1. Static Files

Files that do not require additional processing before being shown to the user. To request a static file to the server, we should know the address(url) of the file

Examples
- media file
- javascript file
- CSS file

1.2. Static Files with Django

Check INSTALLED_APPS in settings.py
It is set by default.

INSTALLED_APPS = [
 django.contrib.staticfile,
 ... ]

Set STATIC_DIRS in settings.py
It's about setting an additional static file path in addition to the app path.
```
# Default: []
STATICFILES_DIRS = [
    BASE_DIR / 'static',
]
```
Set STATIC_URL in settings.py
The path corresponding to STATIC_ROOT. It is set to STATIC_URL = '/static/' by default.
Make 'static/app_name/' folder for each app to divide namespace
my_app/static/my_app/sample_img.jpg

print with static templates tags

{% extends 'must_be_on_the_top.html' %}
<!-- import static -->
{% load static %}
<img src="{% static 'app_name/img_name.jpg' %}" />

1.3. Deploy Static Files

1.3.1. STATIC_ROOT

Where all the static files are collected when the command collectstatic is excuted. The default is None. If DEBUG = TRUE, STATIC_ROOT is not applied.

It's required because the server which actually runs the project doesn't know where the static files are.

1.3.2. Procedure

Set STATIC_ROOT in settings.py
```
STATIC_ROOT = BASE_DIR / 'staticfiles'
```
Run the cmd
python manage.py collectstatic

2. Media Files

The static files which are uploaded by the user.

2.1. ImageField()

The model field for image files.
It inherits FileField and has a function of checking the validity of an image file.
The instance of ImageField is a string with a maximum length of 100
- The string is the path after MEDIA_ROOT
- When the same name of image is saved in the exactly the same directory, a random string is added to the name

2.1.2. FileField()

FileField(upload_to='', storage=None, max_length=100, **options)

upload_to
- setting the detailed path (path after MEDIA_ROOT)

2.2. Before Using Media Files

Set MEDIA_ROOT
The absolute path where all the media files will be stored. It must be different from STATIC_ROOT
```
# Default: ''
MEDIA_ROOT = BASE_DIR / 'media'
```
Set MEDIA_URL
The path corresponding to MEDIA_ROOT. It must be different from STATIC_URL.
MEDIA_URL = '/media/'

Link MEDIA_URL to MEDIA_ROOT

# project/urls.py
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    ...,
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Install Pillow library
The libarary which is necessary for processing image files in Python.
pip install Pillow

3. Image File CRUD

3.1. Create

models.py
```
class Article(models.Model):
    image = models.ImageField(blank=True, upload_to='images/')
```
- blank
  - The field can be blank, and '' can pass the validation test.
  - validation-related
- upload_to(optional)
  - Sets the detailed path (path after MEDIA_ROOT)
    - Example of using Python time module
      upload_to = '%Y/%m/%d/
  - A functon can be used as the parameter.
```
def articles_image_path(self, filename):
    return f'images/{self.user.username}/{filename}'

class Article(models.Model):
    image = models.ImageField(blank=True, upload_to=articles_image_path)
```
    - The arguments are fixed like above. Django doc about upload_to
    - pk can't be used in the function becuase the function is excuted before saved
create.html
```
<form action="#" method="POST" enctyp="multipart/form-data"></form>
```
- enctype
  - Sets the encoding type of the form
  - Default: aplication/x-www-from-rulencoded

views.py

def created(request):
    if request.method == 'POST':
        form = ArticleForm(request.POST, request.FILES)
    ...

BaseModelForm(data=None, files=None, ..., instance=None)

3.2. READ

detail.html

{% if article.image %}
<img src="{{ article.image.url }}" alt="{{ article.image }}" />
{% endif %}

3.3. UPDATE

Strictly speaking, it's not updating but a replacement The manage the previous file, you should use an addtional library like django-cleanup

update.html

<form action="#" method="POST" enctyp="multipart/form-data"></form>

views.py

def update(request):
    article = Article.objects.get(pk=pk)
    if request.method == 'POST':
        form = ArticleForm(request.POST, request.FILES, instance=article)
...

4. Image Resizing

Resizing the uploaded image to use storage space efficiently

4.1. Django Imagekit

Install dajngo-imagekit
- pip install dajngo-imagekit
Add to INSTALLED_APPS
- INSTALLED_APPS = ['imagekit', ]

4.2. Make Thumbnail Without Saving the Original Image

models.py

from imagekit.processors import Thumbnail
from imagekit.models import ProcessedImageField

class Article(models.Model):
    image = ProcessedIamgeField(
        blank=True,
        upload_to='thumbnails/',
        processors=[Thumbnail(200, 300)],   # pixel : width, height
        format='JPEG',
        options={'quality':80}              # resolution
    )

4.3. Make Thumbnail With Saving the Original Image