Lesson 10: Static Files and Media in Django

In this lesson, we will explore how to manage static files and media in Django applications. Understanding how to serve and manage these files is crucial for enhancing the user experience in your web applications.

What are Static Files?

Static files are files that are not dynamically generated by your application. They include CSS files, JavaScript files, images, and fonts. These files are typically used for styling and enhancing the front-end of your application.

What are Media Files?

Media files are user-uploaded files, such as images, videos, and documents. Unlike static files, media files can change based on user interaction.

Configuring Static Files

Django provides a built-in way to manage static files. Here’s how to set it up:

1. Add Static URL and Directory: In your settings.py, define the STATIC_URL and STATICFILES_DIRS settings. python # settings.py STATIC_URL = '/static/' STATICFILES_DIRS = [ BASE_DIR / 'static', # Path to your static files ]

2. Creating Static Files: Create a directory named static in your app or project root, and add your CSS or JavaScript files there. plaintext your_project/ ├── your_app/ │ ├── static/ │ │ └── your_app/ │ │ ├── styles.css │ │ └── script.js └── manage.py

3. Using Static Files in Templates: Use the {% load static %} template tag to access static files in your templates. ```html

{% load static %}

```

Configuring Media Files

To handle media files, you need to set up the following in your settings.py:

1. Add Media URL and Directory: Define MEDIA_URL and MEDIA_ROOT settings. python # settings.py MEDIA_URL = '/media/' MEDIA_ROOT = BASE_DIR / 'media'

2. Creating Media Directory: Create a directory named media in your project root where uploaded files will be stored. plaintext your_project/ ├── media/ └── manage.py

3. Serving Media Files During Development: Update your urls.py to serve media files during development. ```python # urls.py from django.conf import settings from django.conf.urls.static import static from django.urls import path from your_app import views

urlpatterns = [ path('', views.home, name='home'), ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) ```

Best Practices

• Organize Your Static Files: Keep static files organized in separate directories for each app.
• Use Versioning for Cache Control: Append version numbers to your static file names to manage browser caching effectively.
• Avoid Hardcoding URLs: Always use the {% static %} template tag to reference static files.

Common Mistakes

Note: Forgetting to add static() to your URL patterns will result in media files not being served during development.

Note: Ensure that your STATICFILES_DIRS is correctly set to avoid 404 errors when loading static files.

Summary

• Static files are non-dynamic files used for styling and scripts, while media files are user-uploaded content.
• Configure static files using STATIC_URL and STATICFILES_DIRS in settings.py.
• Configure media files using MEDIA_URL and MEDIA_ROOT in settings.py.
• Use {% load static %} to include static files in your templates.
• Remember to serve media files in development using static() in urls.py.

Exercise 1: Create and Link a Static File

1. Create a CSS file named styles.css in the static/your_app/ directory.
2. Add some basic styles (e.g., body background color).
3. Link the CSS file in your template using the {% static %} tag.

Exercise 2: Uploading Media Files

1. Create a form in your template that allows users to upload an image.
2. Handle the uploaded image in your view and save it to the media/ directory.

Exercise 3: Displaying Media Files

1. After uploading an image, display it on your template using the MEDIA_URL to construct the image source URL.

• Understand the difference between static files and media files.
• Configure static and media file settings in settings.py.
• Use the {% load static %} tag to include static files in templates.
• Remember to serve media files during development with static() in urls.py.
• Organize and manage your static and media files effectively.