I am trying to load a CSS file located in my static files onto an extended django html file. The {% load static %} works in the base.html template but does not work anywhere else. I'm not sure how to proceed
Here is my code
base.html
{% load static %}
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://unpkg.com/boxicons#2.0.9/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="{% static 'styles/style.css' %}" />
<title>My Site</title>
{% block htmlhead %}
{% endblock htmlhead %}
</head>
<body>
{% include 'sidebar.html' %}
{% include 'navbar.html' %}
{% block content %}{% endblock %}
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="{% static 'js/script.js' %}"></script>
</body>
</html>
here is an extended django html template
{% extends 'base.html' %}
{% load static %}
{% block content %}
<main id="content">
<h1 class="title">Dashboard</h1>
<ul class="breadcrumbs">
<li>Home</li>
<li class="divider">/</li>
<li>Dashboard</li>
</ul>
<div class="info-data">
</div>
<div class="project-home-data">
<div class="project-content-data">
<div class="project-head">
<h3>Your Tickets</h3>
</div>
<div class="project-body">
<table>
<thead>
<tr>
<th>Project Name</th>
<th>Description</th>
<th></th>
<th>Created</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hello</td>
<td>Hello</td>
<td></td>
<td>Hello</td>
</tr>
</tbody>
</table>
<p>Showing 1 to 5 of 5 entries </p>
<div class="pagination">
«
1
2
3
4
5
6
»
</div>
</div>
</div>
</div>
</main>
{% endblock %}
What it currently looks like
What it should look like
Related
So I'm trying to develop an app in Django. At the moment I'm trying to do a simple search bar that when you type the title of a fil it show several data of that film. I have successfully developed the search bar and it works. The problem is that when doing the html template and extending it from base.html the data shown dissapears.
base.html
<!DOCTYPE html>
<html lang="es">
<head>
{% load staticfiles %}
<title>Peliculas</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?
family=Tangerine&v1" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?
family=Yanone+Kaffeesatz" />
<link rel="stylesheet" type="text/css" href="{% static 'myapp/style.css' %}"/>
</head>
<body>
<div id="content">
<div id="main">
<div id="header">
<div id="logo">
<h1>SERIAL KILLER</h1>
<div class="slogan">SLOGAN</div>
</div>
<div id="menubar">
<ul id="menu">
<!-- put class="current" in the li tag for the selected page - to highlight which page you're
on -->
{%block menu%}
{% endblock %}
</ul>
</div>
</div>
</div>
<div id="site_content">
{%block lado%}
{% endblock %}
<div id="content">
{% block contenido %}
{% endblock %}
</div>
</body>
</html>
the template where I show the data from the query: buscarResultados.html
{% extends "base.html" %}
{% load staticfiles %}
{% block titulo %} RESULTADOS {% endblock %}
{%block content %}
<ul>
{% for peli in object_list %}
<li>
{{peli.titulo}}, {{peli.descripcion}}
</li>
{% endfor %}
</ul>
{% endblock %}
my form in index.html
<div id="search">
<form action="{% url 'busqueda_resultados' %}" method= 'get'>
<input type="text" name="q" placeholder="Buscar...">
<input type="submit" value="Buscar">
</form>
</div>
my views.py
class BuscarPeliculas(ListView):
model = Pelicula
template_name = 'buscarResultados.html'
def get_queryset(self):
query = self.request.GET.get('q')
object_list = Pelicula.objects.filter(
Q(titulo__icontains=query) | Q(descripcion__icontains=query)
)
return object_list
my urls.py
path('busqueda/', views.BuscarPeliculas.as_view(), name='busqueda_resultados'),
what appears if I extend from base.html
What appears if I don't extend from base.html
as you can see, The data dissapears if I extend from base.html, I tried to do my question as complete as possible, help is much appreciated.
Its because you are addintg it to a block content, but the base.html expects block contenido
fix your block names
Okay, so I have this first HTML file (header.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>M4A</title>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'css/header.css' %}" />
<link rel="icon" href="../../static/image/logo.png">
</head>
<body class="body" style="background-color:#f9f9f9">
{% block content %}
<ul>
<li><img src="../../static/image/logoRect.png" width="25"> </li>
<li>Movies</li>
<li><a class="left" href="">Search</a></li>
<li><a class="left" href="/profile/">Profile</a></li>
<li><a class="left" href="#about">Explore</a></li>
</ul>
{% endblock %}
</body>
</html>
And then I have this other one (home.html):
{% extends "START/header.html" %}
{% block content %}
<p> TEST</p> <!-- for example -->
{% endblock %}
but when running the second one it doesn't extend really, it looks like its replacing the content of the other HTML file's body. the background color is still the one in my css file though so I'm sure it's reading it. What am I missing?
You are replacing the body when you use the same block tag in your home.html that in your header.html
{% block content %}
You should use a different name if you dont want to replace it.
In addition you can use:
{{ block.super() }}
If you want to extend the block content data, notice it's a different issue from extending a template.
It is not clear to me what you are expecting.
The Jinja documentation about templates is pretty clear about what a block does:
All the block tag does is tell the template engine that a child template may override those placeholders in the template.
In your example, the base template (header.html) has a default value for the content block, which is everything inside that block. By setting a value in home.html, you are overriding that default value with another block.
If you want to add content below your navigation menu, simply rework your template to the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>M4A</title>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'css/header.css' %}" />
<link rel="icon" href="../../static/image/logo.png">
</head>
<body class="body" style="background-color:#f9f9f9">
<ul>
<li><img src="../../static/image/logoRect.png" width="25"> </li>
<li>Movies</li>
<li><a class="left" href="">Search</a></li>
<li><a class="left" href="/profile/">Profile</a></li>
<li><a class="left" href="#about">Explore</a></li>
</ul>
{% block content %}<p>This will appear if you don't set a block in the inheriting template.</p>{% endblock %}
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>M4A</title>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'css/header.css' %}" />
<link rel="icon" href="../../static/image/logo.png">
</head>
{% block content %}
<body class="body" style="background-color:#f9f9f9">
<ul>
<li><img src="../../static/image/logoRect.png" width="25"> </li>
<li>Movies</li>
<li><a class="left" href="">Search</a></li>
<li><a class="left" href="/profile/">Profile</a></li>
<li><a class="left" href="#about">Explore</a></li>
</ul>
</body>
{% endblock %}
</html>
make body inside in block and change body backgound
{% extends "START/header.html" %}
{% block content %}
<body class="body" style="background-color:#f23d49">
<p> TEST</p> <!-- for example -->
</body>
{% endblock %}
I am using sorl-thumbnail in my template and everything was working fine until I decided to break my templates into pieces to enable me reuse some part of it elsewhere.
My base.html looks this:
<!DOCTYPE html>
<html lang="en">
<head>
{% load staticfiles %}
{% load thumbnail %}
<link href="{% static 'mysite/css/style.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'mysite/js/index.js' %}" rel="stylesheet" type="text/javascript" />
</head>
<body>
<div id = 'profile-photo'>
{% thumbnail user.thumbnail.thumbnail "40x40" crop="center" as im %}
<img class='pp' src=".{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% empty %}
<img class='in-use-pi' src='{{STATIC_URL}}images/ddd.jpg' width='40' height='40'/>
{% endthumbnail %}
</div>
<div id = "position">
<div class = "container">
<div class ="row">
<div class="col-md-4 hidden-xs hidden-sm">
{% block user_profile %}
Default text 1
{% endblock %}
</div>
<div class = "col-md-5">
{% block mainBody %}
Default text 2
{% endblock %}
</div>
</div>
</div><!-- end of container div -->
</div><!-- end of position div -->
</body>
</html>
If I extend this in my index.html, the thumbnail tag works fine but if I put the tag in index.html this way:
index.html:
{% extends "mysite/base.html" %}
{% block mainBody %}
{% thumbnail user.thumbnail.thumbnail "50x50" crop="center" as im %}
<img src=".{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% empty %}
<img src='{{STATIC_URL}}images/ddd.jpg' class='ppix follow_thumbnail' width='50' height='50'/>
{% endthumbnail %}
{% endblock %}
Exception Value:
Invalid block tag: 'thumbnail', expected 'elif', 'else' or 'endif'
What am I doing wrong?
You need to load the templatetag library in every template.
{% extends "mysite/base.html" %}
{% load thumbnail %}
I have a base.html file that have blovk content and extended by manage.html. and that manage.html has a block sub_manage which is extended by internet_market.html, so visually it looks like:
|- base.html (block content)
|--manage.html (extends base.html)
|---sub_manage.html (extends manage.html)
when I render_template mange.html everything works fine, but when I try to render_template sub_manage.html the css/javascript does not work. What can I do to overcome this issue?
here is my base.html
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
<script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
<style type="text/css">
</head>
<body>
<div id="left_sidebar">
<ul>
<li class="main"> + Главная</li>
<li class="main">Заказы</li>
<li class="main"> - Управление сайтом</li>
</ul>
</div>
<div id="content">
{% block content %}{% endblock %}
</div>
</body>
here is my manage.html file:
{% extends "admin/base.html" %}
{% block content %}
<!-- Nav tabs -->
<div>
<ul class="nav nav-tabs" role="tablist">
<li class="dropdown active"></li>
</ul>
</div>
<!-- Tab panes -->
<div class="manage_menu_settings">
{% include 'admin/manage/site_figuraiton.html' %}
</div>
{% block sub_manage%}
{% endblock %}
{% endblock %}
and here is internet_market.html
{% extends "admin/manage.html" %}
{% block sub_manage %}
<div class="tab-content">
<div class="tab-pane {% if current == 'delivery_settings' %} active{% endif %}" id="delivery_settings">
Настройки доставки, корзины и оплаты
</div>
<div class="tab-pane {% if current == 'delivery_type' %} active{% endif %}" id="delivery_type">
Добавить способы доставки
</div>
{% endblock%}
Solved the issue.
the problem was that I links that I used for css and js file where relative links, thus when trying to render the 2 level extend it did not find css/js. so it was like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
<script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
<style type="text/css">
but then I changed these links to dynamic links with url_for and it worked like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="{{url_for("static", filename = "css/bootstrap.min.css")}}">
<script type="text/javascript" src="{{url_for("static", filename = "js/bootstrap.min.js")}}"></script>
<style type="text/css">
I couldn't get my image reflected using StaticFile process. Here are my global settings:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
('assets', 'C:/Users/dhopkins/PycharmProjects/django_test/static'),
My base.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}My base template.{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% static "assets/css/default.css" %}">
</head>
<body>
<div id="page">
</div>
<div id="sidebar">
{% block sidebar %}
<ul>
<li>Articles</li>
<li>Admin</li>
</ul>
{% endblock %}
</div>
<div id="content">
{% block content %}Content goes here!{% endblock %}
<img scr="{% static "images/python-logo.jpg" %}" width="200"/>
</div>
</body>
</html>
My image folder is located in C:\Users\dhopkins\PycharmProjects\django_test\static\images.
Please help.
Your problem lies in this line
<img scr="{% static "images/python-logo.jpg" %}" width="200"/>
it should be
<img src="{% static "images/python-logo.jpg" %}" width="200"/>
This is not a problem with your static files. You've simply misspelled the <img src> attribute :-)