CODEWITHSUNDEEP
pythonhtmldjango
Mohamed
Mohamed

Reputation: 75

model shows last for loop image

Hey guys I was just wondering how come in my for loop my images show up each time on the page but in my pop out model it shows the last image the for loop gave out for each model. I even tried to make a different html which shows the details of the full view to see what picture it shows and it still shows the last image the for loop gave, which is the last image that gets posted up.

{% extends 'navbar.html'%}

{% load staticfiles%}

{% block styles %}
  <link rel="stylesheet" type="text/css" href="{% static 'css/accounts/profile.css' %}" />
{% endblock %}

{% block content %}

<div class="row">
  <div class="col-lg-4 col-md-6 col-xs-12" style="background-color:red">
    <h1>Profile of {{user}}</h1>
  </div>
  <div class="col-lg-4 col-md-6 col-xs-12">
  {% for post in posts%}
    <div class="thumbnail" style="background-color: yellow">
      <img src="{{post.image.url}}" class="image" data-toggle="modal" data-target="#myModal">
      <div class="middle">
        <div class="text">{{post.title}}</div>
      </div>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h1 class="modal-title" id="myModalLabel"><a href="{% url 'posts:detail' post.slug%}">{{post.title}}</a></h1>
            <h6>Posted: {{ post.pub_date| timesince}}</h6> by <a href="{% url 'posts:userpost' post.author.id%}">{{post.author.username}}</a>
          </div>
          <div class="modal-body">
            <div class="thumbnail">
              <img src="{{post.image.url}}" class="image" data-toggle="modal" data-target="#myModal">
            </div>
            <p>{{post.description|linebreaks|truncatechars:120}}</p>
            <p><a href="{% url 'posts:detail' post.slug%}" class="btn btn-primary" role="button">View</a></p>
          </div>
        </div>
      </div>
    </div>

  {% endfor %}
  </div>
</div>


{% endblock %}

Upvotes: 0

Views: 40

Answers (1)

nik_m
nik_m

Reputation: 12096

That's because you have data-target="#myModal" and below you have <div class="modal fade" id="myModal"... for each image.

So, each div has the same id. In order to work, you should make that unique for each image. Like this:

data-target="#myModal-{{ forloop.counter }}">  <!--  this will become #myModal-1 #myModal-2 #myModal-3 etc -->

and

<div class="modal fade" id="myModal-{{ forloop.counter }}" ...  <!--  this will become myModal-1 myModal-2 myModal-3 etc -->

Upvotes: 1

Related Questions