Refactoring a Rails view to be DRY

Question

I'm not sure if the title is representative of my actual problem but as I'm relatively new to programming it's the best I could come up with. Let me know if you have something better?

I want to refactor my current view to be both more manageable and in keeping with the DRY method.

My view:

     <div class="row">
        <div class="span8">
        <% @photos.each_with_index do |photo, index| %>
          <% if index == 0 %>
          <!-- <h1><%= photo.title %></h1> -->
            <img src="<%= photo.image_url.to_s %>">
          <% end %>
        <% end %>
        </div>

        <div class="span4">
        <% @photos.each_with_index do |photo, index| %>
          <% if index == 2 %>
          <!-- <h1><%= photo.title %></h1> -->
          <img src="<%= photo.image_url.to_s %>">
          <% end %>
        <% end %>
        </div>

        <div class="span4">
        <% @photos.each_with_index do |photo, index| %>
          <% if index == 3 %>
          <!-- <h1><%= photo.title %></h1> -->
          <img src="<%= photo.image_url.to_s %>">
          <% end %>
        <% end %>
        </div>
      </div><!--/.row -->

      <div class="row">
        <div class="span8 pull-right">
        <% @photos.each_with_index do |photo, index| %>
          <% if index == 4 %>
          <!-- <h1><%= photo.title %></h1> -->
            <img src="<%= photo.image_url.to_s %>">
          <% end %>
        <% end %>
        </div>

       <div class="span4">
        <% @photos.each_with_index do |photo, index| %>
          <% if index == 2 %>
          <!-- <h1><%= photo.title %></h1> -->
          <img src="<%= photo.image_url.to_s %>">
          <% end %>
        <% end %>
        </div>

        <div class="span4">
        <% @photos.each_with_index do |photo, index| %>
          <% if index == 3 %>
          <!-- <h1><%= photo.title %></h1> -->
          <img src="<%= photo.image_url.to_s %>">
          <% end %>
        <% end %>
        </div>
      </div><!--/.row -->

My controller:

 def index
    if params[:tag]
      @photos = Photo.tagged_with(params[:tag])
    else  
      @photos = Photo.order("created_at DESC")
    end

    respond_to do |format|
      format.html # index.html.erb
      format.json { render json: @photos }
    end
  end

If I just wanted to show a few photos this wouldn't be a problem. However, as this view is essentially a feed of every photo uploaded it becomes unmanageable very quickly. Especially when I have to reference say 100/1000/10,000 photos with their index. Is there a better way to refactor this view? Keeping in mind the changing spans8, span4, span4 which are then reversed span4, span4, span8 and so on and so forth.

Answer 1

Try this:

<% @photos.each_with_index do |photo, index| %>
  <div class="row">
    <div class="span<%= cycle(8, 4, 4) %>">
      <!-- <h1><%= photo.title %></h1> -->
      <img src="<%= photo.image_url.to_s %>">
    </div>
  </div>
<% end %>