image-gallery.html

<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="image-gallery">
{% 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' or
      file.extname == '.png' or
      file.extname == '.PNG' or
      file.extname == '.gif' or
      file.extname == '.GIF' %}

      {% assign filenameparts = file.path | split: "/" %}
      {% assign filename = filenameparts | last | replace: file.extname,"" %}

      <a href="{{ file.path }}" title="{{ filename }}">
        <!-- <img src="//images.weserv.nl/?url=sfpc.io/{{ file.path }}&w=300&h=300&output=jpg&q=50&t=square" alt="{{ filename }}" /> -->
        <img src="{{ file.path }}" alt="{{ filename }}" />
        <!-- <span>{{ filename }}</span> -->
      </a>
    {% endif %}
  {% endif %}
{% endfor %}
</div>