<style>

.image-gallery {
  overflow: auto;
  margin-left: -1% !important;
}

.image-gallery a {
  float: left;
  display: block;
  margin: 0 0 1% 1%;
  width: 19%;
  text-align: center;
  text-decoration: none !important;
}

.image-gallery a span {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 3px 0;
}

.image-gallery a img {
  width: 100%;
  display: block;
}

</style>

<div class=“row justify-content-md-center”>

{% for file in site.static_files %}
{% if file.path contains include.folder %}
{% if file.extname == '.jpg' or file.extname == '.jpeg' or file.extname == '.JPG' or file.extname == '.JPEG' %}
{% assign filenameparts = file.path | split: "/" %}
{% assign filename = filenameparts | last | replace: file.extname,"" %}

<div class="col-md-4">
  <div class="thumbnail">
    <a href="{{ file.path | prepend: site.baseurl }}" title="{{ filename }}">
      <img src="{{ file.path | prepend: site.baseurl }}" alt="{{ filename }}" title="{{ filename }}" alt="Lights"
        style="width:100%">
      <div class="caption">
        <p>{{ filename }}</p>
      </div>
    </a>
  </div>
</div>

{% endif %}
{% endif %}
{% endfor %}

</div>