Rails 5, Bootstrap Carousel not rendering - setup - ruby-on-rails

Question

Im trying to use an image carousel in my Rails 5 app. I'm trying to follow the approach in this article: https://www.toptal.com/ruby-on-rails/rails-helper-bootstrap-carousel
I have an models for proposal and image. The associations are:
Proposal
has_many :images, as: :imageable
accepts_nested_attributes_for :images, reject_if: :all_blank, allow_destroy: true
Image
belongs_to :imageable, :polymorphic => true, optional: true
My view partial has:
<!-- GALLERY -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- <div class="carousel-inner" role="listbox"> -->
<% #images.each do |gallery| %>
<% if gallery == #images.order(created_at: :asc).first%>
<div class="item active">
<%= carousel_for(gallery) %>
<%= image_tag(gallery.picture.url, :class => "carousel_image", :style => "text-align: center" ) %>
<div class="carousel_caption">
<p style="text-align: center"><%= gallery.comment.humanize %></p>
<p style="text-align: center"><%= gallery.credit %></p>
</div>
</div>
<% else %>
<div class="item">
<%= carousel_for(gallery) %>
<%= image_tag(gallery.picture, :class => "carousel_image") %>
<div class="carousel_caption">
<p style="text-align: center"><%= gallery.comment.humanize %></p>
<p style="text-align: center"><%= gallery.credit %></p>
</div>
</div>
<% end %>
<% end %>
<!-- </div> -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- /GALLERY -->
Helper has:
module CarouselHelper
def carousel_for(images)
Carousel.new(self, images).html
end
class Carousel
def initialize(view, images)
#view, #images = view, images
#uid = SecureRandom.hex(6)
end
def html
content = safe_join([indicators, slides, controls])
content_tag(:div, content, id: uid, class: 'carousel slide')
end
private
attr_accessor :view, :images, :uid
delegate :link_to, :content_tag, :image_tag, :safe_join, to: :view
def indicators
items = images.count.times.map { |index| indicator_tag(index) }
content_tag(:ol, safe_join(items), class: 'carousel-indicators')
end
def indicator_tag(index)
options = {
class: (index.zero? ? 'active' : ''),
data: {
target: uid,
slide_to: index
}
}
content_tag(:li, '', options)
end
def slides
items = images.map.with_index { |image, index| slide_tag(image, index.zero?) }
content_tag(:div, safe_join(items), class: 'carousel-inner')
end
def slide_tag(image, is_active)
options = {
class: (is_active ? 'item active' : 'item'),
}
content_tag(:div, image_tag(image), options)
end
def controls
safe_join([control_tag('left'), control_tag('right')])
end
def control_tag(direction)
options = {
class: "#{direction} carousel-control",
data: { slide: direction == 'left' ? 'prev' : 'next' }
}
icon = content_tag(:i, '', class: "glyphicon glyphicon-chevron-#{direction}")
control = link_to(icon, "##{uid}", options)
end
end
end
My application.js has:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery-fileupload/vendor/jquery.ui.widget
//= require jquery-fileupload/jquery.iframe-transport
//= require jquery-fileupload/jquery.fileupload
//= require bootstrap-sprockets
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require underscore
//= require gmaps/google
//= require markerclusterer
//= require cocoon
//= require_tree .
When I try this, I get an error that says:
undefined method `count' for #<Image:0x007fb10c88bea8>
It highlights this line of the carousel (indicators method):
items = images.count.times.map { |index| indicator_tag(index) }
ARUN'S SUGGESTION
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- <div class="carousel-inner" role="listbox"> -->
<%# #images.each do |gallery| %>
<%# if gallery == #images.order(created_at: :asc).first%>
<div class="item active">
<%= carousel_for(#images) %>
<%= image_tag(#image.picture.url, :class => "carousel_image", :style => "text-align: center" ) %>
<div class="carousel_caption">
<p style="text-align: center"><%= #image.comment.humanize %></p>
<p style="text-align: center"><%= #image.credit %></p>
</div>
</div>
<%# else %>
<div class="item">
<%= carousel_for(#images) %>
<%= image_tag(#image.picture, :class => "carousel_image") %>
<div class="carousel_caption">
<p style="text-align: center"><%= #image.comment.humanize %></p>
<p style="text-align: center"><%= #image.credit %></p>
</div>
</div>
<%# end %>
<%# end %>
<!-- </div> -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- /GALLERY -->
ERROR SAYS: undefined method `picture' for nil:NilClass
2nd attempt at Arun's suggestion
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="item active">
<%= carousel_for(#images) %>
<%= image_tag(#image.picture.url, :class => "carousel_image", :style => "text-align: center" ) %>
<div class="carousel_caption">
<p style="text-align: center"><%= #image.comment.humanize %></p>
<p style="text-align: center"><%= #image.credit %></p>
</div>
</div>
<div class="item">
<%= carousel_for(#images) %>
<%= image_tag(#image.picture.url, :class => "carousel_image") %>
<div class="carousel_caption">
<p style="text-align: center"><%= #image.comment.humanize %></p>
<p style="text-align: center"><%= #image.credit %></p>
</div>
</div>
<!-- </div> -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- /GALLERY -->
Error says: undefined method `picture' for nil:NilClass
Arun's revised suggestion
Taking Arun's revised suggestion, I try replacing the entire gallery view, with:
<%= carousel_for(Image.all.map(&:picture_url)) %>
When i try to render the page, the first image is rendered. I can see from the chrome inspector, that the second image is recognised, although the carousel doesnt work. The chevrons don't move the images along. There are no js issues showing in the console.

Answer 1

You need to execute your javascript and jquery for this carousel to work properly.
In the end of your html file, add this code (it can be before the /body):
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$( document ).ready(function(){
$('#mycarousel').carousel();
});
</script>
You can also create a partial with this code and call it on the end of your application layout.

Answer 2

The problem is with the way you're calling carousel_for method. You should be passing an array of images but you're passing a single instance of Image type as you're iterating over #images.
ie. images inside the Carousel class is not an ActiveRecord Relation. So, you can't call the count method. The error message clearly says that you're trying to invoke the count on an image instance.
So, you should pass #images to carousel_for. Your view should only contain
carousel_for(#images)
EDIT
You should actually pass the array of image URLs to the carousel_for method.
<%= carousel_for(Image.all.pluck(&:picture_url)) %>