I had to change the background image of the jumbotron below based on the input taken from the database.
Here's the code:
housekeeping.html
<div class="jumbotron" style="background-image:url('{%block wallpaper%}{%endblock%}');padding-left:5%;width:100%;background-size: 100%; background-repeat: no-repeat;">
profile.html
{%extends 'housekeeping.html'%}
...
...
{%block wallpaper%}{{wallpaper}}{%endblock%}
app.py
#app.route('/name/<b64>')
def profile_for_song(b64):
...
... #retrives the value of `wallpaper` form a row in the database.
...
wallpaper = '/static/wallpaper.jpg' #dummy value.
return render_template('profile.html', wallpaper=wallpaper)
but it doesn't work, as the value of background-image:url('') remains null.
Is it not possible to alter css with jinja blocks?
PS: I tried with url_for but still nothing.
Watch the use of whitespace control in your wallpaper block in profile.html.
app.py
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def hello_world():
wallpaper = '/static/wallpaper.jpg'
return render_template('profile.html', wallpaper=wallpaper)
if __name__ == '__main__':
app.run()
housekeeping.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
</head>
<body>
<div class="jumbotron" style="background-image:url('{% block wallpaper%}{% endblock %}');padding-left:5%;width:100%;background-size: 100%; background-repeat: no-repeat;">
</div>
</body>
</html>
profile.html
{%extends 'housekeeping.html'%}
{% block wallpaper -%}
{{ wallpaper }}
{%- endblock %}
Sample output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
</head>
<body>
<div class="jumbotron" style="background-image:url('/static/wallpaper.jpg');padding-left:5%;width:100%;background-size: 100%; background-repeat: no-repeat;">
</div>
</body>
</html>
Related
I am wanting to take a dataframe and put it to a bootstrap table that is searchable. Right now I have this:
tester.html
<!DOCTYPE html>
<html lang="en">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<head>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/df_style.css') }}">
<style>
body {font-family: "Lato", sans-serif}
.mySlides {display: none}
</style>
</head>
<div align="center">
<br>
<br>
<br>
<br>
<br>
<br>
<table id="myTable">
<h1>
<!--Displaying the converted table-->
{% for table in tables %}
<h2>{{titles[loop.index]}}</h2>
{{ table|safe }}
{% endfor %}
</h1>
</table>
</div>
</body>
app.py
from app import app
from flask import Flask, render_template
#app.route("/")
def eod_coin():
return render_template('tester.html', tables=[eod.to_html()], titles=[''])
I have looked at the following How to make bootstrap-table-filter-control work with Flask, Jinja and Dataframe but can't seem to get the search function to work when I want to pass in a df and not building the data in my app.py
I want to be able to change page with my flask when I press on a link
app.py
#app.route('/')
def index():
return render_template('home.html')
#app.route('/login')
def login():
return render_template('login.html')
#app.route('/signUp')
def login():
return render_template('signUp.html')
#app.route('/home')
def login():
return render_template('home.html')
home.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<a id ="img_nav" href="{{ url_for('home')}}"><img src = "{{ url_for('static', filename= 'images/UVM_LOGO.jpg') }}" alt="UVM logo" class = "left"></a>
<nav id= "nav_grid">
<section class="nav_section">
Log In
Sign Up
</section>
</nav>
<body>
<main>
<h1>Home</h1>
</main>
</body>
</html>
signUp.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<a id ="img_nav" href="{{ url_for('home')}}"><img src = "{{ url_for('static', filename= 'images/UVM_LOGO.jpg') }}" alt="UVM logo" class = "left"></a>
<nav id= "nav_grid">
<section class="nav_section">
Log In
Sign Up
</section>
</nav>
<body>
<main>
<h1>signUp</h1>
</main>
</body>
</html>
login.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<a id ="img_nav" href="{{ url_for('home')}}"><img src = "{{ url_for('static', filename= 'images/UVM_LOGO.jpg') }}" alt="UVM logo" class = "left"></a>
<nav id= "nav_grid">
<section class="nav_section">
Log In
Sign Up
</section>
</nav>
<body>
<main>
<h1>login</h1>
</main>
</body>
</html>
The error I get is : AssertionError: View function mapping is overwriting an existing endpoint function: login
How to I create a flask with a website that has many webpages,
Thank you!
How to I fix it thank you!
You have used the function name login for all of your other routes.
This is causing Flask to be unable to create all your routes because the same name is being overridden multiple times.
Rename your functions for /login, /signUp and /home.
Also you probably not want the links for "Log in" and "Sign up" to link to / (index).
Change them to url_for('login') (if you decide to name the function for /login as def login:). The same thing of course for "Sign up".
Check here for reference on how to use url_for: https://www.tutorialspoint.com/flask/flask_url_building.htm
I am following a youtube tutorial but my CSS won't load.
I've tried changing the path and resetting the cache in chrome.
I'm at a loss as to what I can change to get it to work. Everything else is working
I've seen some other posts like this but I couldn't find an answer at any of those that worked for me.
Using VS 2019, Python 3.8
app.py
from flask import Flask, render_template, url_for
app= Flask(__name__)
#app.route('/')
def index():
return render_template('index.html')
if __name__ == "__main__":
app.run(debug=True)
index.html
{% extends 'base.html' %}
{% block head %}
<h1>Templated</h1>
{% endblock %}
{% block body %}
<body>Templates</body>
{% endblock %}
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" herf="{{ url_for('static', filename='/css/main.css') }}" >
{% block head %}{% endblock %}
</head>
<body>
{% block body %}
<link rel="stylesheet" type="text/css" herf="{{ url_for('static', filename='/css/main.css') }}">
{% endblock %}
</body>
</html
main.css
body {
color: blue;
margin: 0;
font-family: sans-serif;
}
h1 {
color: red;
margin: 0;
font-family: sans-serif;
}
path: C:\Users\username\OneDrive\Programming\Visual Studio 2019\Flask Introduction\static\css\main.css
In your base.html and in the link tag remove the first / in path /css/main.css ( => css/main.css ) and change to this and check if it works:
<link rel="stylesheet" type="text/css" herf="{{ url_for('static', filename='css/main.css') }}">
You should use relative path not the absolute one.
Django csrf_token error, while I wrote it in my HTML file, but why does this error message poped up when I wrote that csrf_token?
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'f/ask/ask.css' %}">
<title>BareTalk</title>
</head>
<body>
{% block content %}
<div id="wrapper">
<form method="POST" action="">{% csrf_token %}
{{ form }}
<!-- TODO: input submit Reg() function javascript -->
<button name="final" id="final">Ask</button>
</div>
</form>
</div>
{% endblock %}
</body>
<script src="{% static 'f/ask/ask.js' %}"></script>
</html>
paste this code and try again ->
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'f/ask/ask.css' %}">
<title>BareTalk</title>
</head>
<body>
<div id="wrapper">
<form method="POST">
{% csrf_token %}
{{ form }}
<!-- TODO: input submit Reg() function javascript -->
<button name="final" id="final">Ask</button>
</form>
</div>
</body>
<script src="{% static 'f/ask/ask.js' %}"></script>
</html>
I'm learning about template inheritance and I'm a little confused. When I navigate to index.html, I want the title to appear on the tab in my browser. And I want this functionality to be built into the base.html file, which I'm inheriting from, such that the function index on app.py need only be passed the argument title (and the html file name) to execute as described above.
For some reason, the code is not functioning as intended; the title is not present on the browser tab.
app.py:
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def index():
return render_template('index.html',title='index')
if __name__ == "__main__":
app.run(debug=True)
index.html:
<!DOCTYPE html>
{%extends "base.html"%}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
base.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
{%block head%}
{% if title %}
<title> {{title}} </title>
{%endif%}
{%endblock%}
</head>
<body>
{%block body%}{%endblock%}
</body>
</html>
Both index.html and base.html are found in the templates folder as is necessary for jinja to function. No errors are being triggered, the title is simply not being formatted as intended.
What am I doing wrong?
I figured it out, I needed to pull the title lines OUT of the block statement! Subtle but makes a big difference.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
{%block head%}
{%endblock%}
{% if title %}
<title> {{title}} </title>
{%endif%}
</head>
<body>
{%block body%}{%endblock%}
</body>
</html>
Your base.html has two <title> tags. Which isn't valid html.
You'll want to remove the empty one and allow for the title to be passed as an argument in all cases.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title> <!-- Remove this line here! -->
{%block head%}
{% if title %}
<title> {{title}} </title>
{%endif%}
{%endblock%}
</head>
<body>
{%block body%}{%endblock%}
</body>
</html>