easiest way to load css and image file - django

I am trying to load a web design into django project on pyCharm. I created the URL in url.py for first page and its corresponding function in the view.py. On running the project index.html file is loaded only without images and css files. I have been searching for the solution but I could not understand any of them. Some of those said, place your static files into 'static' in the root directory of project. But in my html code, I have referenced them as css/main.css. In this case I might have to change all the code. Is there some easiest way to load static files? Please guide me step by step.
Here is the structure of my files in the project:
MyProject/template:
css/"all css files
js/"all java script files"
image/"all images"
fonts/fonts
index.html and other html files![error log:][1]

Follow these steps:
You need to create a static directory in your project root.
Specify the static directory in the django project settings.
Include the static files like css, js, image, fonts inside the static directory.
Change the static file's path in templates -- e.g. from /css/bootstrap.min.css to {% static "css/bootstrap.min.css" %}

Related

custom static files not loading in django project

I have a django project where I have kept all the static files in a project level static directory.
I have included
STATIC_URL = "/static/"
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
in the settings.py. ALso I have added + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) to the urlpatterns in the project level urls.py.
My issue is that some of the static files load whereas some do not. For. eg. I am using django_google_maps and the (example url) http://127.0.0.1:8000/static/django_google_maps/js/google-maps-admin.js loads right and the corresponding work is done.
But when I try to load my custom js/css/any-static files, (example url http://127.0.0.1:8000/static/images/favicons/favicon.ico or http://127.0.0.1:8000/static/js/image-upload-script.js), they do not load and raise a django.views.static.serve error with 404 not found.
They are right there in the directory though. I see that the static files used by third party packages are loading right but not my custom ones.
What is it that I am missing? Do we require something else to load our custom js/css files?? And yes I have used {% load static %} in my template.
I had been using static files at the project level and not the app level. Any new static file, I was directly adding to the static directory which was my static root as well. Now as per this answer,
https://stackoverflow.com/a/12161409/5379191 ,
"Your STATIC_ROOT directory should be empty and all static files should be collected into that directory (i.e., it should not already contain static files)".
So, the main thing was that it should not already contain the static files.
I created a new staticfiles folder in the project level directory, shifted my custom static files to that directory, ran the collectstatic command, and then boom it worked.
So, the main thing here to remember is not to directly place your static files in the static root dircetory but rather let the collectstatic do its job.
Adding this worked for me:
MEDIA_URL = '/static/images/'

Using both the project level and the app level static files in django

I have some static files that will remain common through all the application and I also have some static files that are specific to some particular apps only. Now in one of my apps, i want to use both the project level and the app level static files but that doesn't seem to work.
Following code section is from settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "homepage","static"),
os.path.join(BASE_DIR, "landing_page","static"),
os.path.join(BASE_DIR, "static"),
]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
I have used python manage.py collectstatic
and it returns with a warning which goes like Found another file with the destination path 'homepage\css\style.css'. It will be ignored since only the first encountered file is collected. If this is not what you want, make sure
every static file has a unique path.
Despite the above warning, I still get both the project level and the app level static files in the staticfiles folder in my root directory. When I use it in a template, the project level static file gets loaded while the app level static file (which is just a single CSS file) doesn't get loaded. Following is how I am trying to load the CSS file.
{% load static %}
<link rel="stylesheet" type="{% static 'homepage/css/style.css' %}" href="PATHTOCSSHERE">
The developer tool of chrome also doesn't show the app level CSS file in the list of loaded files, which clearly means that the file doesn't get loaded.
You need to follow the template principle of putting your app-specific files inside another level of directory with the app name - for example /project/homepage/static/homepage/css.... Now your links will work (with your existing settings).
However unless you are actually distributing your apps independently, I don't find this a helpful way of organising things. Just use your project-level static directory, and have app-specific directories in there - /project/static/homepage/css.... Then you just need a single directory in STATICFILES_DIRS.
I am absolutely sorry everyone. Just saw an obvious mistake in my own code. The error has been resolved now. Thanks!

Pycharm Can not find the reference to external javascript and css files

I am not able to locate my external javascript and css files when I ctrl click their path string.
My html template path is 'bodhitree-flipped/concept/templates/concept/content_developer.html'. And my external video.js file path is 'bodhitree-flipped/video/static/video-js/video.js'.
Any Idea how I make pycharm to locate my js files? I know the solution for this is to run python manage.py collectstatic command which will copy all my asset files to /staticfiles folder but I don't want to do it as it will increase the size of my project by duplicating all the static files.
I tried rebuiding the file index with option under File->invalidate caches/Restart... but unfortunately this also doesn't work.
This is how my project structure look like.
click on the file to see code in settings.py
Any help is deeply appreciated.
I have just changed the python template language from jinja to Django (settings->languages and framework->python template languages)and then invalidated the file cache. It worked.

Django cms project for OpenShift. Where to place static files?

