I am using Django, I am trying to display the image but I am getting the error.
Invalid block tag on line 35: 'static', expected 'endblock'. Did you
forget to register or load this tag?
If I added my image directly on index.html page then the image is displaying but when I am using extends and block to display then I am getting the error.
setting.py
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR,'static'),
)
home.html
{% extends 'demo1/index.html' %}
{% block content %}
<img src="{% static 'images/web/landing-page.png' %}" alt="Landing Page">
{% endblock %}
index.html
{% load static from staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title%}Home{% endblock %}</title>
<link rel="stylesheet" href="{% static 'css/style.css'%}" type="text/css">
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
You missed the open { in your home-page
{% extends 'demo1/index.html' %}
{% load static %}
{% block content %}
<img src="{% static 'images/web/landing-page.png' %}" alt="Landing Page">
{% endblock %}
NOTE
Django documentation prefers now {% load static %}.
{% load staticfiles %} works but I think it is deprecated.
https://docs.djangoproject.com/en/dev/ref/templates/builtins/#static
Update:
From the Django docs:
The include tag should be considered as an implementation of "render
this subtemplate and include the HTML", not as "parse this subtemplate
and include its contents as if it were part of the parent". This means
that there is no shared state between included templates -- each
include is a completely independent rendering process.
Therefore please also load the static file in your home-page too
Do just {% load static %} on top of your home.html template.
You are missing a brace in your home.html
{% extends 'demo1/index.html' %}
{% block content %}
<img src="{% static 'images/web/landing-page.png' %}" alt="Landing Page">
% endblock %}
should be
{% extends 'demo1/index.html' %}
{% block content %}
<img src="{% static 'images/web/landing-page.png' %}" alt="Landing Page">
{% endblock %}
Related
In the static folder of my DjangoServer is located a template of the default webpage. It's decorated with some template blocks.
If I load this template file, the path to the template is shown in the browser, it looks like, that the code is not loaded.
If I store the template in an app/template folder and I extend this file. It works very well. I use the tutorial of Django but it still not working.
Settings.py
django.contrib.staticfiles is added to INSTALLED_APPS
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
projectRootFolder/static/html/basePage.html
{% load static from staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<title>{% block title %}My amazing site{% endblock %}</title>
{% endblock %}
</head>
<body>
{% block body %}
<header>
{% block header %}
<header> -- HEADER BANNER --</header>
{% block menu %}<nav></nav>{% endblock %}
{% endblock %}
</header>
<section>
{% block section %} SECTION {% endblock %}
</section>
{% block footer %}
<footer> -- FOOTER --</footer>
{% endblock %}
{% endblock %}
</body>
<script type="text/javascript" src="{% static 'angularjs/SOME_ANGULAR_FILES_LOADED.js' %}"></script>
</html>
app/template/app/index.html from an app
{% load static from staticfiles %}
{% static "html/basePage.html" %}
{% block menu %}<nav>App A</nav>{% endblock %}
{% block section %} Lorem Ipsum{% endblock %}
app/views.py
from django.template import loader
from django.shortcuts import render
from django.http import HttpResponse
# PAGE CALLS
def index(request):
template = loader.get_template('mainControll/index.html')
context = {}
return HttpResponse(template.render(context, request))
Output
What is the mistake i've made? How can I load this template correctly?
Warning, this answer assumes your goal for asking the question is to get things to work, instead of helping you troubleshoot a probable permission problem just so that you can run into another problem. That is, I'm assuming your end goal is not a html document inside a non-html document.
What can you do to get your output to work:
It looks like you want to include a template into another template, you can do that with {% extends "basePage.html" %}. Your template does then need to be at a location where templates are found, not where static pages are found.
E.g. If your app is called 'myapp' then under myapp/templates/ is a one possible place, assuming the TEMPLATES setting has APPDIRS = True
This would mean changing index.html to be
{% extends "basePage.html" %}
{% block menu %}<nav>App A</nav>{% endblock %}
{% block section %} Lorem Ipsum{% endblock %}
See https://tutorial.djangogirls.org/en/template_extending/ for example of this and https://docs.djangoproject.com/en/1.11/topics/templates/#configuration for configuring things to that your basePage.html can be found
I intend to create a main page in a modular way. The main page might have a header, a footer, and a main section, I'd like to keep the markup and the css that is specific to each of those sections separate. So that if I need those sections on other pages, I can just include the files.
So I need to be able to include a css file into a template in a similar way I can include an html one. I could just keep all the styling on the same css file, but if I later remove some html file, I want the styling for that file to be removed as well.
So I came up with this minimal example, and it works on my setup, but I'm not sure it will work everywhere, or if it's idiomatic in django.
As you can see bellow I define one head section on the base html file, and another on the included html file. I need both these sections to define a link to the corresponding css files. I read the documentation on the head html tag though, and I'm not so sure I can just define multiple head sections, and I'm not sure where the head section from the included file will even end up, it seems like it will end up inside the body section of the base file, which I don't know if all browsers will render correctly.
So my questions are: Can I do this on all platforms? Should I do this? Is there another, better way, of doing this?
I received some suggestions to use inheritance, I'm not sure that will work, I don't have a base file that I can make a few changes to on a child, and then render the child. I have several files, that define several different sections of a main page, that I need to bring together.
base.html:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="{% static "appfolder/css/base.css" %}" />
</head>
<body>
{% include "header.html" %}
{% include "main.html" %}
{% include "footer.html" %}
</body>
</html>
base.css:
.header {
background-color: red;
}
.footer {
background-color: blue;
}
main.html:
{% load static %}
<head>
<link rel="stylesheet" type="text/css"
href="{% static "appfolder/css/main.css" %}" />
</head>
<main>
main
</main>
main.css:
.main {
background-color: green;
}
You shouldn't define multiple head sections in HTML. But there's no need to; you should use template inheritance and blocks just like you do with any other element. You shouldn't really be using include here at all; inheritance is much more powerful.
So, base.html looks like this:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="{% static "appfolder/css/base.css" %}" />
{% block extrastyles %}{% endblock %}
</head>
<body>
<header>header</header>
{% block main %}{% endblock %}
<footer>footer</footer>
</body>
</html>
and main.html is:
{% extends "base.html" %}
{% load static %}
{% block extrastyles %}
<link rel="stylesheet" type="text/css"
href="{% static "appfolder/css/main.css" %}" />
{% endblock %}
{% block main %}
main
{% endblock %}
and in your view you render main.html, not base.html.
The first problem, it not correct to put head into body. It makes so as your main.html is not a separate HTML file but the part of base.html. The second is it is not such easy to include another file if you need to once in the future.
I make such a thing in slightly another way. When using base file it looks more useful to extend the base template instead of including files. So, in the base template, we can make some placeholder blocks.
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="{% static "appfolder/css/base.css" %}" />
{% block 'additional_includes' %}{% endblock %}
</head>
<body>
<header>header</header>
{% block 'content' %}{% endblock %}
<footer>footer</footer>
</body>
</html>
Then we are going to use it. So create child template and redefine needed blocks (if you don't redefine them, they will just stay empty):
{% extends '/path_to_base/base.html' %}
{% load static %}
{% block 'additional_includes' %}
<link rel="stylesheet" type="text/css" href="{% static "appfolder/css/main.css" %}" />
{% endblock %}
{% block 'content' %}
your content
{% endblock %}
That's all. You need to refer to main.html in your views instead of base.html. And, of course, you can a lot of other child templates.
Update.
Decided to edit my reply. The common structure of html file is:
<!DOCTYPE ...>
<html>
<head>
<!-- all your meta tags -->
<!-- title -->
<!-- css and other includes, you can include so many files as you need, but it is better to use as little as possible as it can reduce server performance -->
<!-- scripts definitions (not necessary to put there, often they are paced in the end of file) -->
</head>
<body>
<!-- content of file
you can divide this part in several parts and include them
but you can't use head here, because it is body -->
</body>
</html>
This structure must be used in any framework in different languages because it is just an HTML used by the browser. Any framework must have instruments to render simple HTML pages with its template engine. And Django has its own engine, that provides to create lots of big files from small parts using extending and including. You can include some parts that are common for all of your pages. You can redefine this includes wrapping this includes in block tags. And you can create different pages with the same layout using extend, so you don't have to copy your code (for header or footer) many times.
So, in Django, you can create the following structure. I use some sort of it and it seems comfortable enough:
base.html
<!DOCTYPE ...>
<html>
<head>
{% load static %}
{% include 'meta.html' %}
<title>{% block 'title' %}Main page{% endblock %} - my site</title>
<link href='{% static "appfolder/css/base.css" %}' ... />
{% block 'additional_includes' %}{% endblock %}
</head>
<body>
{% block 'header' %}{% include 'header.html' %}{% endblock %}
<!-- header is just visible site header, not including files -->
{% block 'content' %}{% endblock %}
{% block 'footer' %}{% include 'footer.html' %}{% endblock %}
</body>
</html>
first-page.html
{% extends 'base.html' %}
{% load static %}
{% block 'title' %}First-page{% endblock %}
{% block 'additional_includes' %}
<link href='{% static "appfolder/css/first-page.css" %}' ... />
{% endblock %}
<!-- if you DON'T use block, then the content defined in base template file will remain -->
{% block 'content' %}
Some page content
{% endblock %}
second-page.html
{% extends 'base.html' %}
{% load static %}
{% block 'title' %}Second-page{% endblock %}
{% block 'additional_includes' %}
<link href='{% static "appfolder/css/second-page.css" %}' ... />
{% endblock %}
<!-- if you USE block, then its content will be rewritten with new data. you can use {{ block.super }} to add the content of block from base template -->
{% block 'header' %}{% include 'header_for_second_page.html' %}{% endblock %}
{% block 'content' %}
Another page content
{% endblock %}
I'm trying to create a custom widget(named Status) with django-dashing.
This custom widget is 99% copy-paste from libs own NumberWidget.
I have js, html and css files in status/widgets/status and initiated in dashing-config.js
in the browser console(Chrome) i get following message: "widget Status does not exist". So i have created my own {templates}dashing/dashing.html and loaded css/js files manually. Now i have placeholder for the widget, no error messages in console and i see successfull ajax requests, but the widget body is empty.
So widgets html file is not loaded, but why?
After reverse engineering of Dashing.utils.js i found out that example dashboard.html from the docs is incomplete and templates block is missing. So full dashboard.html should be like:
{% extends 'dashing/base.html' %}
{% load staticfiles %}
{% block stylesheets %}
<link rel="stylesheet" href="{% static 'widgets/status/status.css' %}">
{% endblock %}
{% block templates %}
<link rel="resource" type="text/html" href="{% static 'widgets/status/status.html' %}" data-widget="status">
{% endblock %}
{% block scripts %}
<script type="text/javascript" src="{% static 'widgets/status/status.js' %}"></script>
{% endblock %}
{% block config_file %}
<script type="text/javascript" src="{% static 'dashing-config.js' %}"></script>
{% endblock %}
I am new to Django and I am practicing template inheritance. I am currently having trouble inheriting templates on the 3rd level. The base level is a template that my whole site uses (ex: navbars). The second level is the content of my site. However this content is a bit lengthy so I took a portion(contactform.html) of it and created its own HTML file for that portion.
I am able to get my home.html into my index.html like so
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head lang="en">
<link href="{% static "css/boothie.css" %}" rel="stylesheet" type="text/css">
<script src="{% static "js/boothie.js" %}"></script>
<script src="{% static "js/jquery.easing.1.3.js" %}"></script>
<title>Boothie</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
Within my home.html I want to include my contactform.html. This is what I have so far.
{% extends "index/index.html" %}
{% load staticfiles %}
{% block content %}
...
...
...stuff...
<!-- contact -->
{% block contactform %}{% endblock %}
{% endblock %}
My contactform.html:
{% extends "home/home.html" %}
{% load staticfiles %}
{% block contactform %}
<section id="contact">
<!-- HTML! -->
</section>
{% endblock %}
This is what is currently in my home/views.py:
from django.shortcuts import render
from django.views import generic
class HomeView(generic.TemplateView):
template_name = "home/home.html"
my home/urls.py:
from django.conf.urls import patterns, url
from home.views import HomeView
urlpatterns = patterns('',
url(r'^$', HomeView.as_view(), name="home"),
)
TEMPLATE_DIRS:
TEMPLATE_DIRS = (
os.path.join(BASE_DIR, 'templates'),
os.path.join(BASE_DIR, 'home'),
)
here is a picture of my project structure:
Instead of inheriting, just include the contactform template in the home template. In home/home.html put:
<section id="contact">
{% include 'home/contactform.html' %}
</section>
You dont need to extend, instead include
Example, keep the contents of the contact_form.html with just the required html content (without the extends, and the block tag, etc..), and then include the html snippet. Now, django would do the magic for you - The included snippet would have all the context variables too.
{% extends ".." %}
{% load staticfiles %}
{% block content %}
...
...
...stuff...
{% include /path/to/contactform.html %}
{% endblock %}
I am getting started with Django, and I'm trying to make a modular template, but I don't know how. Now, I have the following files:
1- base.html (which provides basic layout for all the website):
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/bootsrap.min.css' %}" />
</head>
<body>
<h1>Test title</h1>
{% block content %}
{% endblock %}
</body>
</html>
2- index.html (main db read)
{% extends 'base.html' %}
{% block content %}
{% if latest_smartphones_list %}
<ul>
{% for s in latest_smartphones_list %}
<li>{{ s.brand }} {{ s.name }}</li>
{% endfor %}
</ul>
{% else %}
<p>No smarphones available.</p>
{% endif %}
{% endblock %}
Finally, i wanted to add a third file, called menu.html which would contain the site menu. I wanted to add it in the base.html file. I've been thinking about doing it in the following way, but i doesn't work:
{% load 'menu.html' %}
Thanks so much for your help!
Instead of using {% load 'menu.html' %} you have to use {% include 'menu.html' %}
Docs:
include
load
The correct way is using the include templatetag
{% include 'menu.html' %}
which includes a template and renders it with the current context.
NB: whenever you are in trouble, django docs is the best place to go to! Always keep this in mind