Adding each_slice (3) gives Error in Rails App
<p>I'm working on this <code>do</code> loop in my app, it works fine but I want to take it further (see below) and I'm not sure how to do that. </p>

<pre><code>&lt;div class="row"&gt;

    &lt;% @products.each do |category, products| %&gt;
        &lt;% products.each_with_index do |product, index| %&gt;
        &lt;% if index == 0 %&gt;
            &lt;div class="col-lg-4 col-sm-6 col-xs-12 center-block " &gt;

                    &lt;%= image_tag product.image.url(:medium), class: "img-responsive" %&gt;
            &lt;div class="caption"&gt;
                &lt;p&gt;&lt;%= product.category.name %&gt;&lt;/p&gt;
             &lt;/div&gt; 
            &lt;% end %&gt;
            &lt;/div&gt; 
        &lt;% end %&gt;
    &lt;% end %&gt;

&lt;/div&gt;
</code></pre>

<p>At the moment the loop is looping through 12 categories and displaying one image from each category. I don't want to have all the images appearing in the same row.</p>

<p>I tried to add <code>each_slice(3)</code> to the loop but it gives me this error:</p>

<blockquote>
  <p>undefined method 'image' for 5:Fixnum</p>
</blockquote>

<p>This is how the code looks after the <code>each_slice(3)</code> insertion</p>

<pre><code>    &lt;% @products.each_slice(3) do |category, products| %&gt;
        &lt;div class="row"&gt;
            &lt;% products.each_with_index do |product, index| %&gt;
                &lt;% if index == 0 %&gt;
                    &lt;div class="col-lg-4 col-sm-6 col-xs-12 center-block " &gt;

                    &lt;%= image_tag product.image.url(:medium), class: "img-responsive" %&gt;
            &lt;div class="caption"&gt;
                &lt;p&gt;&lt;%= product.category.name %&gt;&lt;/p&gt;
             &lt;/div&gt; 
            &lt;% end %&gt;
            &lt;/div&gt; 
        &lt;% end %&gt;
    &lt;% end %&gt;

&lt;/div&gt;
</code></pre>

<p>I'm not sure what to do here or if each_slice (3) is the right way to do this.</p>