0

I've read through a few answers/articles at these links, but am still confused as all of them SEEM to be slightly different than what I'm after:

here

here

here

here

here

I am looking to make use of Django's ImageField function for uploading images from my admin page, to my portfolio/blog's app space. My folder structure looks like this:

Portfolio_Blog_Website
    |---personal_portfolio_project
    |---projects_app
        |---migrations
        |---static
            |---img
        |---templates

So I want to upload images to/display on the template from, the app > static > img folder.

Currently, I have STATIC_URL = 'static/' set, and I'm manually drag and dropping image files into that folder, and using models.FilePathField(path="/img") in the model, and displaying them (in a for loop) with <img src="{% static project.image %}">, which works. I want to switch to be able to upload images from the admin page, and then display them on the app's page like they're supposed to.

From what I've read, we have to define a MEDIA_ROOT and MEDIA_URL variable to use with models.ImageField(upload_to="img/"). The problem I see is that MEDIA_ROOT needs to be an ABSOLUTE path to the folder, which I COULD set as \\C:\Portfolio_Blog_Website\projects_app\static\img, however this isn't necessarily what I want because I'm specifically targeting the one specific app's path, but I don't want to upload images from other app's to that path also, so how can I make this work? I want each app to have its own static > img folders, and then from the admin page, I can upload to those specific app's directories, and then display them on each app's page.

In addition to my folder structure shown above, here's some other details that should help:

personal_portfolio_project > settings.py

STATIC_URL = 'static/'
MEDIA_URL = "/img/" # This doesn't work
MEDIA_ROOT = BASE_DIR # This doesn't work

projects_app > models.py

from django.db import models

# Create your models here.

# Portfolio project overview model
class Project(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    technology = models.CharField(max_length=20)
    # image = models.FilePathField(path="/img") # works as /static/img, this works with STATIC_URL
    image = models.ImageField(upload_to="img/") # This doesn't work

projects_app > project_index.html

{% extends "base.html" %}
{% load static %}
{% block page_content %}
<h1>Projects</h1>
<div class="row">
    {% for project in projects %}
        <div class="col-md-4">
            <div class="card mb-2">
                <img class="card-img-top" src="{% static project.image %}">
                <div class="card-body">
                    <h5 class="card-title">{{ project.title }}</h5>
                    <p class="card-text">{{ project.description }}</p>
                    <a href="{% url 'project_detail' project.pk %}" class="btn btn-primary">
                        Read More
                    </a>
                </div>
            </div>
        </div>
    {% endfor %}
</div>
{% endblock %}
wildcat89
  • 1,159
  • 16
  • 47
  • 1
    Firstly you are mixing up static and media files. Static files as the name suggests are supposed to be static i.e. not updated dynamically. On the other hand user uploaded files are called media files. Using the `static` template tag with media files is incorrect, you can simply write `{{ project.image.url }}`. Next you simply need to set `upload_to` such that you get the appropriate prefix: `upload_to="img/app_name"`. (Also note `MEDIA_ROOT` is a _separate_ directory used for storing media files it is not related to `STATICFILES_DIRS`) – Abdul Aziz Barkat Jun 17 '22 at 04:38
  • 1
    See [What is the difference between static files and media files in Django?](https://stackoverflow.com/questions/5016589/what-is-the-difference-between-static-files-and-media-files-in-django) – Abdul Aziz Barkat Jun 17 '22 at 04:41
  • @AbdulAzizBarkat So am I understanding that the `media` and `static` folders are NOT to be in each app's folder, but rather they should be in the root of the entire website, and inside the `media`/`static` folders, there should be separate app_name folders in there? – wildcat89 Jun 17 '22 at 06:11
  • Scratch that, it's answered here: https://stackoverflow.com/questions/6418072/accessing-media-files-in-django – wildcat89 Jun 17 '22 at 06:14
  • 2
    You can have `static` directories in each app but when you go into production you are going to run `collectstatic` to collect all of those into a single directory hence if your apps have their own static directories they should be like so `app/static/app/file.css` to prevent name clashes. For media on the other hand you can only have one directory from the start (Also these don't need to be on the root of the website either as you can have them on mounted drives, some storage backend on the cloud etc.) – Abdul Aziz Barkat Jun 17 '22 at 06:15

0 Answers0