I'm trying to learn Django using the online version of the "Test-Driven Development with Python" book. I have a base.html file and home.html and list.html file. Now, CSS works fine for home.html, but not at all for list.html! They both extend their CSS from the base.html file, so why is there a problem? Here are the files:
base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>To-Do lists</title>
<link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>{% block header_text %}{% endblock %}</h1>
<form method="POST" action="{% block form_action %}{% endblock %}">
<input name="item_text" id="id_new_item" placeholder="Enter a to-do item"/>
{% csrf_token %}
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
{% block table %}
{% endblock %}
</div>
</div>
</div>
</body>
</html>
home.html:
{% extends 'base.html' %}
{% block header_text %}Start a new To-Do list{% endblock %}
{% block form_action %}/lists/new{% endblock %}
list.html:
{% extends 'base.html' %}
{% block header_text %}Your To-Do list{% endblock %}
{% block form_action %}/lists/{{ list.id }}/add_item{% endblock %}
{% block table %}
<table id="id_list_table">
{% for item in list.item_set.all %}
<tr><td>{{ forloop.counter }}: {{ item.text }}</td></tr>
{% endfor %}
</table>
{% endblock %}
It's probably something silly, but anyway, thank you!
Instead of using hard coded
CSS links
<link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
Use Django Template Tags:
Or you can also use below if you list.html is rendering yoursite.com/list/
<link href="../static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
if yoursite.com/something/list/ then use;
<link href="../../static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
Related
I have a wagtail site - where blogpages are rendered by looping through a streamfield (in which each block can have an image, a heading and some text):
<div class="col-md-8 mx-auto px-auto">
<div class="conundrum mb-3">{{ page.category }}</div>
<h1>{{ page.title }}</h1>
<p class="meta">{{ page.date }}</p>
<div class="intro my-4 py-4">{{ page.intro }}</div>
{% for block in page.content %}
<div class="pb-4">
{% image block.value.image fill-1000x500 class='blog_image' %}
<h2 class="py-2 my-2">
{% include_block block.value.heading %}
</h2>
{% include_block block.value.text %}
</div>
{% endfor %}
</div>
I want the 'tweet this' button on the blogpage to include the first image on that page.
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="#PsymatikDotCom" />
<meta name="twitter:title" content="{{page.title}}" />
<meta name="twitter:description" content="{{page.intro}}"/>
<meta name="twitter:image" content="https://how_do_i_get_this_path" />
But it is not clear to me how to dynamically grab the url of the first image to enter it in the twitter:image section?
See the Wagtail docs page on How to use images in templates.
<head>
{% image page.photo width-400 as tmp_photo %}
<meta name="twitter:image" content="{{ tmp_photo.full_url }}">
</head>
You can combine this approach with the first Django template filter.
<head>
{% with page.content|first as first_block %}
{% image first_block.value.image width-400 as tmp_photo %}
<meta name="twitter:image" content="{{ tmp_photo.full_url }}">
{% endwidth %}
</head>
I'm using Django but for some reason the <h2> tag displays article.title with no problem but the <p> tag won't display anything - even simple text.
{% extends 'base_layout.html' %}
{% block content%}
<h1>Articles List</h1>
<div class="articles">
{% for article in articles %}
<div class="article">
<h2>{{ article.title}}</h2>
<p>TEST TEXT</p>
<p>{{ article.date }}</p>
</div>
{% endfor %}
</div>
{% endblock %}
the base_layout.html is
{% load static from staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carpe Nocturn</title>
<link rel="stylesheet" href="{% static 'styles.css' %}">
</head>
<body>
<header class="wrapper">
<h1><img src="{% static 'logo.png' %}" alt="Carpe Nocturn" /></h1>
</header>
<div class="wrapper">
{% block content %}
{% endblock %}
</div>
</body>
</html>
Everything was working fine including the title until I went to add an icon in. Upon manually creating the <head> and calling {{ super() }} to bring in Bootstrap's black magic, the title now displays above the navigation bar.
base.html
{% extends "bootstrap/base.html" %}
{% block head %}
{{ super() }}
{% block title %}{% block page_name %}{% endblock %} - MyFlask{% endblock %}
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
{% endblock %}
<body>
{% block navbar %}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MyFlask</a>
</div>
</div>
</nav>
{% endblock %}
</body>
index.html
{% extends "base.html" %}
{% block page_name%}Index{% endblock %}
When you use the super() function in a block, you are adding new contents to that block instead of replacing the original content. So when you called super() in the head block, Jinja2 inserted the head block's content from the bootstrap/base.html:
<head>
{%- block head %}
<title>{% block title %}{% endblock title %}</title>
{%- block metas %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{%- endblock metas %}
{%- block styles %}
<!-- Bootstrap -->
<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
{%- endblock styles %}
{%- endblock head %}
</head>
After that you added a new title block, so now you have two of them, and that is the problem.
The solution is easy, don't define a new head block in base.html, just override the title block, and append your favicon lines to the styles:
{% extends "bootstrap/base.html" %}
{% block title %}{% block page_name %}{% endblock %} - MyFlask{% endblock %}
{%- block styles %}
{{ super() }}
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
{% endblock %}
{% block navbar %}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MyFlask</a>
</div>
</div>
</nav>
{% endblock %}
I suspect this doesn't answer your question directly, but perhaps a better way of achieving this outcome is to pass in the page title from the view.
base.html
{% block title %}
{% if title %}
{{title}} - MyFlask
{% else %}
MyFlask
{% endif %}
{% endblock %}
views.py
#app.route('/', methods=['GET'])
def index():
return render_template("index.html", title='Index')
I have a blog app and something is really bogging me. I have a base.html template that I extend in every template of my views and that works perfectly, just one of the views, which is the one that only shows the blog post and not the rest of the posts, doesn't extend the base.html even though I have the {% extends 'base.html'%} just as in every other template and everything else basically the same. Also static files aren't loading, even though I load them just as in every other template ..
base.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}style.css">
<link rel="shortcut icon" href="static/favicon.ico" />
<meta charset="utf-8">
<title>
{% block title %}{% endblock %}
</title>
</head>
<p class="header">Blog</p>
<body background="static/landscape.jpg">
<div class="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>
Other template(works):
{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}Blog {% endblock %}
{% block content %}
{% for post in posts %}
<div class="post">
<h1>
<a class ="title" href="{{post.get_absolute_url}}">
{{post.title}}
</a>
</h1>
<p>{{post.content}}</p>
<hr>
</div>
{% endfor %}
{% endblock %}
Specific template(doesn't work):
{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}{{post.title}}{% endblock %}
{% block content %}
<article>
<header>
<h1 style="font-size:40px;"> {{post.title}} </h1>
<p>{{post.content|safe}}</p>
<p class="date">
Posted on
<time datetime="{{post.created|date:"c"}}">
{{post.created|date}}
</time>
</p>
</header>
</article>
<hr>
{% endblock %}
I'd be very thankful if you can discover anything I can't ... thanks.
This really sounds like a path issue to me. Try adding a / to your css and background paths, for example: <body background="/static/landscape.jpg"> and see if that makes a difference.
index.html
<html>
<head>
<link href="static/style.css" rel="stylesheet" type="text/css" />
<title>I want to</title>
</head>
<body>
{% block header %}
<div id="header-wrap"></div>
{% endblock %}
<div id="container">
{% block error %} {% endblock %}
{% block content %}{% endblock %}
</div>
</body>
</html>
page.html
{% extends 'index.html' %}
{% if error %}
{% block error %}
{{ error }}
{% endblock %}
{% endif %}
{% block content %}
<p><b>Page</b>: {{ page.language }}</p>
<p>views: {{ page.page_views}}</p>
<form action='/suggest' method='post'>
<textarea name='suggest' rows='10' cols='100'></textarea>
<input type='hidden' name='page_name' value={{ page.language }}>
<input type='submit' value='suggest'>
</form>
{% for suggestion in suggestions %}
<p>Suggestion: {{ suggestion.text }}</p>
<p>Votes: {{ suggestion.votes }}</p>
{% endfor %}
{% endblock %}
views.py returns
return render_to_response('page.html', {'page': page, 'suggestions': suggestions})
Problem:
- when I see the home page(index.html), header seems correctly placed(everything is good)
- when I see specific page, header not appearing, when I firebug-ed it, I found the link tag contains the entire index.html inside it
<head>
<link type="text/css" rel="stylesheet" href="static/style.css">
<html>
<head>
<link href="static/style.css" rel="stylesheet" type="text/css" />
<title>I want to learn</title>
</head>
<body>
<div id="header-wrap"></div>
<div id="container">
<a href=/page/python>python</a>
<a href=/page/page1>page1</a>
<a href=/page/page1>page2</a>
<a href=/page/page3>page3</a>
</div>
</body>
</html>
</link>
how can I fix this issue?
Just fixed it :
- path to stylesheet on pages was relative(static/style.css) and NOT absolute(*/*static/style.css). Making absolute path makes it work
<head>
<link type="text/css" rel="stylesheet" href="/static/style.css">
<html>