I'm trying to get a file that's in my media directory to appear on an HTML template. I'm using the "Tango with Django" book as a tutorial.
Here is my settings.py:
MEDIA_DIR = os.path.join(BASE_DIR, 'media')
MEDIA_ROOT = MEDIA_DIR
MEDIA_URL = '/media/'
Here is views.py:
def about(request):
return render(request, 'rango/about.html', )
And my about.html template:
<!DOCTYPE html>
{%load staticfiles%}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About</title>
</head>
<body>
<h1>This is the about page</h1>
<img src="{{MEDIA_URL}} {{cat.jpg}}"
alt="cats are funny"/>
<div>
Index
</div>
</body>
</html>
I know I must be missing something very obvious, but can't figure it out for the life of me!
The {{MEDIA_URL}} tag is deprecated. Use the {% get_media_prefix %} tag, instead.
<img src="{% get_media_prefix %}cat.jpg" alt="cats are funny"/>
From the documentation:
Similar to the get_static_prefix, get_media_prefix populates a template variable with the media prefix MEDIA_URL.
When rendered, that src attribute will be equivalent to /media/cat.jpg. You may want to consider using STATIC_ROOT in your settings.py, instead, along with the {% static %} tag:
<img src="{% static 'cat.jpg' %}" alt="cats are funny"/>
I think the problems should be errors in format.
Try the following two revisions:
1. in your render(), change "return render(request, 'rango/about.html', )" to "return render(request, 'rango/about.html') by deleting the last comma;
2. in your template file about.html, change .
Related
See Problem Here
I want to loop over a directory of static images in Django. The images are being looped over correctly, but something is wrong with my <img src /> syntax. I've tried many variations on {{ flag }} but can't get anything to work. Can anybody advise?
In settings.py I created the following STATIC_ROOT object:
STATIC_ROOT = '/Users/TheUnforecastedStorm/Desktop/Code_projects/Portfolio_Site/portfolio_site/entrance/static'
In views.py I joined this file path to my image directory and placed the list of images in the context dictionary. I then included this dictionary in my response:
import os
from django.conf import settings
from django.shortcuts import render
# Create your views here.
def index(request):
# Create a dictionary
context = {}
# Join images directory to index.html view
flags = os.listdir(os.path.join(settings.STATIC_ROOT, "entrance/images/"))
context['flags'] = flags
# Return response
return render(request, "entrance/index.html", context)
I then looped over these images in my template:
<!DOCTYPE html>
{% load static %}
<html>
<head>
<link rel="stylesheet" href="{% static 'entrance/entrance.css' %}">
<script src="{% static 'entrance/entrance.js' %}" type="text/javascript"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
{% for flag in flags %}
<img src="{{ flag }}" alt="problem" />
{% endfor %}
</body>
</html>
#Mark1 Working off my comments from above, I haven't been able to find anything to confirm it but it seems like the {% static %} template tag can only take one extra argument to make a path, so here is something you can try.
In your view:
def index(request):
# Create a dictionary
context = {}
# Join images directory to index.html view
flags = os.listdir(os.path.join(settings.STATIC_ROOT, "entrance/images/"))
# ADD IN THIS LINE HERE
flags = ['entrance/images/'+fl for fl in flags]
context['flags'] = flags
# Return response
return render(request, "entrance/index.html", context)
The line I added in will add "entrance/images/" to the start of all the file names in the directory you are searching.
Then in your template
{% for flag in flags %}
<img src="{% static flag %}" alt="problem" />
{% endfor %}
Let me know if this works.
I can't get django to use my css file. I've done a lot of sifting through various sites and tutorials but with no luck. Most of them say to change your STATICFILES_DIRS while some don't mention it at all. I've tried changing it to about every variant that could match my style.css location as well as copying and pasting the css file into a bunch of locations which might match '/static' but nothing works!
for STATICFILES_DIRS I have tried:
os.path.join(BASE_DIR, 'static'),
os.path.join(BASE_DIR, 'static/store'),
os.path.join(BASE_DIR, 'staticfiles'),
os.path.join(BASE_DIR, 'staticfiles/store'),
I also found the file manually and copied the location into a string like so:
'...Desktop/project/staticfiles/store',
I have also tried similarly playing around with the STATIC_URL and STATIC_ROOT to no avail.
My tree looks like this:
project
static
store
style.css
staticfiles
store
style.css
store
static
store
style.css
staticfiles
store
style.css
and my template:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<link rel='stylesheet' type='text/css' href='{% static "store/style.css" %}'>
{% endblock %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
I also tried changing static in the template to staticfiles
I already wasted hours on this problem and am tired and frustrated, please help!
You just need one folder called 'static' and in there you can create a folder 'store' and in there you paste your 'styles.css'.
in your settings.py
STATIC_URL = '/static/'
STATICFILES_URL = [
BASE_DIR / 'static',
]
and you reference it in your html as
{% load static %}
href="{% static 'store/styles.css' %} "
Thanks to Mcdonald Otoyo for posting the solution!
You just need one folder called 'static' and in there you can create a folder 'store' and in there you paste your 'styles.css'.
in your settings.py
STATIC_URL = '/static/' STATICFILES_URL = [
BASE_DIR / 'static', ]
and you reference it in your html as
{% load static %}
href="{% static 'store/styles.css' %} "
In my root directory I have a template and inside that template follow by a base.html that would be my main layout for my custom admin site.
In my templates/admin/base.html I have this code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layout Page</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
I want this base.html to be present in all my app templates.
I have an app users in my mysite project that its the index.html page.
inside my users/views.
from django.shortcuts import render
def index(request):
return render(request, 'users/index.html')
Inside my templates/users/index.html I have this.
{% extends "admin/layout.html" %}
{% block content %}
<h1>Hello World</h1>
{% endblock %}
I get an error:
TemplateDoesNotExist at /
I come from a node.js background so I have no idea if this is even a good practice. I have came across many tutorials explaining the use of templates inside an app but non explaining outside the app.
My understanding was that django bundles all templates into one.
Thanks in advance.
I figure it out. I need to add the global template my project settings.
'DIRS': [
os.path.join(BASE_DIR, 'templates')
],
I have static files placed in my_site/my_app/static/my_app/js and my_site/my_app/static/my_app/css. For some reason, the code below doesn't produce any output which means it can't find the static files:
#my_app/templates/my_app/base.html
{% load staticfiles %}
Here is setting.py
STATIC_URL = '/static/'
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'my_app', 'static', 'my_app',).replace('\\','/'),
)
STATIC_ROOT = ''
Why is that?
Add django.contrib.staticfiles to INSTALLED_APPS in your settings.py.
Remove STATICFILES_FINDERS, STATICFILES_DIRS, STATIC_ROOT from your settings.py.
change your base.html to something like this:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="fa">
<head>
<script type="text/javascript" src="{% static 'my_app/js/app.js' %}"></script>
<title>{{ title }}</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
I had faced the same issue which got solved after the following changes.
In HTML pages:
{% load static %} ## loads the static folder and images inside it.
<div id='button-holder'><img src="{% static "glass.png" %}" alt="Hi!" /></div> ## for images
src="{% static 'my_app/js/app.js' %} ## for scripts.
In urls.py
urlpatterns = patterns('',...
........
)+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
After this run command as #Daniel Roseman have mentioned python manage.py collectstatic. The findstatic command can help show you which files are found.
Example
python manage.py findstatic css/base.css admin/js/core.js
You can find help here regarding it.
You are supposed to run manage.py collectstatic to copy your app-level static files to the central static directory.
I'm writing a django website and I want to use 'Semantic UI' for its front end. but when I add a Semantic UI Button to my first page in django, it only shows plain text!
the file tree of my project is like this :
Matab->
----Matab->
--------Templates->
--------------base.html
--------------login.html
---------settings.py
-----media->
--------css->
------------semantic.css
settigs.py :
MEDIA_ROOT = os.path.join(os.path.dirname(__file__),'../media/').replace('\\','/')
MEDIA_URL = '/media/'
base.html :
<html>
<head>
<link rel="stylesheet" href="{{ MEDIA_URL }}css/semantic.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Navid" />
</head>
<body>
<div id="mainContent">
{% block content %}{% endblock %}
</div>
</body>
</html>
login.html:
{% extends 'base.html' %}
{% block content %}
<div class="ui button">hello</div>
{% endblock %}
Edit: Please use STATIC_ROOT and STATIC_URL instead of MEDIA_ROOT and MEDIA_URL. And follow the doc to setup the static file directories.
Your MEDIA_ROOT path is wrong. Update it to this -
MEDIA_ROOT = os.path.join(os.path.dirname(os.path.dirname(__file__)), 'media')
Here os.path.dirname(__file__) evaluates to second Matab directory. Using os.path.dirname() again, takes it to First Matab directory. Then you just join it with media. Python automatically adds the slashes.
The problem was in urls.py, I should insert this line :
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)