rails active storage slider

Question

Trying to make a simple Bootstrap slider to work with images stored via Rails Active Storage.

I embedded this code and related images in public folder and it works wonderfully:

 <div class="row">
        <div class="container">
          <div class="row portfolio-item">
            <div class="col-md-8">
              <div class="swiper-container gallery-top">
                <div class="swiper-wrapper">
                  <img src="/images/portfolio/item-1.jpg" alt="" class="swiper-slide">
                  <img src="/images/portfolio/item-2.jpg" alt="" class="swiper-slide">
                  <img src="/images/portfolio/item-3.jpg" alt="" class="swiper-slide">
                  <img src="/images/portfolio/item-4.jpg" alt="" class="swiper-slide">
                </div>
                <div class="swiper-button-next swiper-button-white"></div>
                <div class="swiper-button-prev swiper-button-white"></div>
              </div>
              <div class="swiper-container gallery-thumbs">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" style="background-image: url(/images/portfolio/item-1.jpg);"></div>
                  <div class="swiper-slide" style="background-image: url(/images/portfolio/item-2.jpg);"></div>
                  <div class="swiper-slide" style="background-image: url(/images/portfolio/item-3.jpg);"></div>
                  <div class="swiper-slide" style="background-image: url(/images/portfolio/item-4.jpg);"></div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <article class="content">
              </article>
            </div>
          </div>
        </div>
      </div>

I have another block of code of same but it loops through images from a model.

  <div class="row">
        <div class="container">
          <div class="row portfolio-item">
            <div class="col-md-8">
              <div class="swiper-container gallery-top">
                <div class="swiper-wrapper">
                  <% @myimages.each do |image| %>
                    <%= image_tag(image.sgimage.image, alt: '', class: 'swiper-slide') %>
                  <% end %>
                  </div>
                <div class="swiper-button-next swiper-button-white"></div>
                <div class="swiper-button-prev swiper-button-white"></div>
              </div>
              <div class="swiper-container gallery-thumbs">
                <div class="swiper-wrapper">
                  <% @myimages.each do |thumb| %>
                  <div class="swiper-slide" style="background-image:url(<%= rails_blob_url(thumb.sgimage.image) %>)"></div>
                  <% end %>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <article class="content">
              </article>
            </div>
          </div>
        </div>
      </div>

If i just use the top static version it works. If embed both neither works the static gallery-top slides correctly and the gallery-thumb sections slides ok but not in sync with the gallery-top images.

The rails version gallery-top "slides" ok but keeps returning the initial image only. The thumbs slide ok but again not in sync (i figure that's due to having two similar blocks referencing the same js).

So if I just include the rails slider the thumbs slide ok but the main slider does not slide at all.

I am suspecting that I am missing a helper or something. Can i use relative URL references rather than using the full asset pipeline URL from the server which includes the full path?

Any help appreciated. Losing much time on this.

mrdinghy mrdinghy · Accepted Answer · 2018-12-18T01:34:08

Solved! ...not sure why but this worked. I simply had to use a <div> and a background-image with a static height in the "Gallery-top" section instead of using the <%= image_tag() %> solution.

code here:

 <div class="row">
        <div class="container">
          <div class="row portfolio-item">
            <div class="col-md-8">
              <div class="swiper-container gallery-top">
                <div class="swiper-wrapper">
                  <% @myimages.each do |image| %>
                    <div class="swiper-slide" style="height: 200px; background-image:url(<%= rails_blob_url(image.sgimage.image) %>)"></div>
                  <% end %>
                </div>
                <div class="swiper-button-next swiper-button-white"></div>
                <div class="swiper-button-prev swiper-button-white"></div>
              </div>
              <div class="swiper-container gallery-thumbs">
                <div class="swiper-wrapper">
                  <% @myimages.each do |thumb| %>
                    <div class="swiper-slide" style="background-image:url(<%= rails_blob_url(thumb.sgimage.image) %>)"></div>
                  <% end %>                </div>
              </div>
            </div>
            <div class="col-md-4">
              <article class="content">
              </article>
            </div>
          </div>
        </div>
      </div>

rails active storage slider

1 Answers