CODEWITHSUNDEEP
pythonhtmldjango
Tom Cider
Tom Cider

Reputation: 191

Django Image Grid Gallery

I am trying to setup a grid gallery in my Django website similar to pinterest.com.

I have the following HTML code:

<div class="row text-center text-lg-left">
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="d-block mb-4 h-100">
        {% for img in imgs %}
        <img src="/static/img/{‌{ img }}" class="img-thumbnail" alt="">
        {% endfor %}
      </a>
    </div>
  </div>

Here is my views.py

def gallery(request):
    path = "C:/Users/fela/Pictures/"
    img_list = os.listdir(path)
    return render(request, 'gallery.html', {'imgs': img_list})

The above code shows the result line by line instead of next to each other. It displays one result (image) per line (https://image.ibb.co/bVAE9b/result_2.png).

The expected result should be similar to pinterest, it should be next to each other to fill up the screen.

I have tried using bootstrap 4 and bootstrap 3 with same results.

Upvotes: 0

Views: 2186

Answers (2)

Bojan Kogoj
Bojan Kogoj

Reputation: 5649

It should be something like this

<div class="row">
    {% for img in imgs %}
        <div class="col-lg-3 col-md-4 col-xs-6">
          <a href="#" class="d-block mb-4 h-100">
            <img src="/static/img/{‌{ img }}" class="img-thumbnail" alt="">
          </a>
        </div>
    {% endfor %}
  </div>

You had one div with col-*, but each image should have its own.

Upvotes: 1

Tom Cider
Tom Cider

Reputation: 191

I was able to figure it out using another method. Here is the code in case it helps someone else.

 <div style="width:100%">
  {% for img in imgs %}
      <div style="float:left; width:200px; height:200px;">
          <img src="/static/img/{{ img }}" class="img-thumbnail" alt="">
      </div>
  {% endfor%}
  </div>

Upvotes: 1

Related Questions