Django - forループを使用してテンプレート内のイメージを表示する

Question

私は、ブートストラップとdjangoフレームワークを使用して製品サイトで作業しています。 forループで画像を表示したい
forループを使用して、画像は の順番で表示されていますが、最初は20枚の画像を表示し、次のボタンを使用して10枚の画像をロードするなどしました。
同じページ、つまり同じ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> 

Answer 1

ページネーションを使用する必要があります。

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

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}) 

、それができ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>