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

Question

I am was wondering if anyone has ever used Cloudinary photos in a bootstrap carousel. I am currently working on a Rails project which has a Project model. That project model has_many instances of a Portfolio model and each portfolio has_many Cloudinary photos attached to it. I have checked that my router and controller are working properly by displaying all of these things before attempting the carousel. This is how my project controller looks like:

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



end

I am displaying the carousel on the project's show page and my view looks like this:

      <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>

At the moment the carousel is not displaying photos but it is there. After furtherly looking at the chrome console I can see that class="active" is missing from the first carousel item.

Let me know if the question needs further clarification or information. Thank you guys for any help or direction you can provide me with. 🙏🏼

Answer 1

What was wrong here is that <% if photo == portfolio[0] %> in the view should have been:

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

This adds the class="active" to the first photo of the first portfolio. The original line would add the active class to the first photo of all the project portfolios.