# Install rmagick on Jekyll

**URL:** <https://talk.jekyllrb.com/t/install-rmagick-on-jekyll/5478>\
**Category:** Help\
**Created:** [January 8, 2021, 7:17pm UTC](https://talk.jekyllrb.com/t/install-rmagick-on-jekyll/5478 "2021-01-08T19:17:09Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![888ba8](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/888ba8/32/3140_2.png) [@888ba8](https://talk.jekyllrb.com/u/888ba8)\
**Post date:** [January 9, 2021, 3:47pm UTC](https://talk.jekyllrb.com/t/install-rmagick-on-jekyll/5478/5 "2021-01-09T15:47:09Z")

</div>

I have a problem connecting this to Bootstrap 5.

The original **album.html** (under _\_includes_) from [Using LightGallery in Jekyll without tedious configs](https://jimmyxiao.me/guides/technical/2019/07/28/folder-based-jekyll-lightgallery) is the following:

```
<div id="{{include.albumname}}">

    {% for image in site.static_files %}
        {% if image.path contains 'images/galleryv2' and image.path contains include.albumname %}
            <a href="{{ image.path }}" data-sub-html="{% exiftag image_description, , {{ image.path }} %}" >
                <img src="/thumbnails{{ image.path }}" />
            </a>
        {% endif %}
    {% endfor %}

</div>
<script>
    $('#{{include.albumname}}').lightGallery({
    thumbnail:true,
});
</script>

```

This works great, no problem whatsoever.

As soon as I try to include the above inside Bootstrap however, the following happens:

When I try to include the images in Bootstrap 5 cards, then the LightGallery thumbnails still loads. When I click an image thumbnail however, the LightGallery loads, but the large-scale-version of the images are not present, and also the download icon of LightGallery is missing then …

Why could this be the case please? The modified code I am trying is:

```
<div id="{{include.albumname}}">

<div class="album py-4 bg-light">
  <div class="container">
    <div class="row">

    {% for image in site.static_files %}
        {% if image.path contains 'images/galleryv2' and image.path contains include.albumname %}

      <div class="col">
        <div class="card shadow-sm">
          <a href="{{ image.path }}" data-sub-html="{% exiftag image_description, , {{ image.path }} %}" >
                <img src="/thumbnails{{ image.path }}" class="bd-placeholder-img card-img-top img-fluid"/>
            </a>
          <div class="card-body">
          ABC, some text here.
          </div>
        </div>
      </div>

        {% endif %}
    {% endfor %}

    </div>
  </div>
</div>

</div>

<script>
    $('#{{include.albumname}}').lightGallery({
    thumbnail:true,
});
</script>

```

P.S.: The Bootstrap card code itself works fine when working without LightGallery and with a normal image static path.

Correction: In fact the link _{{ image.path }}_\* still works. However, as soon as the lightGallery itself opens, the link defaults and breaks to **/undefined**

---

_[View the full topic](https://talk.jekyllrb.com/t/install-rmagick-on-jekyll/5478)._