如何将 Cloudinary 照片集成到带有控件的 Bootstrap 轮播中？

Question

我想知道是否有人在 bootstrap 轮播中使用过 Cloudinary 照片。我目前正在研究一个具有项目模型的 Rails 项目。该项目模型 has_many 个投资组合模型的实例和每个投资组合 has_many 附加到它的 Cloudinary 照片。在尝试轮播之前，我已通过显示所有这些内容来检查我的路由器和控制器是否正常工作。这是我的项目控制器的样子：

class ProjectsController < ApplicationController
    skip_before_action :authenticate_user!, only: [ :show ]
    
    def show
        @project = Project.find(params[:id])
        @portfolios = @project.portfolios
    end



end

我在项目的显示页面上显示轮播，我的视图如下所示：

      <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <% @portfolios.each do |portfolio| %>
            <% portfolio.photos.each do |photo|%>
              <% if photo == portfolio[0] %>
                <div class="carousel-item active">
                  <%= cl_image_tag photo.key, height: 300, width: 400, crop: :fill %>
                </div>
              <%else%>
                <div class="carousel-item">
                  <%= cl_image_tag photo.key, height: 300, width: 400, crop: :fill %>
                </div>
              <%end%>
            <%end%>
          <%end%>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>

目前轮播没有显示照片，但它在那里。在进一步查看 chrome 控制台后，我可以看到第一个轮播项目中缺少 class="active"。

如果问题需要进一步澄清或信息，请告诉我。谢谢你们可以为我提供的任何帮助或指导。

Answer 1

这里的错误是视图中的 <% if photo == portfolio[0] %> 应该是：

if photo == @portfolios.first.photos.first

这会将 class="active" 添加到第一个作品集的第一张照片。原始行会将活动 class 添加到所有项目组合的第一张照片。

如何将 Cloudinary 照片集成到带有控件的 Bootstrap 轮播中？

How can I integrate Cloudinary photos to a Bootstrap carousel with controls?

ruby-on-rails

twitter-bootstrap

cloudinary