How To Render An HTML With Css + JavaScript File In Django - python

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?

Related

Why practically the same path written in different forms doesn't works correct?

I am working in one django project.
I am trying to show image that is saved in Django models attribute (ImageFielf), and it's path is:
../projectname/appname/static/img/imgname.png
Considering that,I write in HTML code that:
class="result-item-preview fadeIn animated " style="background-image:url('../../projectname/appname/static/img/1202296.jpg'), url('../static/img/default-movie.png');
But this doesen't works.
It only works if it is written in usually form:
class="result-item-preview fadeIn animated " style="background-image:url('../static/img/1202296.jpg'), url('../static/img/default-movie.png');
How to solve this problem ?
In the Django docs they advise to use static template tag,
https://docs.djangoproject.com/en/3.1/howto/static-files/
style="background-image:url({% static 'img/1202296.jpg' %}), url({% static 'img/default-movie.png' %});"
Now about the question itself: why the first method is not working? This is because the server that serves your web app has no clue about the directory structure in your Django project, hence it doesn't know where to find '../../projectname/appname/static/img/1202296.jpg'.
The second method is working because you defined the location of static files in the Django project settings, so the web server knows how to find static files and how to server them.

Flask non-template HTML files included by Jinja

In my Flask application, I have one html file that holds some html and some js that semantically belongs together and cannot be used separately in a sensible way. I include this file in 2 of my html templates by using Jinja's {%include ... %}.
Now my first approach was to put this file in my templates folder. However, I never call render_template on this file, so it seems unapt to store it in that directory.
Another approach would be to put it into the static folder, since its content is indeed static. But then I don't know how to tell Jinja to look for it in a different directory, since all the files using Jinja are in the templates folder.
Is there a way to accomplish this with Jinja, or is there a better approach altogether?
You're over-thinking this. If it's included by Jinja, then it's a template file and belongs in the templates directory.

I'm using django framework. i'm stuck up with how to show image on my home page

I'm new to django framework .I just want to show simple image on my home page (localhost:8000). I'm getting confused how to use models.py, views.py and urls.py. Can you help me to show just simple image file.
Thank you.
If you just want to display static image, django docs for managing static files and django.contrib.staticfiles may help.
You can
edit your project's settings.py and add appropriate static files settings
# Absolute path to the directory static files should be collected to.
# Don't put anything in this directory yourself; store your static files
# in apps' "static/" subdirectories and in STATICFILES_DIRS.
# Example: "/home/media/media.lawrence.com/static/"
STATIC_ROOT = '/path/to/static/root/directory'
# URL prefix for static files.
STATIC_URL = '/your_static_url_prefix/'
STATICFILES_DIRS = (
'/path/to/your/static/directory',
)
put your image somewhere under you STATICFILES directory, example at
'/path/to/your/static/directory/images/theimage.png'
Display the image from your home page template, example by
<img src="{{STATIC_URL}}images/theimage.png"/>
You can also read tutorials from the official django documentation to know the basics on how models,views,urls and templates work.
I think you should read something about it. There are some good tutorials in the net. First of all check django book, you can also watch this video tutorial

Python / Django - Organizing Stylesheets and Scripts

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.

Django Template Inheritance -- Missing Images?

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).

Categories

Resources