CODEWITHSUNDEEP
pythondjangoimagedjango-templatesclient
Sunny
Sunny

Reputation: 564

Django - Display images in template using for loop

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>

Upvotes: 1

Views: 3533

Answers (1)

Bharathwaaj
Bharathwaaj

Reputation: 2697

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>

Upvotes: 2

Related Questions