[Answered ]-Django – Display images in template using for loop

by

2👍

✅

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>
👤Bharathwaaj

Leave a comment