How to add a python element directly to a <img> HTML element? - python

I have a little issue, that I'm not able to decide myself.
I'm using Django and trying to add this Python code:
{{ question.question_logo }}
that means "1", into HTML element this way:
<img id = image src ="{% static "polls/images/question_logos/{{ question.question_logo }}.jpg"%}/>
To check myself i tried:
<img id=i mage src="{% static " polls/images/question_logos/1.jpg " %}"/>
<h1>{{ question.question_logo }}</h1>
It works perfectly
I need to let HTML know somehow, that
{{ question.question_logo }}
is not a raw part of a link
Thank's for your time

Do this instead
<img id="image" src ="{% static "polls/images/question_logos/" %}{{ question.question_logo }}.jpg"/>

You need to put quotes around the id attribute as well.
This should work perfectly.
<img id ="image" src ="{% static "polls/images/question_logos/{{ question.question_logo }}.jpg" %}"/>

Related

Fail to pass/use string argument for img to html file in Django app?

I am very new to Django and was trying to pass one argument as a string to my html file so that I can call to use my image.
I have the below code to call static image:
{% load static %}
<img src= "{{ user_age_pic_name }}" width=950 height=450px padding = 40px alt="" >
However, this is not working (I also tried deleting the double quote).
I know the image is correct because when I call
<img src= "{% static 'research/used_viz/comparative/age/12-15.jpg' %}" width=950 height=450px padding = 40px alt="" >
The img works perfectly.
I also try to just print out the text and it seems to work fine. I think it should be cause by limited understanding of HTML arguments. Could someone guide me through this? Any input is appreciated!
You just need to add .url
<img src= "{{ user_age_pic_name.url }}" width=950 height=450px padding = 40px alt="" >

How can I use a Django variable in my html img tag?

I need to use a variable for creation of a url for the img html tag.
I use python - Django.
Here's a hardcoded example of what I need:
<img src="{% static '/images/1.png' %}" alt="">
And here's what I tried (but failed):
I want to use x.id variable (currently it equals 1), in my url. Something like this:
<img src="{% static '/images/'{{ x.id }}'.png' %}" alt="">
What am I missing?

How to set id tag equal to URL name in django

I am trying to set dynamic id attribute to the <body> tag in the HTML.
Something like this - <body id="{{ django_view_name }}>"
I want the id attribute to have the page name, like for the homepage id="home" and for the blog page id="blog" and contact page id="contact"
I don't want to use Javascript or Jquery.
I created a main.html template and then i am inheriting the main template in each of the other templates like index.html templates.
The code in main.htmltag looks like this -
<div class="content-wrapper" id="content">
<%include file="${static.get_template_path('header.html')}" args="online_help_token=online_help_token" />
${self.body()}
</div>
and then on the index.html template i am inheriting like this -
<%inherit file="main.html" />
UPDATE: REQUIRED ADDITIONAL INFORMATION
How can i evaluate the value of ${ request.resolver_match.url_name }. For example if id="${ request.resolver_match.url_name }" evaluates to id="home", then I want to do something like this -
%if ${ request.resolver_match.url_name }=root:
<div class="container">
else:
something_else
How can i do this? Any help is really appreciated.
Try this,
<body id="{{ request.resolver_match.url_name }}">
this will generate id based on your url name you defined in urls.py urls
Update:
After the edit of question i see that you used mako templates
So you need,
<body id="${ request.resolver_match.url_name }">

Python - displaying images in Django

I'm new with django and i'm trying to create project, but i got a problem with displaying images. I have a html table with checkboxes and after selecting an object i wish to display image on next page but i can only get broken image.
i can display image this way :
<img src="{{ MEDIA_URL }}bird.png" class="img-responsive" style="width: 60px; height:80px; margin:auto;" />
but then obviously this image will be shown in every object.
but in this way what i use in index page it wont find any images:
<img src="{{ tags.tag_image.url }}" class="img-responsive" style="width: 60px; height:80px; margin:auto;" />
this is my views.py
def selected(request):
tags = request.GET.getlist('selected')
return render(request, 'tag/selected.html', {'all_tags':tags})
if i use:
def selected(request):
tags = request.GET.getlist('selected')
all_tags = Tags.objects.all
return render(request, 'tag/selected.html', {'tags':tags, 'all_tags':all_tags})
then it will find the images but then it will also show all the images even if i select only one.
this has been my problem for awhile now so please if anyone could help me i would really appreciate that
I'll try to interpret your question correctly! but tell me if I'm wrong:
Your Tags model looks something like this:
class Tags(models.Model):
tag_image = models.ImageField(upload_to='/somewhere')
...
If you want to get only the selected few, in your view you'll do something like this:
def selected(request):
tag_ids = request.GET.getlist('selected')
selected_tags = Tags.objects.filter(id__in=tag_ids)
return render(request, 'tag/selected.html', {'tags': selected_tags})
and then, in your template, you want something like this:
{% for tag in tags %}
<!-- tag is a single tag in this context -->
<img src="{{ tag.tag_image.url }}" class="img-responsive" style="width: 60px; height:80px; margin:auto;" />
{% endfor %}
Hope it helps to clarify how Django works...

Translating elements and adding enumeration IDs using Jinja2 templates?

I am creating pages that display slides from a slideshow (which are stored as images called slide001.png, slide002.png, etc.) along with transcripts of the voiceover. The templates look like this:
<div class="transcript">
<p>Hello, and welcome to the first slide.</p>
<p>This is the second slide.</p>
<p>/...and so on...</p>
</div>
I want this translated into:
<div class="transcript">
<div class="slide">
<img src="slide001.png"/>
<p>Hello, and welcome to the first slide.</p>
</div>
...and so on for each slide...
</div>
i.e., each paragraph is wrapped in a div, and an img element is inserted with a consecutively-numbered image reference. I'm doing this with JavaScript right now, but since I'm using Jinja2 to do other things (insert consistent headers and footers, creating forward/back links, etc.), I was hoping I could do the wrap-and-enumerate in Jinja2 as well. Is it possible without heroic hackery?
If you can get the data into the following format in your page then it can be rendered quite nicely.
transcript = [{'image': 'filepath', 'text':'welcome...'},
{'image': 'filepath2', 'text':'slide2'},
{'image': 'filepath3', 'text':'slide3'}]
The Jinja can placed inline or moved to a macro but this will do the trick either way:
<div class="transcript">
{% for slide in transcript %}
<div class="slide">
<img src="{{ slide.image }}"/>
<p>{{ slide.text }}</p>
</div>
{% endfor %}
</div>

Categories

Resources