Rails outputting two images when just one is wanted - ruby-on-rails

Question

I am currently working on a project that requires me to create a (real) estate agent website. I have imported an XML list with all the properties and created the database, but when I go to create a properties list and insert the first image for each property, it creates two images (one for each property in the list) and assigns both images to each property.
The code is:
<% #properties.each do |property| %>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<% property.pictures.each do |picture| %>
<% if picture.name.eql?('Photo 10') %>
<img src="<%= picture.url %>" class="img-responsive center-block"/>
<% end %>
<% end %>
</div>
<div class="col-sm-9">
<h4><%= property.advert_heading %></h4>
<p><%= property.main_advert %></p>
</div>
</div>
</div>
</div>
<% end %>
The html output is:
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<img href="http://med01.expertagent.co.uk/in4glestates/{376a3e5b-f940-4181-bc8e-255859c03e51}/{0b306ad6-63d3-4af2-a3ac-0dfa0885b724}/main/P1000507.jpg" class="img-responsive center-block"/>
<img href="http://med01.expertagent.co.uk/in4glestates/{376a3e5b-f940-4181-bc8e-255859c03e51}/{5004cf3b-e189-48e9-a1a6-f029e402ddd3}/main/P1000507.jpg" class="img-responsive center-block"/>
</div>
<div class="col-sm-9">
<h4>Pen Y Bryn, Llanfairfechan</h4>
<p>A semi detached three bedroom family home located in a quiet cul de sac in the upper part of the village of Llanfairfechan. The property benefits from double glazed windows, gas central heating, gardens to front and rear. This would make an ideal family home or investment property.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<img href="http://med01.expertagent.co.uk/in4glestates/{376a3e5b-f940-4181-bc8e-255859c03e51}/{0b306ad6-63d3-4af2-a3ac-0dfa0885b724}/main/P1000507.jpg" class="img-responsive center-block"/>
<img href="http://med01.expertagent.co.uk/in4glestates/{376a3e5b-f940-4181-bc8e-255859c03e51}/{5004cf3b-e189-48e9-a1a6-f029e402ddd3}/main/P1000507.jpg" class="img-responsive center-block"/>
</div>
<div class="col-sm-9">
<h4>33, Pen Y Bryn, Llanfairfechan LL33 0UH</h4>
<p>A semi detached three bedroom family home located in a quiet cul-de-sac in the upper part of Llanfairfechan village. The property benefits from double glazed windows, gas central heating, gardens to front and rear. Restrictions apply. Application fees apply. Deposit: &pound;750.</p>
</div>
</div>
</div>
</div>
To me it seems that rails is looping throught the property.picture.each twice (or I'm guessing more if I had more properties) and inserting the output twice but I can't see why.
Many thanks

Answer 1

It looks like you have duplicate pictures with a name attribute of 'Photo 10'. Use your rails console to run a query to confirm this.
Picture.where(name: 'Photo 10').count
How many records are returned? Is your expectation that each property would have one picture with a name of 'Photo 10'? If so you you should expect to have as many pictures returned as properties, if not then you have duplicate entries with the name 'Photo 10' for each property. which brings me to my next point.
You should normalize your database. The fact that you are relying on a non unique attribute, and that there are multiple picture entries that point to the same url tells me that. You are also creating a lot of unnecessary picture entries in the picture table. Instead, I'd create a join table between between properties and pictures, maybe called PropertyPictures. For each unique picture url, create one entry in the Picture table. For each property that uses a picture, create an entry in the join table with that property_id and the desired picture's picture_id. This will help in case your pictures change. As you have it now, if one picture url changes it doesn't change in all places, even if it should. As far as your view goes, now that you have a unique and consistent picture_id, use that, it will be impossible to have duplicates. Also, instead of pulling all pictures, just get the one you want. You could write a method in your property model to do this. It might look like this:
def special_picture
pictures.where(id: 1)
end
And in your view:
<% #properties.each do |property| %>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<img src="<%= property.special_picture.url %>" class="img-responsive center-block"/>
</div>
<div class="col-sm-9">
<h4><%= property.advert_heading %></h4>
<p><%= property.main_advert %></p>
</div>
</div>
</div>
</div>
<% end %>
`

Answer 2

If you're only wanting the first image for each listing, why are you looping through all pictures for each listing?
You could do this instead:
<div class="col-sm-3">
<img src="<%= property.pictures.first.url %>" class="img-responsive center-block"/>
</div>