Django: Python variable data as background image

Question

Details and Problem:

I am making a website which uses steam's social authentication and API, it saves users data in the database, and makes the session cookie that contains two main data, username and logged in cookies.

The data which the variable contains is the url to the image, which leads me to the problem, i want to show the picture of user on the index page, but css static file would not allow me to use the variable.

so i tried some other options:

Using HTML <style> tag:
<a class="profile_picture" href="/profile" style="background-image: url({{ picture }})"></a> # would not work, as it takes every character as string.
Using HTML <img> tag:

<img class="profilepicture" src="{{ picture }}"></img> # same problem here, takes every character as unicode string.

Question:

Is there any other way to do this with the setup i have? ( Django, CSS, HTML, Python ), i am trying to do this without installing something extra, i have seen sass, but is there still any other possible way?

Can i use <style> or <img> tag to take variable url as background image?, if so how?

What does "takes every character as string" mean? You should show the output, as well as the data you're passing in to the template. — Daniel Roseman
– Daniel Roseman, Commented Jul 10, 2016 at 12:48
it means that if i define a variable {{ var }} that contains data "stackoverflow.com" and add it to style as example: <p style="background-image: url('{{ var }}'</p> it would output {{ var }} except of link "stackoverflow.com" — ShellRox
– ShellRox, Commented Jul 10, 2016 at 12:57
Is this actually in a Django template, then? How are you rendering it? Show the whole thing, and the view. — Daniel Roseman
– Daniel Roseman, Commented Jul 10, 2016 at 13:13
Should try adding a semicolon, like so: style="background-image: url({{picture}});" — Utkarsh Sinha
– Utkarsh Sinha, Commented Jul 10, 2016 at 13:45
@ShellRox you are not using Django's template engine. If you simply return the HTML file contents, the {{ var }} will of course not be replaced. You need to render the template file before returning it to the client. — C14L
– C14L, Commented Jul 10, 2016 at 22:36

dave4jr · Accepted Answer · 2016-07-11 09:33:54Z

It's hard to answer this question without all of the details, but the first issue that comes to mind is that you are most likely referencing your context variable "picture" incorrectly. Again, I'm not sure by your question what exactly you are doing, but perhaps this example will help:

If I have a model named "Person" and that model has 2 fields, "name" and "picture". In my views.py, if I had a function called main:

  def main(request):
      persons = Person.objects.all()
      return render(request, index.html, {"persons":persons } )

This function creates an context variables named persons that will be available in your index.html file. Obviously this is a very loose example, but serves to guide you with the basics. So in your index.html template, you would reference the picture field by doing this:

  {% for person in persons %}
      {{ person.picture }}
  {% endfor %}

Hope that helps.

Collectives™ on Stack Overflow

Django: Python variable data as background image

Details and Problem:

Question:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Details and Problem:

Question:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related