Unable to change inline css with jinja

Question

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.

@Selcuk sorry that was a typo when I was formatting here on stack overflow, I've fixed it now — PsychicNinja
– PsychicNinja, Commented Apr 18, 2016 at 10:54

pjcunningham · Accepted Answer · 2016-04-18 12:47:27Z

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>

Collectives™ on Stack Overflow

Unable to change inline css with jinja

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related