Rails 4 - 轮播助手 - 图片库

Question

我试图了解如何调整本教程以制作可在我的 Rails 4 应用程序中使用的轮播助手。

https://www.toptal.com/ruby-on-rails/rails-helper-bootstrap-carousel

我将助手设置为：

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

然后我尝试在我的项目显示视图中使用它。

我有：

<% @project.galleries.order(created_at: :asc).each do |gallery| %>

                        <div class="row">
                               <div class="col-md-8"> 

                                    <%= carousel_for(gallery.image,  alt: "gallery.image_alt") %>                                    

                               </div>



                                <div class="col-md-4 colored">
                                    <p class='medium-text'><%= gallery.image_description %></p>

                                </div>    



                        </div>   
                    <% end %>

我有一个项目模型和一个画廊模型。这些协会是：

Project.rb

has_many :galleries
      accepts_nested_attributes_for :galleries,  reject_if: :all_blank, allow_destroy: true

Gallery.rb

belongs_to :project

画廊 table 有一个 :image 属性。

我希望轮播循环显示每张图片。

本教程并未详细介绍如何将旋转木马插入其他模型，因此我不确定是否需要以某种方式将其合并到图库或项目模型中。

目前，如果我尝试这样做，我会收到一条错误消息：

wrong number of arguments (given 2, expected 1)

消息突出显示了助手的这一行：

  def carousel_for(images)

任何人都可以看到接下来的步骤是什么吗？

普拉维什的建议

采纳 Pravesh 的建议，我尝试了以下方法。我不得不评论 image_description 标题，因为它给出了一个未定义的方法错误（image_description 是我画廊 table 上的一个属性。我不知道如何实施这个建议来获得旋转木马工作。充其量它只是显示图像 link 的文本路径（我认为至少是这样）。控件不起作用，随后的 images/paths 不显示。

<% if @project.galleries == @project.galleries.order(created_at: :asc).first%>
      <div class="item active">  
           <%= carousel_for(@project.galleries) %>
            <div class="carousel-caption">
                 <p class='medium-text'><%#= @project.galleries.image_description %></p>
            </div>
      </div>
<% else %>
     <div class="item"> 
          <%= carousel_for(@project.galleries) %>
              <div class="carousel-caption">
                   <p class='medium-text'><%#= @project.galleries.image_description %></p>
              </div>
           </div>
     <% end %>

普拉维什的第二条建议

 <% @project.galleries.order(created_at: :asc).each do |gallery| %>
      <% if gallery == @project.galleries.order(created_at: :asc).first%>
        <div class="item active">  //since you need the first image as active
         <%= carousel_for(gallery.image) %>
         <div class="carousel-caption">
            <p class='medium-text'><%= gallery.image_description %></p>
          </div>
        </div>
      <% else %>
        <div class="item"> // for the rest of the images
          <%= carousel_for(@project.galleries.order(created_at: :asc)) %>

          <div class="carousel-caption">
            <p class='medium-text'><%= gallery.image_description %></p>
          </div>
        </div>
      <% end %>
    <% end %>

出现此错误：#

的未定义方法“计数”

这与我开始使用的是同一个

Answer 1

您在这里发送了两个参数

<%= carousel_for(gallery.image,  alt: "gallery.image_alt") %> // alt is the second parameter here

然而它只需要gallery.image作为参数。这就是为什么您会收到这样的错误：

wrong number of arguments (given 2, expected 1)

在您看来：

  <% @project.galleries.order(created_at: :asc).each do |gallery| %>
      <% if gallery == @project.galleries.order(created_at: :asc).first%>
        <div class="item active">  //since you need the first image as active
         <%= carousel_for(gallery.image) %>
         <div class="carousel-caption">
            <p class='medium-text'><%= gallery.image_description %></p>
          </div>
        </div>
      <% else %>
        <div class="item"> // for the rest of the images
          <%= carousel_for(gallery.image) %>
          <div class="carousel-caption">
            <p class='medium-text'><%= gallery.image_description %></p>
          </div>
        </div>
      <% end %>
    <% end %>
  </div>

新尝试：

<div class="item"> // for the rest of the images
   <%= carousel_for(@project.galleries.order(created_at: :asc)) %>
</div>

尝试 2

在你的控制器中

@image_urls=[]
@project.galleries.each do |gallery|
    @image_urls.push(gallery.image.url) // if you are using paperclip for image upload
end

在您看来

删除整个do each块，只添加下面一行

<%= carousel_for(@image_urls) %>

我相信这会有所帮助，对我来说效果很好

Rails 4 - 轮播助手 - 图片库

Rails 4 - carousel helper - image gallery

ruby-on-rails

twitter-bootstrap

carousel

helper