I am trying to create a voting system similar to that of stackoverflow, but I can't figure out how to call on the css instead of the images.
I have the following code:
<input type="image" id="uparrow{{ vote.id }}" src="{{ MEDIA_URL }}static/img/aup{% if vote and vote.is_upvote %}mod{% else %}grey{% endif %}.PNG">
How can I change the code so it calls a css class instead of an img src?
You are looking for something like:
<input type="image" id="uparrow{{ vote.id }}"
src="{{ MEDIA_URL }}static/img/vote.png"
class="otherclass {% if vote and vote.is_upvote %}upvote{% else %}novote{% endif %}" />
The image would have classes "otherclass" and "upvote" in one case, "otherclass" and "novote" in the other.
Related
Between once a second and 10 times a second I get the following message displayed on the console:
"GET /%7B HTTP/1.1" 404 26453
After running python manage.py runserver
I believe it has some relation to my carousel image strip because it stops the timer animation from scrolling across the top of the image to indicate how long left the image will be shown for until it moves on to the next one:
{% for image in images %}
<img src="/static/images/background-carousel.png" style="z-index: -1">
<li data-masterspeed="1500" data-slotamount="7" data-transition="zoomout">
<div class="tp-caption customin customout" data-captionhidden="on"
data-customin="x:0;
y:100;
z:0;
rotationX:0;
rotationY:0;
rotationZ:0;
scaleX:1;
scaleY:3;
skewX:0;
skewY:0;
opacity:0;
transformPerspective:600;
transformOrigin:0% 0%;"
data-customout="x:0;
y:0;
z:0;
rotationX:0;
rotationY:0;
rotationZ:0;
scaleX:0.75;
scaleY:0.75;
skewX:0;
skewY:0;
opacity:0;
transformPerspective:600;"
data-easing="Power4.easeOut"
data-endeasing="Power1.easeIn"
data-endspeed="300"
data-speed="750"
style="z-index: 9;
text-align:center;">
<img alt="{{ image.title }}" class="boff_white" data-bgfit="cover"
data-bgposition="center center" data-bgrepeat="no-repeat"
src="{{ MEDIA_URL }}{{ image.image }}"
style="width: {{ image.width }}; height: {{ image.height }}"/></center>
</div>
</li>
{% endfor %}
After the above code there are some more images hard-coded.
I am wondering what it means and how it can be fixed?
I am currently taking over development on the website from someone else (the for loop scope of code is the only bit that is mine).
Using Django 1.11 (cannot upgrade this)
Thank you.
Check answers for solution!
But what does the message mean?
Edit:
From here: https://www.w3schools.com/tags/ref_urlencode.asp %7B is a { ASCII encoding reference...
There was a {# without a closing #} in a src="{% static 'images/carousel...' %}" in the hard-coded section.
%7B is the ASCII encoding reference (see here: https://www.w3schools.com/tags/ref_urlencode.asp)
This question already has an answer here:
Reference template variable within Jinja expression
(1 answer)
Closed 4 years ago.
I want to get image name from database and make it display at html file by this code
<img src="{{ url_for('static', filename='img/{{rows.infor_image}}') }}" style="width:50%; height:60%;">
but I dont know how to write in the correct syntax to get image to be display
I try to declare image_name in .py file but I dont know how to use it
#app.route('/herbsinfo/<id>')
def landing_page(id):
cur = mysql.connection.cursor()
#Query
cur.execute('SELECT version()')
result = cur.execute("SELECT * FROM information where infor_id = %s",[id])
rows = cur.fetchone()
image_name = rows['infor_image']
if result > 0:
return render_template('herbsinfo.html', rows=rows,image_name=image_name)
or I can display image in other way
Try this :
<img src="{{ url_for('static', filename='img/'+image_name) }}" style="width:50%; height:60%;">
or
<img src="{{ url_for('static', filename='img/'+rows.infor_image) }}" style="width:50%; height:60%;">
You don't need to add extra {{ }}
I am new to Django and want to show an image in HTML which is identified by an item's link being clicked in a table. The ID is given when a link is clicked. HTML:
<div id="link-product">
<a id= "product-clicked" href="/prod_details/{item.id }}"> {{ item.product }}
</a>
</div>
VIEWS:
def list_details(request,info_id):
active_user = request.user
product_image = Item_Model.objects.values_list('image').filter(id=info_id)
return render(request,'prod_details.html', {'active_user': active_user, 'product_image': product_image})
Then it will go to the next page and the HTML should receive that item's ID and display its image accordingly. HTML:
<div id="info-box-container">
<img id= "product-image" src = "{{ MEDIA_URL }}{{ product_image }}" />
</div>
But when I do this, the image does not show. I am definitely missing some process. How can I get this to work as desired?
values_list returns a list of tuples but not the single value. Change your query to:
product_image = Item_Model.objects.filter(id=info_id) \
.values_list('image', flat=True).first()
I have a drop-down list
In my template,
<form name="languages" method="post">
<select id="langSelect" onchange="showDiv(this.value);">
<option>en (default)</option>
{% for ele in comments.languages.all %}
<option>{{ele.lang}}</option>
{% endfor %}
</select>
<div><a onclick="getIndex()">Submit</a></div>
</form>
Javascript:
function getIndex(){
var x = document.getElementById("langSelect").selectedIndex;
}
In the html:
{{obj.comments.all.index.value}}
How can I get the value of index from getIndex() and pass it back to django template
obj.comments[index].value and index = getIndex()
{{obj.comments.all.index.value}}?
Thanks.
check this link, you can use the forloop.counter0 and drop completely the getIndex() javascript function
i don't know exactly what you need, but you can then do something like
{{ c.comments.all.index.text forloop.counter0 }}
aka: pass the forloop.counter0 value to what you need
nb: i know nothing about {{c.comments.all.index.text}} so maybe my syntax won't work, you have to adapt it to your real usecase
I am trying to create a dynamic hyperlink that depends on a value passed from a function:
{% for item in field_list %}
<a href={% url index_view %}{{ item }}/> {{ item }} </a> <br>
{% endfor %}
The problem is that one of the items in field_list is "Hockey Player". The link for some reason is dropping everything after the space, so it creates the hyperlink on the entire "Hockey Player", but the address is
http://126.0.0.1:8000/Hockey
How can I get it to go to
http://126.0.0.1:8000/Hockey Player/
instead?
Use the urlencode filter.
{{ item|urlencode }}
But why are you taking the name? You should be passing the appropriate view and PK or slug to url which will create a suitable URL on its own.
Since spaces are illegal in URLs,
http://126.0.0.1:8000/Hockey Player/
is unacceptable. The urlencode filter will simply replace the space with %20, which is ugly/inelegant, even if it does kind of get the job done. A much better solution is to use a "slug" field on your model that represents a cleaned-up version of the title field (I'll assume it's called the title field). You want to end up with a clean URL like:
http://126.0.0.1:8000/hockey_player/
To make that happen, use something like this in your model:
class Player(models.Model):
title = models.CharField(max_length=60)
slug = models.SlugField()
...
If you want the slug field to be pre-populated in the admin, use something like this in your admin.py:
class PlayerAdmin(admin.ModelAdmin):
prepopulated_fields = {"slug": ("title",)}
....
admin.site.register(Player,PlayerAdmin)
Now when you enter a new Player in the admin, if you type "Hockey Player" for the Title, the Slug field will become "hockey_player" automatically.
In the template you would then use:
{% for item in field_list %}
<a href={% url index_view %}{{ item.slug }}/> {{ item }} </a> <br>
{% endfor %}
There is this builtin filter .
http://docs.djangoproject.com/en/dev/ref/templates/builtins/#urlencode
Although you should be using one of these
http://docs.djangoproject.com/en/dev/ref/models/fields/#slugfield