CODEWITHSUNDEEP
htmlruby-on-railsruby
user4584963
user4584963

Reputation: 2523

html.erb - How to fill last row with empty divs

I have a view in my rails app that is an image gallery. The view looks like this:

view.html.erb

  <div class="photo-row">
    <% @item.item_images.each_with_index do |image, index| %>
      <% if (index % 3 == 0) && (index != 0) %>
        </div><div class="photo-row">
      <% end %>           
      <div class="photo-wrapper">
        <a class="fancybox" rel="group" href="<%= image.picture.large.url %>"><img class="pending-photo" src="<%= image.picture.small.url %>" alt="" /></a>
      </div>
    <% end %>
  </div>

As you can see the row will fill up with three images and then create a new row. For my alignment I need the last non-full row to be filled with with 3 photo-wrapper divs. For example if an @item has 7 item_images I need there to be three rows. The first two are full and the last should have 1 with the image and 2 empty wrappers.

How can I achieve this?

Upvotes: 1

Views: 184

Answers (3)

Stefan
Stefan

Reputation: 114158

I'd use the in_groups_of helper. It splits your array in groups of a given size. Missing elements are filled with nil by default.

Something like this should work:

<% @item.item_images.in_groups_of(3) do |images| %>
  <div class="photo-row">
    <% images.each do |image| %>
      <div class="photo-wrapper">
        <% if image %>
          <a class="fancybox" rel="group" href="<%= image.picture.large.url %>"><img class="pending-photo" src="<%= image.picture.small.url %>" alt="" /></a>
        <% end %>
      </div>
    <% end %>
  </div>
<% end %>

You could also use the link_to and image_tag helpers instead of <a> and <img> Tags. Maybe wrapped in a custom helper:

# app/helpers/application_helper.rb
def fancybox(image)
  link_to image.picture.large.url, class: 'fancybox', rel: 'group') do
    image_tag(image.picture.small.url, alt: '', class: 'pending-photo')
  end
end

and in your view:

<% @item.item_images.in_groups_of(3) do |images| %>
  <div class="photo-row">
    <% images.each do |image| %>
      <div class="photo-wrapper">
        <%= fancybox(image) if image %>
      </div>
    <% end %>
  </div>
<% end %>

[Note that I haven't tested this code, it could contain errors]

Upvotes: 2

nuaky
nuaky

Reputation: 2086

You can try achieve this with if statement. Just check for the last item.

Something like this:

<% @item.item_images.each_with_index do |image, index| %>
  <% if image == @item.last %>
    do something
  <% end %>
<% end %>

or check @item length 

<% if (index + 1) == @stuff.length %>
  do something
<% end %>

Upvotes: 0

VonD
VonD

Reputation: 5155

You can use the modulo operator to achieve that. In your example, 7 % 3 would return 1 (7 == 2*3 + 1). So 3 - (@item.item_images.length % 3) is the number you are looking for:

<% if @item.item_images.length % 3 != 0 %>
    <% (3 - (@item.item_images.length % 3)).times do %>
        <div class="photo-wrapper"></div>
    <% end %>
<% end %>

Upvotes: 1

Related Questions