I am looking for a simple way to organize stylesheets and scripts in Django. I am relatively new to the framework and language of python. I'm coming from a PHP background.
In the world of PHP / Zend there are functions that are implemented with the view/layout object. By including a single line inside your head tag for scripts and for stylsheets you can easily add a stylesheet/script in the view -> method level. I have read the Django Form Media Documentation, but this only pertains to forms needing specific styles and scripts.
Any direction?
Look at the django.contrib.admin application.
Parallel the way the admin site works.
Create a media directory.
Create media/img, media/jss, media/css, media/whatever directories
In each of these, you'll have your app's specific stuff. media/img/app1, media/jss/app1 so that each of your Django apps can have specific media without conflict or problems.
Be sure that your settings have the MEDIA_ROOT set. You'll want to read about this in the Django docs. You'll also have to set your MEDIA_URL for deployment. And you'll have to figure out how to make your webserver (i.e., Apache) serve this media.
Django should not be serving static files like .js libraries or .css files or any images. It's a waste of time. Apache can serve this just fine. For testing purposes, however, you can enable a simple file server capability in your Django site.
Finally. And most importantly.
Be sure that your page template actually references the various files you want to include on your page {{MEDIA_URL}}css/site.css, and {{MEDIA_URL}}js/app1/something.js.
Be aware that as of django 1.3, the old staticfiles app has become part of django.contrib.
The main thing to know is that you can stick your static media in a static/ subdir in any app that is in your settings.INSTALLED_APPS, and that file will be automatically collected by the collectstatic management command.
Rather than re-hash, I'll just point you at the docmentation: Django: the staticfiles app.
You might also want to consider looking for something that will process your text-based static files (css and javascript), which can easily be combined, minified and versioned. I'm about to look hard into this, so no links yet.
I like to have style-related images close to my stylesheets, and a different path for user uploaded content like profile pictures, photos, videos...
So I end-up with something like this:
/media
/style
base.css
img/
logo.gif
button.gif
/js
home.js
/profile
user_profile_image.gif
This way, image references inside css can be always relative like:
background: url(img/background.gif)
Also, there are some apps for handling media, css / js compression, sprites, etc.
It seems like you might actually looking for a way to conditionally include a stylesheet based on the current page. This can be done using template tags.
In your base.html file you would create a section to add stylesheets.
{% block addl_styles %}{% endblock %}
Then in the page you want to load the styles you would use the same block along with block.super to append your script to any other scripts called by your application.
So in your form's template you would use code like the following:
{% block addl_styles %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}your_css_folder/example.css" />
{% endblock %}
Please note that you can programmatically add the base dir using {{ MEDIA_URL }} and arrive at your folder in a safe manner.
Related
I am developing a simple site with Django, and wanted to load some images locally to some pages. But it doesn't load for some reason. I know there are similar questions, and from what I understand;
a-) It can be a directory problem, html file and img file is in the same directory. Still doesn't work; directory, and the html file. I tried moving the img.jpg to the templates/images directory and try <img src="images/img.jpg" height="400" width="374"> within the html file but that didn't work either.
b-) It could be a typo, but from the images up there that shouldn't be the case either.
c-) Files could be corrupted, I can open the image with browsers and tried using different images too.
d-) Img could be restricted, but that is not the case either. I think.
Trying to fix this for two days now, thought for some reason usage of extend or block might cause some problems and tried without them, still no good. and as I said its only a problem with local files. Can use files with direct link.
settings.py
# add this to your settings.py
import os
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')
Then create a folder named static inside your app's folder. Then create another folder with the same name as your app inside that static folder.
The resulting structure should be: your_project_name/your_app_name/static/your_app_name/
You can also create a folder named images inside that last folder.
The resulting structure should be: your_project_name/your_app_name/static/your_app_name/images/
Place your image (let's call it my_image.jpg) insite that images folder.
Now in your template you can use the static tag:
{% load static %}
...
<img src="{% static 'your_app_name/images/my_image.jpg' %}" alt="">
More info here: https://docs.djangoproject.com/en/4.0/howto/static-files/
django serve html with views:
class MyTemplateView(TemplateView):
template_name = 'my.html'
for template in Django exists template settings.
https://docs.djangoproject.com/en/4.0/ref/settings/#std-setting-TEMPLATES
templates should be in special folder.
Images Django takes from media or static settings.
https://docs.djangoproject.com/en/4.0/ref/settings/#media-root
images should be in special folder.
Try configuring your project accordingly for Django-Project.
Hay,
I Have An HTML with Css + JavaScript Page When I Try Rendring This Page In Django Like This:
def about(request):
return render(request, 'about/index.html')
but I Only Get The Html Content Without The Css And JavaScript.
I Thought This Might Be Because Of The Statics.. So I Run:
python manage.py collectstatic
But I Get This:
0 static files copied to 'C:\Users\Ammar\Desktop\Python Learning\vidly\static', 128 unmodified.
What Should I Do,
I Wish Someone Can Help.
Django has a feature of managing a good directory structures
i.e. project->apps->templates/views/urls
In a Django project all static files example images,css files,(designing part) is stored in a directory named static.
This helps in leveraging the same static properties over several apps and keeping the code structure clean.
The collect static command helps to get all static files present in the project to a static folder and we need to mention the static path in settings.py file .
Django documentation might clear your doubts further I am putting link here that might help you .
https://docs.djangoproject.com/en/3.2/howto/static-files/
What's the point of Django's collectstatic?
I am attempting to create a pretty simple website using Django that will have a number of audio files stored in it and available for streaming and downloading. I know that there are other ways to do this, like using AWS, but I wanted to figure this way out first. I'll include my template here but wanted to note that it is currently messy because I have been experimenting with different structures to figure this problem out.
{% for song in concert.song_set.all %}
<li>{{ song.song_title }}</li>
<li>{{ song.song_location }}</li>
<!-- Working -->
<audio
class = "audioPlayer uniqueShowAP"
controls <--controlsList="nodownload"
src="{% static 'shows/audio/redRocks2019/01 Yi.mp3' %}">
Your browser does not support the
<code>audio</code> element.
</audio>
<!-- Not Working...yet -->
<audio
class = "audioPlayer uniqueShowAP"
controls <--controlsList="nodownload"
src="/shows/static/shows/{{ song.song_location }}">
Your browser does not support the
<code>audio</code> element.
</audio>
{% endfor %}
What I want to happen is for every concert that I save it will go through the songs saved under that concert and add them to under the name of the song. I have each song's relative location saved in the data base so that I should be able to just call upon it's location.
I've tested this out by calling {{ song.song_location }} which correctly displays each song's location.
I also tried using src="{% static 'shows/audio/redRocks2019/01 Yi.mp3' %}" just to make sure that the element is at least set up correctly and that works too.
How do I format the src="" in the element to point it to the correct audio files? I can include my views and models or whatever additional information you might need to help me figure this out. I've been at this for a while now and just need someone to point me in the right direction.
I think you should look into using a FileField. You can have a Song model, with a song_file = FileField(upload_to='song_files/') field. Then, the files can be saved and accessed more easily when looping through model instances:
<audio src='{{ song.song_file.url }}' controls></audio>
These files will be stored locally per your media settings. You can easily transition to using a storage solution like S3 for your media files, as you mentioned. It works incredibly smoothly with Django, so don't be scared.
Static files should be for things like css, js, and images that aren't going to change, like a favicon perhaps. I guess it could be used for a static song, hypothetically. But thinking about using static files this way above in conjunction with a model instance is a bit contrived and confusing, I think.
Like any other user of django user I serve static files. I've chosen to use django-staticfiles to be ready for django 1.3 which will basically integrate it into the core.
My question is pretty simple really - this works great for pulling together multiple media sources and referencing them in a uniform way in django templates. However, I often use image backgrounds in Css like so:
#itemname { background-image: url('/path/to/image.png'); }
My question is simple - if I use absolute names, I have to hard code them. If I use relative names, moving to "subdirectory" urls messes up the resource location for these items and they can't be loaded.
So, how do I extend this solution to CSS? Said solution must avoid:
Embedding css in html. I personally avoid this.
Using hardcoded urls. This does not work very well because on my local setup I typically use 'localhost/project' with apache for testing (mod_wsgi) whereas I tend to use project.com for deployment.
Ideas?
You said you had trouble with relative paths, but I don't understand exactly what you meant.
I ran into the same issue, and I've used relative paths to solve it. The only thing to keep in mind is that when deploying the images need to (obviously) remain in the same path relative to the CSS files.
My setup in a nutshell:
Note I'm still using django-staticfiles with Django 1.2, but it should work similarly for Django 1.3
STATIC_URL = "/site_media/static/"
STATIC_ROOT = os.path.join(PROJECT_ROOT, "site_media", "static")
STATICFILES_DIRS = (
os.path.join(PROJECT_ROOT, "static_media"),
)
Then I serve the CSS from {{ STATIC_URL }}css/style.css which references images at ../images/logo.png.
and my project looks like this:
project_dir
...
stuff
static_media
...
css
images
Let me know if you have any questions, and I'll clarify.
Ok,
I don't know if there is something wrong with #John's solution but it didn't worked to me then I put this code on the CSS
{% load static %}
{% get_static_prefix as STATIC_PREFIX %}
and
<link rel="stylesheet" href="{{ STATIC_PREFIX }}css/main.css">
Hope it helps!
I have got the following file heirarchy:
project
other stuff
templates
images
images for site
app1
templates for app1
registration
login template
base.html (base for entire site)
style.css (for base.html)
In the login template, I am extending 'base.html.' 'base.html' uses 'style.css' along with all of the images in the 'templates/images' directory. For some reason, none of the CSS styles or images will show up in the login template, even though I'm extending it.
Does this missing image issue have something to do with screwed up "media" settings somewhere? I never understood those, but this is a major roadblock in my proof-of-concept, so any help is appreciated.
Thanks!
I recommend not putting the styles and images there. For development, your MEDIA_ROOT may point to an arbitrary local directory on your machine containing the files, it need not even be below your django project's root folder (see http://docs.djangoproject.com/en/dev/ref/settings/#media-root).
For production, you'll have to choose a different approach to serving static content anyway (http://docs.djangoproject.com/en/dev/howto/static-files/#the-big-fat-disclaimer).