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 :-)
Related
Here is my HTML file:
{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
<!-- Link to Bookstrap and stylesheet -->
<link rel='stylesheet' href="{% static 'css/bootstrap.min.css' %}">
<link rel='stylesheet' href="{% static 'css/style.css' %}">
<script src="{% static 'js/bootstrap.min.js' %'}"></script>
</head>
<body class="bg-blue">
<div class="container">
<div class ="row">
<div class ="col-lg-4 col-lg-offset-4">
<br/>
<br/>
<br/>
<div class="panel panel-body">
<div class="panel-body">
<h3 class="text-center text-uppercase"><b> {% block heading %}{% endblock %}</b></h3>
<br/>
{% block content %}{% endblock %}
</div>
</div>
</div>
</body>
</html>
I want to use the "bg-blue" class defined in my style.css.
.bg-blue{
background-color: #3F3F63;
}
However it doesn't work. My boostrap and style.css are in the same folder. The Bootstrap loads, for example my text in centered and uppercase and the font is different.
I've also tried putting the class directly in the html file, and that works, but I want to be able to use style.css.
Edit: it works in Firefox but not Chrome, so it's not the code, any explain to this?
that is because you forgot to clear cache in chrome.press control + F5 to clear cache and load again.
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
Need some help with django. Seems that somehow i can't change the css of my home page.
These are my static settings:
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
#'/var/www/static/',
]
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn")
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "media_cdn")
In my index_home.html page i want to put a background image e.g. marea.jpg which is in static/img/marea.jpg.
<!--DOCTYPE html -->
<html>
<head>
{% load static %}
<title>Romanii din Italia</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel='stylesheet' href="static/css/custom.css" />
<link href="{% static 'css/custom.css' %}" rel="stylesheet">
<link rel='stylesheet' href="/static/css/custom.css" />
</head>
<body>
<div class='container'>
<ol class='breadcrumb'>
<li><a href='{% url "posts:home" %}'>Acasa</a></li>
<li><a href='{% url "posts:list" %}'>Stiri</a></li>
{% if not request.user.is_authenticated %}
<li class='pull-right'><a href='{% url "register" %}'>Register</a></li>
<li class='pull-right'><a href='{% url "login" %}'>Login</a></li>
{% else %}
<li class='pull-right'><a href='{% url "logout" %}'>Logout</a></li>
{% endif %}
</ol>
</div>
<div class="container" >
<h2>Bine ati venit pe site-ul romanilor din Italia!</h2>
<div class="row" id="primapoza" style="background-image: url('/static/img/roma.jpg');background-repeat: no-repeat;background-size: cover;height: calc(100vh - 71px);">
<div class="col-xs-12 offset-xs-0 col-sm-4 offset-sm-4 section-title" >
<br><br>
<p id="banner-text"> Romani in Italia! </p>
<!-- <p id="banner-text" style="text-align: center;font-size:40px;!important;font-color:white;!important;margin-left: 100px;"> Romani in Italia! </p> -->
</div>
</div>
</div>
</body>
</html>
And this is my custom.css which doesn't change my css code. Can someone pls advise? Thank you in advance!
h1 {
color: #777777;
}
.wmd-panel{
margin-right: 0px !important;
margin-left: 0px !important;
}
.comment-reply{
display:none;
}
#banner-text{
font-color:white;!important;
font-size:40px;
}
I can customize the CSS only with inline code e.g <p id="banner-text" style="margin-left: 400;font-color: black;font-size:30">Romani in Italia!</p
Use {% load static %} and {% load staticfiles %} under head tag in html
Based on my understand of how {% load static %} is used and what the Django documentation is saying, I don't think you're using {% load static %} correctly. I've always used it right above whatever my static link were to be.
For example, in your html doc head, it should be
{% load static %}
<link rel='stylesheet' href='{% static "css/base.css" %}'>
Otherwise, I don't think your stylesheet is linked to your html doc. Try that and also correct that mistake anywhere else you may have it, and it should be working.
You can't have {% load static %} at the top of your file and expect it to apply for the whole page. It needs to be right above whatever your static file is, as many times as you use it.
I'm learning django. I have a site with a data table that has the following html template:
{% load static %}
{% load table_tags %}
<link href="{% static 'table/css/bootstrap.min.css' %}" rel="stylesheet">
<script src="{% static 'table/js/jquery.min.js' %}"></script>
<script src="{% static 'table/js/bootstrap.min.js' %}"></script>
<link href="{% static 'table/css/datatable.bootstrap.css' %}" rel="stylesheet">
<script src="{% static 'table/js/jquery.browser.min.js' %}"></script>
<script src="{% static 'table/js/jquery.dataTables.min.js' %}"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Impala query metrics</title>
</head>
<body>
<div class="container" style="margin: 10px 10px 10px">
<h1>Impala Query metrics</h1>
<br />
{% render_table people %}
</div>
logout
{% block content %} {% endblock %}
</body>
When i try to inherit with another template by adding
{% extends "base.html" %}
to the first line, it inherits with base.html but my original data table disappears.
Any help on how to keep my original data table or pointing me to the right documentation would be appreciated.
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 %}