Add image variant

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

partials/image/feed.hbs

@@ -0,0 +1,6 @@
+<div class="post-feed gh-feed">
+  <div class="grid-item grid-sizer"></div>
+  {{#foreach posts}}
+  {{> image/loop}}
+  {{/foreach}}
+</div>

partials/image/lib/footer/jquery.hbs

@@ -0,0 +1,3 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
+  integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
+  crossorigin="anonymous" referrerpolicy="no-referrer"></script>

partials/image/lib/footer/masonry.hbs

@@ -0,0 +1,3 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"
+  integrity="sha512-JRlcvSZAXT8+5SQQAvklXGJuxXTouyq8oIMaYERZQasB8SBDHZaUbeASsJWpk0UUrf89DP3/aefPPrlMR1h1yQ=="
+  crossorigin="anonymous" referrerpolicy="no-referrer"></script>

partials/image/loop.hbs

@@ -0,0 +1,36 @@
+{{#if feature_image}}
+<div class="grid-item">
+  <figure class="{{post_class}}">
+
+    <a class="post-link" aria-label="Navigate to {{title}} page" href="{{url}}">
+      <img class="post-image" srcset="{{img_url feature_image size="s"}} 300w, {{img_url feature_image size="m" }}
+        720w, {{img_url feature_image size="l" }} 960w, {{img_url feature_image size="xl" }} 1200w, {{img_url
+        feature_image size="xxl" }} 2000w"
+        sizes="(min-width: 1020px) 300px, (min-width: 641px) calc((100vw - 50px) / 3), calc((100vw - 40px) / 2)"
+        src="{{img_url feature_image size="s"}}" alt="{{title}}">
+    </a>
+
+    <a class="post-lightbox" aria-label="Expand image" href="{{img_url feature_image}}">
+      {{> icons/maximize}}
+    </a>
+
+    <figcaption class="post-caption">
+      <h2 class="post-caption-title">{{title}}</h2>
+      <div class="post-caption-meta">
+        {{#primary_tag}}
+        <span class="post-caption-meta-item post-caption-meta-tag">
+          <a href="{{url}}">{{name}}</a>
+        </span>
+        {{/primary_tag}}
+        <span class="post-caption-meta-item post-caption-meta-date">
+          <time datetime="{{date format="YYYY-MM-DD"}}">{{date published_at}}</time>
+        </span>
+        <span class="post-caption-meta-item post-caption-meta-link">
+          <a href="{{url}}">View post</a>
+        </span>
+      </div>
+    </figcaption>
+
+  </figure>
+</div>
+{{/if}}

partials/image/more.hbs

@@ -0,0 +1,12 @@
+{{#get "posts" limit="all" filter="tags:[{{tags[*].slug}}]+id:-{{id}}" as |related|}}
+{{#if related}}
+<section class="related-posts">
+  <div class="post-feed gh-feed">
+    <div class="grid-item grid-sizer"></div>
+    {{#foreach related}}
+    {{> image/loop}}
+    {{/foreach}}
+  </div>
+</section>
+{{/if}}
+{{/get}}