I want have a simple model for images. there is a option to upload unlimited images. but I want don't want them to be shown under each other. for instance just show the first 5 images then some text and then again another 5.
right now my code is like this:
{% for img in images %}
<img src="{{ img.images.url }}" class="img-fluid" alt="">
{% endfor %}
I want the Structure to be like this:
for loop for img0 to 5,
then everything elese,
then another for loop for img6 to 10,
Thanks for the solutions and apologies for my bad English
You can work with the |slice template filter [Django-doc]:
{% for img in images|slice:":5" %}
<img src="{{ img.images.url }}" class="img-fluid" alt="">
{% endfor %}
…
{% for img in images|slice:"5:10" %}
<img src="{{ img.images.url }}" class="img-fluid" alt="">
{% endfor %}
Related
I have an image gallery for each users post. However, if a user has not uploaded any images I don't want to display the title "Image Gallery". How would I go about hiding the title if the for loop does not return anything?
<a>Image Gallery</a>
<div class="row">
{% for images in postgallery %}
<div class="col-md-3">
<a href="{{ images.images.url }}" data-lightbox="image-1">
<img class="img-thumbnail" src="{{ images.images.url }}" />
</a>
</div>
{% endfor %}
</div>
I have tried a few variations of {% if imagegallery == 0 %} but I can't get anything to work as I would like
According to django doc you can use this syntax: {% if postgallery|length == 0 %}
I am serving pictures from a loop. Some of the referenced URL's do not exist though. In that case I want to reference to a default pic.
I tried
{% for hit in hits %}
{% if url_for('static', filename='pictures/' + hit['jpg']) %}
<img class="rounded-circle article-img" src="{{ url_for('static', filename='pictures/' + hit['jpg']) }}">
{% else %}
<img class="rounded-circle article-img" src="{{ url_for('static', filename='pictures/' + 'default.jpg') }}">
{% endif %}
{% endfor %}
which seemed to be a bit naive since it didn't change anything. Do you have an idea for a good way to handle this?
You can always chose the right image path before rendering the template. So maybe something with os.path.isfile:
import os
from Flask import render_template
...
for i in range(len(hits)):
if not os.path.isfile('relative/path/to/pictures/' + hits[i]['jpg']):
hits[i]['jpg'] = 'default.jpg'
render_template('/my/template.html', hits = hits, ...)
Template:
{% for hit in hits %}
<img class="rounded-circle article-img" src="{{ url_for('static', filename= 'pictures/' + hit['jpg']) }}">
{% endfor %}
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 am using Django-Oscar with AWS S3 to host my product images. The carousel that displays images is presenting the product images correctly, but it is showing the thumbnail size image. I want to display the full-size image, not the thumbnail, on hover or click.
I am using django-compressor as well, so the images are stored in the cache folder on S3.
Should I change the template to enable this, or is there a django-oscar setting that can handle this?
Relevant code:
<div class="carousel-inner" role="listbox">
{% for image in all_images %}
<div class="item {% if forloop.first %}active{% endif %}">
{% thumbnail image.original "440x400" upscale=False as thumb %}
<img src="{{ thumb.url }}" alt="{{ product.get_title }}" />
{% endthumbnail %}
</div>
{% endfor %}
</div>
To something like this:
<div class="carousel-inner" role="listbox">
{% for image in all_images %}
<div class="item {% if forloop.first %}active{% endif %}">
<a href="{{ image.url }}" target="_blank">
{% thumbnail image.original "440x400" upscale=False as thumb %}
<img src="{{ thumb.url }}" alt="{{ product.get_title }}" />
</a>
{% endthumbnail %}
</div>
{% endfor %}
</div>
How do I display thumbnails for my item list....also is it possible to display just a specific thumbnail or a random thumbnail? So far I have this in my template:
{% for p in item.images.all %}
{{ p.get_thumbnail.url }}
{% endfor %}
To display the image, you'll at least need to use an <img> tag:
<img src="{{ p.thumbnail_image.url }}" alt="{{ p.name }}">
Just got an answer to the problem:
{% for p in item.images.all|slice:"4" %}