Django - Display images in template using for loop

Question

I am working on a product site using django framework with bootstrap. I want to display images in for loop.
I have done that using for loop and pictures are being displayed in order but I wanted to display just 20 images at first and then use next button to load more 10 images and so on.
Can it been done on the same page i.e. same URL.

<div class="div1" style="max-width: wrap content; height: 50em; padding-left: 7em;">

{% for p in product.types_set.all %}

    {% if p.available == True %}


    <div class="img" align="center" style=" float: left; width: 20em; height: 25em;">

      <img class="img-thumbnail" src="{{MEDIA_URL}}{{p.image.url}}" alt="image" style="width: 15em;">

    </div>

       {% endif %}
    {% endfor %}

</div>

It can, but it's unrelated to django, since it happens on the client side. — spectras
– spectras, Commented May 29, 2016 at 9:24

Bharathwaaj · Accepted Answer · 2016-05-29 12:40:26Z

You need to use pagination.

https://docs.djangoproject.com/en/1.9/topics/pagination/

Pass the product.types_set.all() object to Paginator

def listing(request):
    product = <get the product here>
    types_set_list = product.types_set.all().objects.all()
    paginator = Paginator(types_set_list, 20) # Show 20 contacts per page

    page = request.GET.get('page')
    try:
        typesets = paginator.page(page)
    except PageNotAnInteger:
        # If page is not an integer, deliver first page.
        typesets = paginator.page(1)
    except EmptyPage:
        # If page is out of range (e.g. 9999), deliver last page of results.
        typesets = paginator.page(paginator.num_pages)

    return render(request, 'list.html', {'typesets': typesets})

And in list.html

<div class="div1" style="max-width: wrap content; height: 50em; padding-left: 7em;">

{% for p in typesets.all %} 
  {% if p.available == True %}
    <div class="img" align="center" style=" float: left; width: 20em; height: 25em;">
      <img class="img-thumbnail" src="{{MEDIA_URL}}{{p.image.url}}" alt="image" style="width: 15em;">
    </div>
  {% endif %}
{% endfor %}
</div>
<div class="pagination">
    <span class="step-links">
        {% if typesets.has_previous %}
            <a href="?page={{ typesets.previous_page_number }}">previous</a>
        {% endif %}

        <span class="current">
            Page {{ contacts.number }} of {{ typesets.paginator.num_pages }}.
        </span>

        {% if typesets.has_next %}
            <a href="?page={{ typesets.next_page_number }}">next</a>
        {% endif %}
    </span>
</div>

Collectives™ on Stack Overflow

Django - Display images in template using for loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related