CODEWITHSUNDEEP
pythondjangodjango-templatesdjango-admin
Naveen
Naveen

Reputation: 677

Include Static Files from templates Django

Project Structure:

├── db.sqlite3
├── manage.py
├── static
│   └── admin
│       ├── css
│       ├── img
│       └── js
├── abc1
│   ├── admin.py
│   ├── __init__.py
│   ├── migrations
│   │   ├── __init__.py
│   ├── models.py
│   ├── templates
│   │   └── abc1
│   │       ├── homepage.html
│   │       ├── css
│   │       ├── img
│   │       ├── js
│   ├── tests.py
│   ├── urls.py
│   ├── views.py
└── abc2
    ├── functions.py
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    ├── views.py
    ├── wsgi.py

Settings.py File: 

MEDIA_URL = '/media/'
STATIC_URL = '/static/'
PROJECT_DIR = os.path.dirname(__file__)
SETTINGS_PATH = os.path.dirname(os.path.dirname(__file__))

# Static files (CSS, JavaScript, Images)
STATIC_ROOT = ''
STATICFILES_DIRS = (
    os.path.join(PROJECT_DIR, '../static'),
    os.path.join(PROJECT_DIR, '../templates/abc1/img'),
)

homepage.html:

<head>
    {% load staticfiles %}

    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
    <link href="{% static 'css/theme.css' %}" rel="stylesheet">
    <link href="{% static 'css/magnific-popup.css' %}" rel="stylesheet">
</head>
<body>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/cbpAnimatedHeader.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
</body>

Error Logs: 

[08/Jan/2016 17:16:42] "GET /static/css/theme.css HTTP/1.1" 404 1643
[08/Jan/2016 17:16:42] "GET /static/css/bootstrap.css HTTP/1.1" 404 1655
[08/Jan/2016 17:16:42] "GET /static/css/magnific-popup.css HTTP/1.1" 404 1670

[08/Jan/2016 17:16:42] "GET /abc1/js/owl.carousel.min.js HTTP/1.1" 404 3579
[08/Jan/2016 17:16:42] "GET /abc1/js/bootstrap.min.js HTTP/1.1" 404 3570
[08/Jan/2016 17:16:42] "GET /abc1/js/cbpAnimatedHeader.min.js HTTP/1.1" 404 3594

I am trying to include the static css/js/img files in Django. Can someone please point out my mistake ? (Couldn't figure out the exact issue/reason, So had to mention a lot of details)

Thanks,

Upvotes: 0

Views: 791

Answers (1)

Ivan Semochkin
Ivan Semochkin

Reputation: 8907

Create one directory static in the main folder of project, wich contains manage.py and put all static in this folder. Create folders for css, js, img, and load it like you did before: 

<link rel="stylesheet" link href="{% static 'css/bootstrap.min.css' %}"/>

Use this settings: 

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)

And you dont need this dots before path ../static

Upvotes: 5

Related Questions