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