I am working on a django-cms based web site but having trouble with the static files. As I am going to deploy the site to OpenShift, I have used the django-example to construct the site (https://github.com/openshift/django-example). This way I ended up with the following overall structure of my django project:
root_folder
wsgi
media
static
my_project
my_app
templates
So as you see, it's a bit different from the standard Django dir structure. Django docs (https://docs.djangoproject.com/en/1.8/howto/static-files/) has told me the following:
Include django.contrib.staticfiles in INSTALLED_APPS: Done
Define a static url, e.g. STATIC_URL = '/static/‘: Done
Use static template tag to refer to static files, e.g. {% static "my_app/myexample.jpg" %}: Done
Furthermore, the static root is defined as
STATIC_ROOT = os.path.join(WSGI_DIR, 'static')
where WSGI_DIR points to the folder named wsgi.
I keep getting 404s in my dev environment where I use Debug=True, when I try to refer to the static files from my base template. I have tried to place them in the following locations with no luck:
/wsgi/static/
/wsgi/static/my_app/
/wsgi/my_project/static/
/wsgi/my_project/static/my_app/
/wsgi/my_project/my_app/static/
/wsgi/my_project/my_app/static/my_app/
Where should I place the static files, and have I configured it correctly?
I discovered that my_app was not in the INSTALLED_APPS list (apparently this is not part of the code structure I got from django-example). When I added the app to the list, it worked. The correct location of the static files: /wsgi/my_project/my_app/static/my_app/

In Django (v1.6.5), what's the best practice for location of Templates, Static files?

I am severely confused about where to put my templates files and static files.
I understand absolute and relative paths just fine, but I can't seem to find any instructions that mirror the installation I have. I know this resembles other questions, but those answers aren't working. The video I watched to successfully build a simple app didn't put templates in the Project folder, which is where logic tells me they should be.
I have Python at:
C:\Python27
Django (v1.6.5) at:
C:\Python27\Lib\site-packages\django
I created a project "mysite" and an app called "films."
Project "mysite":
C:\Python27\Scripts\venv\mysite
and an App "films":
C:\Python27\Scripts\venv\mysite\films
The video I watched had me put my templates at:
C:\Python27\Lib\site-packages\django\contrib\admin\templates
But this seems completely stupid because the templates are outside of both the Project and the App.
Shouldn't I put a templates folder in the Project folder:
C:\Python27\Scripts\venv\mysite\templates
And then create subdirectories using the App name?
What files do I need to edit (and how) to tell Django where to find them?
Follow a similar process for static files (css, images)?
Like all frameworks, django offers great benefits if you follow some guidelines (and give up some control). The trick is to know what these guidelines are.
For templates:
If the template is not tied to a particular application, put it in a templates directory at the root of your project. Add the full path to this directory to TEMPLATE_DIRS.
All other templates should go in a directory called templates inside your application directory. So if you application is called myapp, templates for myapp will go in myapp/templates/
For static files:
For files related to specific applications, inside your application directory create a directory called static, then inside it a directory with the name of your application. So, if your application is called myapp, you would have myapp/static/myapp. Place all your static content for this application here; for example myapp/static/myapp/js/funky.js.
For static files that are generic, create a directory called assets (or static) in the root directory of your project. Add the full path to this directory to STATICFILES_DIRS.
By default, django will search all applications listed in INSTALLED_APPS, and add any templates and static directories to its search path for files. This is how, by default, the admin works without you having to configure anything.
If you chose to place your templates and static files in some other location, only then do you need to modify the TEMPLATE_DIRS and STATICFILES_DIRS settings. If all your templates and static assets are tied to applications, just creating the directories as mentioned above makes everything work.
If you are wondering why you need to create another directory under myapp/static/ to store your static files, this is more for portability. The collectstatic command is a simply "copy and replace" utility. It will overwrite all files in the STATIC_DIR location. This means that if two applications have some static file with the same name, they will be overwritten without warning. Adding a subdirectory keeps your application's static assets from being overwritten, because the exact path will be created.
Suppose you have two applications, app1 and app2, and both have a file named style.css in their respected directories:
app1/static/css/style.css
app2/static/css/style.css
When you run collectstatic, you'll end up with the following (assuming static is the name of your STATIC_DIR setting):
static/css/style.css
This may be the style.css from app1 or app2, the other cannot be determined (its actually based on the INSTALLED_APPS order). To prevent this, if you have:
app1/static/app1/css/style.css
app2/static/app2/css/style.css
Now, you'll end up with:
static/app1/css/style.css
static/app2/css/style.css
Both files will be preserved.
You also shouldn't put your code in your virtual environment directory. The virtual environment is not part of your source code, and placing your project in the same directory may cause problems later.
Create a single directory for your environments - I call mine envs (creative, I know). Create all your environments in this directory. Once you activate the environment, you can work in any directory in your system and your shell will be configured for that environment's Python.
Finally for the best, accurate, most up-to-date information - always refer to the django manual and the tutorial. Almost all other resources (even the often suggested djangobook.com) are outdated.