displaying information in different places on each iteration - css

Question

I am iterating through a database and displaying the results of each in two columns on the same row. Currently, the image is always displayed in the first column of every row. I would like to alternate this so on every other the image is on the right and the description on the left.
<% #guide.in_groups_of(2, false).each do |guide_row| %>
<% for guide in guide_row %>
<div class='row guide-row'>
<div class="col-md-6">
<%= link_to image_tag(guide.image(:large)), guide.image(:xlarge), :class => 'guide-image' %>
</div>
<div class="col-md-6 guide-list ">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href=" #info_<%= guide.id %>">
<h2 class='guide'><%= guide.title %></h2>
</a>
<h4 class='guide'>From <%= guide.date_starting.strftime("%a %b #{guide.date_starting.day.ordinalize}") %> to <%= guide.date_ending.strftime("%a %b #{guide.date_starting.day.ordinalize}") %></h4>
<div class='col-md-12'>
</div>
<div class="accordion" id="categories">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle btn glyphicon" data-toggle="collapse" data-parent="#accordion" href=" #info_<%= guide.id %>">
<i class='glyphicon glyphicon-info-sign info-icon'></i>
</a>
<% unless guide.extra_info.nil? %>
<%= link_to ' ', guide.extra_info, :class => 'glyphicon glyphicon-globe info-icon' %>
<% end %>
<div id="info_<%= guide.id %>" class="accordion-body collapse">
<div class="acccordion-inner">
<% if guide.description.empty? %>
<h4>No description available</h4>
<% else %>
<p class='guide-description'><%= guide.description %></p>
<% end %>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks in advance.

Answer 1

I am not sure how you are iterating through your rows, it's not really clear from the above.
But I would suggest you create 2 partials (small erb files), one for the even row and one for the odd row. Then based on your iterator, you would render either the even partial or the odd partial, each partial have the image and text swapped from each other.
Basically something like this: (not tested, but should give you the idea.
<%= #even_row? ? render 'shared/even_row' : render 'shared/odd_row' %>
to figure out which pair is even vs odd you can do something like this:
<% #guide.in_groups_of(2, false).each_with_index do |guide_row, index| %>
<%= index.even? ? render 'shared/even_row' : render 'shared/odd_row' %>
then you can use index.even?to determine which partial to render.
Hope that helps