Jekyll LightGallery how to load images inside their own DIVs, useful for Bootstrap

The original album.html from the tutorial Using LightGallery in Jekyll without tedious configs is the following (there's some basic Jekyll, Liquid looping code in there):

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

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

Troubleshooting

In fact the problem seems to have got nothing to do with Bootstrap.

The main images inside the lightGallery break equally if you just put the original code inside any random div (here added div class="doesntmatter"):

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

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

<div class="doesntmatter">

            <a href="{{ image.path }}" data-sub-html="{% exiftag image_description, , {{ image.path }} %}" >
                <img src="/thumbnails{{ image.path }}" />
            </a>
        {% endif %}
    {% endfor %}

</div>    

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

How can I make this work please?

It seems LightGallery only works when the <a href= is directly within the <div id="{{include.albumname}}"> is that correct?

If you can show me how I can get a LightGallery gallery, looping through Bootstrap 5 cards with the thumbnail image on there, then you win the answer and my gratitude! :)

Found an answer now! Add the selector: 'a'.

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

Same as here: https://stackoverflow.com/a/33995630/4367046