2016-04-18 12 views
0

Ich musste das Hintergrundbild des Jumbotron unten basierend auf der Eingabe aus der Datenbank genommen ändern. Hier ist der Code:Kann nicht ändern Inline-CSS mit Jinja

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) 

aber es funktioniert nicht, da der Wert background-image:url('') Null bleibt.
Ist es nicht möglich, CSS mit Jinja-Blöcken zu ändern?

PS: Ich habe versucht mit url_for aber immer noch nichts.

+0

@Selcuk leid, dass ein Tippfehler war, als ich hier auf Stack-Überlauf wurde die Formatierung, habe ich es nun behoben – PsychicNinja

Antwort

1

Beobachten Sie die Verwendung von whitespace Kontrolle in Ihrem Hintergrundbild 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 %} 

Beispielausgabe

<!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>