I'm having some trouble displaying my images if the url value comes from a dict.
if I do below it works.
{% for key, values in images.images.items %}
<div class="imageBox">
<img src="{% static 'images/ka/1.jpg' %}" alt="My image" width=100% height=100%/>
</div>
{% endfor %}
But I'd like to use the url values from the dict iteration instead. Like below
{% for key, values in images.images.items %}
<div class="imageBox">
<img src="{% static '{{values}}' %}" alt="My image" width=100% height=100%/>
</div>
{% endfor %}
value
{{values}} = 'images/ka/1.jpg'
But this dosen't work even tho {{values}} is 'images/ka/1.jpg' like the previous example. If I inspect the html in my browser it shows the src is /static/%7B%7B%20values%20%7D%7D. Why is it different?
You don't need {{ }} inside {% static %} tag.
Try this:
{% for key, values in images.images.items %}
<img src="{% static values %}">
{% endfor %}
This should work.
You can use the get_static_prefix template tag like so:
<img src="{% get_static_prefix %}{{ values }}" alt="My image" width=100% height=100%/>
get_static_prefix populates a template variable with the path specified in your STATIC_URL.
Reference get_static_prefix
Related
Error when we want to insert image file name into static url. No all has imageName.
Error:
Invalid block tag
Code:
<img width="40%" src="{% static 'files/img/
{% for i in questions %}
{% i.imageName %}
{% endfor %}
' %}">
This isn't built into Django but you can try something along these lines.
files = os.listdir(os.path.join(settings.STATIC_ROOT, "files/img"))
{% for file in files %}
<img width="40%" src="{{file}}">
{% endfor %}
try:
{% for i in questions %}
<img width="40%" src="{% static 'files/img/{{i.imageName}}' %}">
{% endfor %}
try
{% for i in questions %}
<img width="40%" src="{% static "files/img/{{i.imageName.url }}" %}">
{% endfor %}
Need help please. I'm trying to get this if statement within a for statement correct, but failing miserably at it. If an image isn't available, I badly need a fallback image to replace it.
Thank you
{% for post in posts|slice:":1" %}
<div class="container">
{% if post.image.url %}
<div class="flex-item">
<img style="width:100%;" src="{{ post.image.url }}"
</div>
{% else %}
<div class="image-container1">
<img src="{% static 'images/fallback.png' %}" alt="" style="width: 100%;text-align: center;display: block;">
</div>
{% endif %}
{% endfor %}
You are not closing a div, which you opened just after first loop, also assuming that you are loading static on top.
P.S. I can't add comment, so posting it as ans.
I read if else statement in Django docs
but i don't understand my case.
I have photos list, i want render image if is COVER else i want render static image.
This my code
{% for x in listing.photos.all %}
{% if x.photo_tipo == 'COVER' %}
<img src="{{ x.get_thumb }}" alt="">
{% else %}
<img src="{% static 'images/about/1.jpg' %}" alt="">
{% endif %}
{% endfor %}
Result is: an image if x.photo == 'COVER' and a static image for every other photo in the list.
I would like to get only one result if the declaration is true or only one static image if it is false
Don't do this in the template. Add some logic somewhere that gives you the photo with that type directly if it exists. A good way would be with a method on the Listing model:
class Listing(models.Model):
...
def cover_photo(self):
return self.photos.filter(photo_tipo='COVER').first()
Now your template could be:
{% with photo as listing.cover_photo %}
{% if photo %}
<img src="{{ photo.get_thumb }}" alt="">
{% else %}
<img src="{% static 'images/about/1.jpg' %}" alt="">
{% endif %}
{% endwith %}
I have the following segment of code in view:
image = [
'register.png',
'checkin.png',
'checkin.png'
]
imagetext = [
'Register Patient',
'Checkin Patient',
'Checkin Patient'
]
link = [
'/clinic/%s/register' % cliniclabel,
'/clinic/%s/checkin' % cliniclabel,
'/clinic/%s/checkin' % cliniclabel
]
zipsidebarstuff = zip(image, imagetext, link)
return render(request, 'clinic/cliniccurrent3.html',
{'rnd_num': randomnumber(), 'clinic': clinicobj,
'checked_list': checkedin_list, 'patientcount': patientcount,
'type':'live', 'ClinicUserName': name, 'showhelp': helpneeded,
'NumUnconfirmedAppts': NumUnconfirmedAppts(clinicobj),
'zipsidebarstuff': zipsidebarstuff})
In my template I have:
<div class="col-md-6">
<div class="sidebar-nav-fixed pull-right affix">
<div class="row">
<div class="d-inline-flex flex-row flex-wrap">
{% for image, imagetext, link in zipsidebarstuff %}
<div class="p-2 bd-white">
<div class="d-inline-flex flex-column">
<div class="p-2 flex-fill bd-highlight">
<a href="{{ link }}"><img class="imgsidebtn"
src="{% static 'clinic/img/{{ image }}' %}" /></a>
</div>
<div class="p-2 flex-fill bd-highlight">
{{ imagetext }}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% include "clinic/helpbar.html" with location="livelist" foo=bar %}
</div>
</div>
The problem is in showing the tag
<a href="{{ link }}"><img class="imgsidebtn"
src="{% static 'clinic/img/{{ image }}' %}" /></a>
in the rendered html. It is shown as:
<a href="/clinic/jeslineye/checkin"><img class="imgsidebtn"
src="/appointments/static/clinic/img/%7B%7B%20image%20%7D%7D"></a>
Why is this happening? How can I fix this?
You cannot use template variable inside static tag like this:
{% static 'clinic/img/{{ image }}' %}
Instead use with and add filter
{% with "clinic/img/"|add:image as image_url %}{% static image_url %}{% endwith %}
You cannot use a variable inside a {% static %} tag. What you can do is to use get-static-prefix and construct the URL manually. For example:
<img src="{% get_static_prefix %}clinic/img/{{ image }}">
In one of my templates I use
{% for key, value in dict.items %}
...
<img src="{% static 'img/{{ key|slugify }}.jpg' %}"/>
...
{% endfor %}
but the output is not the one expected so I guess that one cannot use template filters within a static tag.
Any suggestions on how to achieve this then?
Edit: the keys of the dict above are strings that corresponds to the filenames of the jpg images.
Use get_static_prefix tag:
{% load static %}
{% for key, value in dict.items %}
...
<img src="{% get_static_prefix %}img/{{ key|slugify }}.jpg"/>
...
{% endfor %}