CODEWITHSUNDEEP
pythonhtmldjango
adel bouakaz
adel bouakaz

Reputation: 341

django: loop through images to show one per page

i want to make the images appear one per page as in "template/1" shows image 1 and so on.

i got pagination from bootstrap but i couldn't figure out how to link the images in my template.

i already have static set up and most of my website ready but i don't have any relevant code to show except this list i tried.

def imageview(request):
    context_dict = {}
    files = os.listdir(os.path.join(os.path.join(BASE_DIR, 'static'), "app_name/images/"))
    context_dict['files'] = files

    return render(request, 'images.html', context=context_dict)

Upvotes: 0

Views: 277

Answers (1)

adel bouakaz
adel bouakaz

Reputation: 341

Thank you "Chandan" pagination worked, here's the code:

view.py:

def imageview(request):
    image_list = os.listdir('static/app_name/images/')
    p = Paginator(image_list, 1)
    try:
        page = int(request.GET.get('page', '1'))
    except ValueError:
        page = 1
    try:
        image = p.page(page)
    except (EmptyPage, InvalidPage):
        image = p.page(p.num_pages)
    urllist = ['/static/app_name/images/%s' % url for url in image.object_list]
    context = {"image": image,"urllist": urllist}
    return render(request, 'images.html', context)

images.html

{% for url in urllist %}

<img src='{{ url }}' />

{% endfor %}


<nav aria-label="Page navigation example">
 <ul class="pagination">
  <li class="page-item">
   {% if image.has_previous %}
      <a class="page-link" href="?page={{ image.previous_page_number }}" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
  {% endif %}
  </a>
</li>
Page {{ image.number }} of {{ image.paginator.num_pages }}
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item">
  {% if image.has_next %}
       <a class="page-link" href="?page={{ image.next_page_number }}" aria-label="Next">
       <span aria-hidden="true">&raquo;</span>
  {% endif %}
  </a>
</li>

Upvotes: 1

Related Questions