About generating responsive image gallery from any folder


I created collection for portfolio contents in my Jekyll and I am currently able to list all images from any folder with this guide. But there are image files named with @2x for displaying sharp images on high density displays like on this screenshot.

So how do I exclude @2x image files in gallery and put in srcset="" property in <img> tag for generating responsive image gallery.

This is my sample .md file:

layout: work-detail
{% include screenshot.html  folder="/images-folder/" %}

This is include file for generating gallery:

<div class="screenshot screenshot--grid">
{% 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 == '.png' or 
      file.extname == '.PNG' or 
      file.extname == '.JPEG' %}

      {% assign filenameparts = file.path | split: "/" %}
      {% assign filename = filenameparts | last | replace: file.extname,"" %}
			<img src="{{ file.path }}" alt="">
    {% endif %}
  {% endif %}
{% endfor %}