image-gallery.html in casjaysdev-jekyll-theme-0.1.8

- old
+ new
@@ -1,53 +1,30 @@
-<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 h-100 mb-3">
-  {% 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 h-100">
-    <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 class="row row-cols-2">
+  {% for file in site.static_files %} {% if file.path contains include.folder %}
+  {% if file.extname == '.jpg' or file.extname == '.png' or file.extname ==
+  '.svg' or file.extname == '.gif' 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 col-mb-2 cl-mr-2">
+    <div class="card h-100">
+      <div class="card-body">
+        <h5 class="card-title"></h5>
+        <p class="card-text">
+          <a href="{{ file.path | prepend: site.baseurl }}">
+            <img
+              src="{{ file.path | prepend: site.baseurl }}"
+              class="card-img-top"
+              alt="{{ filename }}"
+            />
+          </a>
+        </p>
+      </div>
+      <div class="card-footer">
+        <small class="text-muted">
+          <a href="{{ file.path | prepend: site.baseurl }}"> {{ filename }} </a>
+        </small>
+      </div>
     </div>
   </div>
-
-  {% endif %}
-  {% endif %}
-  {% endfor %}
+  {% endif %} {% endif %} {% endfor %}
 </div>