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>
Related
I have studied python flask.
I look into programs and googled a lot of times.
The code are as follows;
<!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.0">
<title>New User Registration</title>
</head>
<body>
{% extends "detector/base.html" %}
{% block title %} New User Registration {% endblock %}
{% block content %}
<div class="mx-auto dt-auth-main">
<div class="card dt-auth-signup">
<header>New User Registration</header>
<section>
<form method="post" action="{{url_for('auth.signup', next=request.args.get('next')) }}" class="form-signin">
{{ form.csrf_token}}
{% for message in get_flashed_messages() %}
<div class="dt-auth-flash">{{ message }}</div>
{ % endfor %}
{{ form.username(size=20, class="form-control dt-auth-input", placeholder="username")}}
{{ form.email(class="form-control dt-auth-input", placeholder="mailaddress")}}
{{ form.password(class="form-control dt-auth-input", placeholder="password")}}
{{ form.submit(class="btn btn-md btn-primary btn-block dt-auth-btn") }}
</form>
</section>
</div>
</div>
{% endblock%}
</body>
</html>
I got the following error.
jinja2.exceptions.TemplateSyntaxError: Encountered unknown tag 'endblock'. You probably made a nesting mistake. Jinja is expecting this tag, but currently looking for 'endfor' or 'else'. The innermost block that needs to be closed is 'for'.
Please give me kind help.
You have a typo on the line with { % endfor %} (Line 21).
You have to delete the space between { and % like {% endfor %}
It didn't work because it waits that the {% for %} is closed
I'm wanting to render bootstrap carousel and other nested html elements. im newer to Jinja2 and didn't see anything on the internet talking about this particular issue.
here is my python
#app.route("/")
def index():
r = requests.get(os.environ['AWS_Product_URL'])
prods = list(json.loads(r.text))
return render_template("index.html", my_products=prods)
this works
{% for key in my_products %}
<p><strong>{{ key["name"] }}</strong><span>{{ key["price"] }}</span></p>
{% endfor %}
but this doesn't
{% for key in my_products %}
<div class="carousel-item">
<p><strong>{{ key["name"] }}</strong><span>{{ key["price"] }}</span></p>
</div>
{% endfor %}
I took an existing template and trying to make this dynamic. the class exists. I'm confused why Jinja2 is having trouble with a nested item in html.
Why??
You're probably just missing to add class active to the carousel item
bootstrap carousel items requires at least one active element, all the others will be hidden.
so try out adding something like
{% for key in my_products %}
<div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
<p><strong>{{ key["name"] }}</strong><span>{{ key["price"] }}</span></p>
</div>
{% endfor %}
Just in case, here's template that I've tested with and it should be working fine assuming my_products is not empty.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner text-center">
{% for key in my_products %}
<div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
<p><strong>{{ key["name"] }}</strong><span>{{ key["price"] }}</span></p>
</div>
{% endfor %}
</div>
<button class="carousel-control-prev bg-dark" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next bg-dark" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
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>
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">
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>