I'm trying to add the dropzone form to a django template and it won't show up. I've imported using django's static and downloaded the dist folder from http://www.dropzonejs.com/ and used
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
as instructed by the website.
<html>
{% extends 'base.html' %}
{% block head %}
<head>
{% load staticfiles %}
<script src="{% static '/dropzone/dropzone.js' %}"></script>
<link href="{% static '/dropzone/dropzone.css' %}" rel="stylesheet">
<link href="{% static '/dropzone/basic.css' %}" rel="stylesheet">
</head>
{% endblock %}
{% block body %}
<body>
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone">
</form>
</body>
{% endblock %}
</html>
I know it's not an issue with static in django because I have bootstrap working using static within this project. Any idea as to why dropzone won't display?
try initialize the dropzone using jquery
<script>
$(".dropzone").dropzone();
</script>
Related
I am still very new to Django and I want to add the HTML for a navigation bar and its respective CSS into my base HTML file. Here is what I did up till now:
in app/base.html:
{% extends "BritIntlSchl/navbar.html" %}
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>page title</title>
<link href="{% static 'appname\stylebase.css' %}" rel="stylesheet">
<link href="{% static 'appname\navbarstyles.css'}" rel="stylesheet" %}">
{% block head-content %}{% endblock head-content %}
</head>
{% block nav%}{% endblock nav %}
{% block content1 %}{% endblock content1 %}
</body>
</html>
and in app/navbar.html:
{% block nav%}
<div class="wrap">...</div>
{% endblock nav%}
I am pretty much lost here. I am sure that putting{% block nav%} around the nav bar does nothing.
How do you suggest I go about this?
I'm using Django 2.1.
When one uses the extend template tag one cannot have any HTML outside any block as then there would be the confusion of where to put this HTML (In fact the template engine would completely ignore that HTML). So when you extend /navbar.html at most you can fill the block named nav which you are overriding and filling with nothing. What you want to do is to use the include template tag to include the navbar into base.html:
base.html:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>page title</title>
<link href="{% static 'appname\stylebase.css' %}" rel="stylesheet">
<link href="{% static 'appname\navbarstyles.css'}" rel="stylesheet" %}">
{% block head-content %}{% endblock head-content %}
</head>
{% block nav %}{% include 'app/navbar.html' %}{% endblock nav %}
{% block content1 %}{% endblock content1 %}
</body>
</html>
Note: We put the {% block nav %} there not because navbar.html would fill it but because some page extending base.html might want a
custom navbar.
navbar.html:
<div class="wrap">...</div>
My project has two apps (for now),table and menu. Each app has a template and both templates extends a base.html template at the project root.
table_view.html
{% extends "base.html" %}
{% load static %}
{% block title %}Table Mgt{% endblock %}
{% block content %}
<link href="{% static "css/table.css" %}" rel="stylesheet" />
...some elements here...
{% endblock %}
{% block sidebar %}
<a href="#">
<button class="sidebar_button check_in">Check In</button>
</a>
<a href="#">
<button class="sidebar_button check_out">Check Out</button>
</a>
{% endblock %}
menu_view.html
{% extends "base.html" %}
{% load static %}
{% block title %}Menu{% endblock %}
{% block content %}
<link href="{% static "css/menu.css" %}" rel="stylesheet"/>
{% block sidebar %}
{% include 'table/table_view.html' %}
{% endblock %}
base.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{% static "css/base.css" %}" rel="stylesheet" />
</head>
<body>
<div id="header">
...some elements here...
</div>
<div id="sidebar">
{% block sidebar %}
{% endblock %}
</div>
<div id="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>
In menu_view.html, I am trying to include the block sidebar only. However, the entire table_view.html is actually embedded.
How do I include only a specific block from specific template?
Template extension works by defining slots you can put stuff into. These slots can be filled with defaults. The slots will be rendered as is if you don't override them in the extending (child) templates.
For example with this base:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Hello World!{% endblock %}</title>
<link href="{% static "css/base.css" %}" rel="stylesheet" />
{% block extra_css %}{% endblock %}
</head>
</html>
And this child:
{% extends "base.html" %}
The result will be:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="/static/css/base.css" rel="stylesheet" />
</head>
</html>
With this child template:
{% extends "base.html" %}
{% block extra_css %}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">{% endblock %}
The result is:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="/static/css/base.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
</html>
Now specific to your problem:
if you have different sidebars, try to make the sidebar.html template smarter so it can render all variations -or- create different sidebar templates
if you have the same sidebar everywhere, but some pages don't have a sidebar, create different base templates: one with a sidebar slot and one without.
if each sidebar is different for each page, don't bother with include and just override the slot
Django 3.0.6
base.html
{% load static %}
{% include 'general/header.html' %}
<body>
<div class="content">
{% block content %}
{% add_to_script jquery %}
{% endblock content %}
</div>
{% include 'general/footer.html' %}
footer.html
{% block scripts %}
{% endblock %}
</body>
</html>
Problem
Could you tell me whether it is possible to write {% add_to_script jquery %} that adds
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> to scripts block?
There is a library that allow you to do that:
https://github.com/divio/django-sekizai
Example Template:
{% load sekizai_tags %}
<html>
<head>
{% render_block "css" %}
</head>
<body>
... Your content comes here.
... Maybe you want to throw in some css:
{% addtoblock "css" %}
<link href="/media/css/stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
{% endaddtoblock %}
... Some more content here.
{% addtoblock "js" %}
<script type="text/javascript">
alert("Hello django-sekizai");
</script>
{% endaddtoblock %}
... content of js will be rendered here
{% render_block "js" %}
</body>
</html>
1) try doing something like this inside base.html create file scripts.html which contains all the scripts file
{% include "scripts.html" %}
{% block extra_scripts %}
{% endblock extra_scripts %}
2) Whenever in other html templates you need to write scripts just write inside
{% block extra_scripts %}
3) Inside scripts.html put all your scripts value
{% load static %}
<script type="text/javascript" src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="{% static 'js/popper.min.js' %}"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="{% static 'js/mdb.min.js' %}"></script>
<!-- Initializations -->
<script type="text/javascript">
// Animations initialization
new WOW().init();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Following is my homepage.html is home app
{% extends "base.html" %}
{% load static %}
<link rel = "stylesheet" href = "{% static 'css/home.css' %}" > #reference to stylesheet in the home app static directory
{% block body %}
<h1>I am homepage</h1>
{% endblock %}
My base.html in the project root folder is the following
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "{% static 'base.css' %}" > #stylesheet in root folder
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
But here, the home.css in the homepage.html is not functional as the base.html on extend closes the head before the home.css can come in the head section.
Is there any way I can add the CSS into the header
Thanks
You just need another block.
In base.html:
<head>
<link rel="stylesheet" href="{% static 'base.css' %}">
{% block extrahead %}{% endblock %}
</head>
...
and in homepage.html:
{% extends "base.html" %}
{% load static %}
{% block extrahead %}<link rel="stylesheet" href="{% static 'css/home.css' %}">
{% endblock %}
...
For example:
{% compress css %}
<link rel="stylesheet" href="{% static 'css/foo.css' %}">
{% if foobar %}
<link rel="stylesheet" href="{% static 'css/bar.css' %}">
{% endif %}
{% endcompress %}
As above, can I have an if tag inside the compress tag? Does this work with the OFFLINE_COMPRESSION mode?
django-compressor docs says nothing about it. But you can use few {% compress %} tags like this:
{% compress css %}
<link rel="stylesheet" href="{% static 'css/foo.css' %}">
{% endcompress %}
{% if foobar %}
{% compress css %}
<link rel="stylesheet" href="{% static 'css/bar.css' %}">
{% endcompress %}
{% endif %}
I tested it myself. The answer is no, as of Aug. 2018.
A workaround maybe using multiple compress tags as mentioned by in the other answer.