Add image variant

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

assets/css/image/feed.css

@@ -0,0 +1,108 @@
+:root {
+  --grid-gap: 12px;
+}
+
+.post-caption {
+  display: none;
+}
+
+.post-link {
+  display: block;
+}
+
+.post-link:hover {
+  opacity: 1;
+}
+
+.post-lightbox {
+  position: absolute;
+  right: 15px;
+  bottom: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  background-color: var(--color-white);
+  border-radius: 50%;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  opacity: 0;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  transform: scale(0.8);
+}
+
+.post-link:hover+.post-lightbox,
+.post-lightbox:hover {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.post-feed {
+  margin: 0 auto;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s var(--animation-base);
+}
+
+.post-feed.initialized {
+  visibility: visible;
+  opacity: 1;
+}
+
+.post-feed .grid-item {
+  position: absolute;
+  width: 330px;
+}
+
+.post-feed .post {
+  position: relative;
+  margin: var(--grid-gap);
+}
+
+.post-feed .post-image {
+  width: 100%;
+}
+
+@media (max-width: 640px) {
+  .post-feed {
+    --grid-gap: 4px;
+
+    max-width: calc(100% - (calc(var(--gap) - var(--grid-gap))) * 2);
+  }
+
+  .post-feed .grid-item {
+    width: 50%;
+  }
+}
+
+@media (min-width: 641px) and (max-width: 1019px) {
+  .post-feed {
+    --grid-gap: 8px;
+
+    max-width: calc(100% - (calc(var(--gap) - var(--grid-gap))) * 2);
+  }
+
+  .post-feed .grid-item {
+    width: calc(100% / 3);
+  }
+}
+
+@media (min-width: 1020px) {
+  .post-feed {
+    max-width: 990px;
+  }
+}
+
+@media (min-width: 1350px) {
+  .post-feed {
+    max-width: 1320px;
+  }
+}
+
+@media (min-width: 1680px) {
+  .post-feed {
+    max-width: 1650px;
+  }
+}

assets/css/image/main.css

@@ -0,0 +1,19 @@
+@import "@tryghost/shared-theme-assets/assets/css/v1/screen.css";
+
+@import "../common/article.css";
+@import "../common/author.css";
+@import "../common/gscan.css";
+@import "../common/head.css";
+@import "../common/pagehead.css";
+@import "../common/root.css";
+@import "../common/section.css";
+@import "../common/tag.css";
+
+@import "../lib/prism.css";
+@import "../lib/commento.css";
+@import "../lib/tocbot.css";
+
+@import "feed.css";
+@import "masonry.css";
+@import "pswp.css";
+@import "site.css";

assets/css/image/masonry.css

@@ -0,0 +1,217 @@
+/*
+Brother .
+https: //github.com/TryGhost/Edge/blob/main/assets/css/general/masonry.css
+*/
+
+.flexmasonry {
+  display: flex;
+  flex-flow: column wrap;
+  align-content: space-between;
+}
+
+.flexmasonry-item {
+  width: 100%;
+}
+
+.flexmasonry-cols-2 .flexmasonry-item {
+  width: 50%;
+}
+
+.flexmasonry-cols-3 .flexmasonry-item {
+  width: 33.333%;
+}
+
+.flexmasonry-cols-4 .flexmasonry-item {
+  width: 25%;
+}
+
+.flexmasonry-cols-5 .flexmasonry-item {
+  width: 20%;
+}
+
+.flexmasonry-cols-6 .flexmasonry-item {
+  width: 16.666%;
+}
+
+.flexmasonry-cols-7 .flexmasonry-item {
+  width: 14.285%;
+}
+
+.flexmasonry-cols-8 .flexmasonry-item {
+  width: 12.5%;
+}
+
+.flexmasonry-cols-2 .flexmasonry-item:nth-child(2n+1) {
+  order: 1;
+}
+
+.flexmasonry-cols-2 .flexmasonry-item:nth-child(2n) {
+  order: 2;
+}
+
+.flexmasonry-cols-3 .flexmasonry-item:nth-child(3n+1) {
+  order: 1;
+}
+
+.flexmasonry-cols-3 .flexmasonry-item:nth-child(3n+2) {
+  order: 2;
+}
+
+.flexmasonry-cols-3 .flexmasonry-item:nth-child(3n) {
+  order: 3;
+}
+
+.flexmasonry-cols-4 .flexmasonry-item:nth-child(4n+1) {
+  order: 1;
+}
+
+.flexmasonry-cols-4 .flexmasonry-item:nth-child(4n+2) {
+  order: 2;
+}
+
+.flexmasonry-cols-4 .flexmasonry-item:nth-child(4n+3) {
+  order: 3;
+}
+
+.flexmasonry-cols-4 .flexmasonry-item:nth-child(4n) {
+  order: 4;
+}
+
+.flexmasonry-cols-5 .flexmasonry-item:nth-child(5n+1) {
+  order: 1;
+}
+
+.flexmasonry-cols-5 .flexmasonry-item:nth-child(5n+2) {
+  order: 2;
+}
+
+.flexmasonry-cols-5 .flexmasonry-item:nth-child(5n+3) {
+  order: 3;
+}
+
+.flexmasonry-cols-5 .flexmasonry-item:nth-child(5n+4) {
+  order: 4;
+}
+
+.flexmasonry-cols-5 .flexmasonry-item:nth-child(5n) {
+  order: 5;
+}
+
+.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n+1) {
+  order: 1;
+}
+
+.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n+2) {
+  order: 2;
+}
+
+.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n+3) {
+  order: 3;
+}
+
+.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n+4) {
+  order: 4;
+}
+
+.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n+5) {
+  order: 5;
+}
+
+.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n) {
+  order: 6;
+}
+
+.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+1) {
+  order: 1;
+}
+
+.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+2) {
+  order: 2;
+}
+
+.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+3) {
+  order: 3;
+}
+
+.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+4) {
+  order: 4;
+}
+
+.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+5) {
+  order: 5;
+}
+
+.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+6) {
+  order: 6;
+}
+
+.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n) {
+  order: 7;
+}
+
+.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+1) {
+  order: 1;
+}
+
+.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+2) {
+  order: 2;
+}
+
+.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+3) {
+  order: 3;
+}
+
+.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+4) {
+  order: 4;
+}
+
+.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+5) {
+  order: 5;
+}
+
+.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+6) {
+  order: 6;
+}
+
+.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+7) {
+  order: 7;
+}
+
+.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n) {
+  order: 8;
+}
+
+.flexmasonry-break {
+  flex-basis: 100%;
+  width: 0 !important;
+  margin: 0;
+  content: "";
+}
+
+.flexmasonry-break-1 {
+  order: 1;
+}
+
+.flexmasonry-break-2 {
+  order: 2;
+}
+
+.flexmasonry-break-3 {
+  order: 3;
+}
+
+.flexmasonry-break-4 {
+  order: 4;
+}
+
+.flexmasonry-break-5 {
+  order: 5;
+}
+
+.flexmasonry-break-6 {
+  order: 6;
+}
+
+.flexmasonry-break-7 {
+  order: 7;
+}

assets/css/image/pswp.css

@@ -0,0 +1,73 @@
+/*
+I don't know either man
+https: //github.com/TryGhost/Themes/blob/main/packages/_shared/assets/css/v1/vendor/pswp.css
+*/
+
+.pswp__bg {
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.pswp__caption__center {
+  color: var(--color-darker-gray);
+}
+
+.pswp__button,
+.pswp__button--arrow--left::before,
+.pswp__button--arrow--right::before {
+  background: url("/assets/images/default-skin.png") 0 0 no-repeat;
+  background-size: 264px 88px;
+}
+
+@media (-webkit-min-device-pixel-ratio: 1.1),
+(-webkit-min-device-pixel-ratio: 1.09375),
+(min-resolution: 105dpi),
+(min-resolution: 1.1dppx) {
+
+  .pswp--svg .pswp__button,
+  .pswp--svg .pswp__button--arrow--left::before,
+  .pswp--svg .pswp__button--arrow--right::before {
+    background-image: url("/assets/images/default-skin.svg");
+  }
+
+  .pswp--svg .pswp__button--arrow--left,
+  .pswp--svg .pswp__button--arrow--right {
+    background: none;
+  }
+}
+
+.pswp__button--arrow--left,
+.pswp__button--arrow--right {
+  background: none;
+}
+
+.pswp__button--close {
+  background-position: 0 -44px;
+}
+
+.pswp__button--share {
+  background-position: -44px -44px;
+}
+
+.pswp--fs .pswp__button--fs {
+  background-position: -44px 0;
+}
+
+.pswp__button--zoom {
+  background-position: -88px 0;
+}
+
+.pswp--zoomed-in .pswp__button--zoom {
+  background-position: -132px 0;
+}
+
+.pswp__button--arrow--left::before {
+  background-position: -138px -44px;
+}
+
+.pswp__button--arrow--right::before {
+  background-position: -94px -44px;
+}
+
+.pswp__preloader--active .pswp__preloader__icn {
+  background: url("/assets/images/preloader.gif") 0 0 no-repeat;
+}

assets/css/image/site.css

@@ -0,0 +1,18 @@
+.gh-site {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.gh-site-content {
+  flex-grow: 1;
+  padding: 48px 0 96px;
+}
+
+.gh-main {
+  padding-top: 0;
+}
+
+.gh-feed {
+  width: 100%;
+}

assets/images/default-skin.svg

@@ -0,0 +1 @@
+<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#000"/><g fill="#000"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#000"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#000"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#000"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#000"/><g><path id="Rectangle-11" fill="#000" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#000" stroke-width="1.5"/><path fill="#000" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#000"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#000" stroke-width="1.5"/><path fill="#000" d="M106 21h5v1h-5z"/><path fill="#000" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>

assets/js/common/tabs.js

@@ -1,5 +1,7 @@
 function tabsInNewPage() {
-  var links = document.getElementsByTagName("article")[0].querySelectorAll('a');
+  var links = document.getElementsByTagName("article");
+  if (links.length === 0) return;
+  links = links[0].querySelectorAll('a');
   var a = new RegExp('/' + window.location.host + '/');
   links.forEach(link => !a.test(link.href) && link.setAttribute("target", "_blank"));
 }

assets/js/image/main.js

@@ -0,0 +1,134 @@
+function pswp(container, element, trigger, caption, isGallery) {
+  var parseThumbnailElements = function (el) {
+    var items = [],
+      gridEl,
+      linkEl,
+      item;
+
+    $(el)
+      .find(element)
+      .each(function (i, v) {
+        gridEl = $(v);
+        linkEl = gridEl.find(trigger);
+
+        item = {
+          src: isGallery
+            ? gridEl.find('img').attr('src')
+            : linkEl.attr('href'),
+          w: 0,
+          h: 0,
+        };
+
+        if (caption && gridEl.find(caption).length) {
+          item.title = gridEl.find(caption).html();
+        }
+
+        items.push(item);
+      });
+
+    return items;
+  };
+
+  var openPhotoSwipe = function (index, galleryElement) {
+    var pswpElement = document.querySelectorAll('.pswp')[0],
+      gallery,
+      options,
+      items;
+
+    items = parseThumbnailElements(galleryElement);
+
+    options = {
+      closeOnScroll: false,
+      history: false,
+      index: index,
+      shareEl: false,
+      showAnimationDuration: 0,
+      showHideOpacity: true,
+    };
+
+    gallery = new PhotoSwipe(
+      pswpElement,
+      PhotoSwipeUI_Default,
+      items,
+      options
+    );
+
+    gallery.listen('gettingData', function (index, item) {
+      if (item.w < 1 || item.h < 1) {
+        var img = new Image();
+        img.onload = function () {
+          item.w = this.width;
+          item.h = this.height;
+          gallery.updateSize(true);
+        };
+        img.src = item.src;
+      }
+    });
+    gallery.init();
+  };
+
+  var onThumbnailsClick = function (e) {
+    e.preventDefault();
+
+    var index = $(e.target)
+      .closest(container)
+      .find(element)
+      .index($(e.target).closest(element));
+    var clickedGallery = $(e.target).closest(container);
+
+    openPhotoSwipe(index, clickedGallery[0]);
+
+    return false;
+  };
+
+  $(container).on('click', trigger, function (e) {
+    onThumbnailsClick(e);
+  });
+}
+
+function feed() {
+  'use strict';
+
+  var grid = document.querySelector('.post-feed');
+  if (!grid) return;
+
+  var masonry;
+
+  imagesLoaded(grid, function () {
+    masonry = new Masonry(grid, {
+      itemSelector: '.grid-item',
+      columnWidth: '.grid-sizer',
+      hiddenStyle: { transform: 'translateY(50px)', opacity: 0 },
+      visibleStyle: { transform: 'translateY(0)', opacity: 1 },
+    });
+
+    masonry.on('layoutComplete', function () {
+      grid.classList.add('initialized');
+    });
+
+    masonry.layout();
+
+    function callback(items, loadNextPage) {
+      imagesLoaded(items, function (loaded) {
+        masonry.appended(items);
+        masonry.layout();
+        loaded.elements.forEach(function (item) {
+          item.style.visibility = 'visible';
+        });
+        loadNextPage();
+      });
+    }
+
+    pagination(true, callback, true);
+  });
+
+  pswp(
+    '.post-feed',
+    '.post',
+    '.post-lightbox',
+    '.post-caption',
+    false
+  );
+}
+
+feed();

author.hbs

@@ -40,5 +40,9 @@
     </section>
     {{/author}}
 
+    {{#match @custom.mode "Text-based"}}
     {{> text/feed}}
+    {{else}}
+    {{> image/feed}}
+    {{/match}}
     </main>

default.hbs

@@ -7,7 +7,11 @@
     <title>{{meta_title}}</title>
 
     {{> common/lib/header/fonts}}
+    {{#match @custom.mode "Text-based"}}
     <link rel="stylesheet" href="{{asset "dist/text/main.css"}}">
+    {{else}}
+    <link rel="stylesheet" href="{{asset "dist/image/main.css"}}">
+    {{/match}}
     {{> common/lib/header/prism}}
 
     {{ghost_head}}
@@ -31,7 +35,13 @@
     {{> common/pswp}}
 
     {{> common/lib/footer/tocbot}}
+    {{#match @custom.mode "Text-based"}}
     <script src="{{asset "dist/text/main.min.js"}}"></script>
+    {{else}}
+    {{> image/lib/footer/jquery}}
+    {{> image/lib/footer/masonry}}
+    <script src="{{asset "dist/image/main.min.js"}}"></script>
+    {{/match}}
     {{> common/lib/footer/prism}}
 
     {{ghost_foot}}

gulpfile.js

@@ -54,8 +54,8 @@ const js = (variant) => (done) => {
     ], done);
 }
 
-const allCss = parallel(css('text'));
-const allJs = parallel(js('text'));
+const allCss = parallel(css('text'), css('image'));
+const allJs = parallel(js('text'), js('image'));
 
 const zipper = (done) => {
     const filename = require('./package.json').name + '.zip';

index.hbs

@@ -1,7 +1,7 @@
-{{!< default}} <main id="gh-main" class="gh-main gh-outer">
-    <div class="gh-inner">
-        <div class="gh-canvas">
-            {{> text/feed}}
-        </div>
-    </div>
+{{!< default}} <main id="gh-main" class="gh-main{{#match @custom.mode "Text-based"}} gh-canvas{{/match}}">
+    {{#match @custom.mode "Text-based"}}
+    {{> text/feed}}
+    {{else}}
+    {{> image/feed}}
+    {{/match}}
     </main>

package.json

@@ -65,6 +65,14 @@
           "Elegant serif"
         ],
         "default": "Modern sans-serif"
+      },
+      "mode": {
+        "type": "select",
+        "options": [
+          "Text-based",
+          "Image-based"
+        ],
+        "default": "Text-based"
       }
     }
   },

partials/common/pswp.hbs

@@ -38,4 +38,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>

partials/icons/maximize.hbs

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="15 3 21 3 21 9"></polyline>
+    <polyline points="9 21 3 21 3 15"></polyline>
+    <line x1="21" y1="3" x2="14" y2="10"></line>
+    <line x1="3" y1="21" x2="10" y2="14"></line>
+</svg>

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}}

partials/text/feed.hbs

@@ -1,21 +1,5 @@
 <div class="post-feed gh-feed">
     {{#foreach posts}}
-    <article class="gh-card {{post_class}}">
-        <a class="gh-card-link" href="{{url}}">
-            <header class="gh-card-header">
-                <h2 class="gh-card-title">{{title}}</h2>
-            </header>
-
-            <div class="gh-card-excerpt">{{excerpt}}</div>
-
-            <footer class="gh-card-meta">
-                <time class="gh-card-date" datetime="{{date format=" YYYY-MM-DD"}}">{{date}}</time>
-                <span class="gh-card-duration">{{reading_time}}</span>
-                {{^has visibility="public"}}
-                {{> icons/star}}
-                {{/has}}
-            </footer>
-        </a>
-    </article>
+    {{> text/loop}}
     {{/foreach}}
 </div>

partials/text/loop.hbs

@@ -0,0 +1,17 @@
+<article class="gh-card {{post_class}}">
+  <a class="gh-card-link" href="{{url}}">
+    <header class="gh-card-header">
+      <h2 class="gh-card-title">{{title}}</h2>
+    </header>
+
+    <div class="gh-card-excerpt">{{excerpt}}</div>
+
+    <footer class="gh-card-meta">
+      <time class="gh-card-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
+      <span class="gh-card-duration">{{reading_time}}</span>
+      {{^has visibility="public"}}
+      {{> icons/star}}
+      {{/has}}
+    </footer>
+  </a>
+</article>

partials/text/more.hbs

@@ -2,7 +2,7 @@
     <div class="gh-navigation-previous">
         {{#prev_post}}
         <a class="gh-navigation-link" href="{{url}}">
-            <span class="gh-navigation-label">{{> icons/arrow-left}} Previous issue</span>
+            <span class="gh-navigation-label">{{> icons/arrow-left}} Previous post</span>
             <h4 class="gh-navigation-title">{{title}}</h4>
         </a>
         {{/prev_post}}
@@ -13,7 +13,7 @@
     <div class="gh-navigation-next">
         {{#next_post}}
         <a class="gh-navigation-link" href="{{url}}">
-            <span class="gh-navigation-label">Next issue {{> icons/arrow-right}}</span>
+            <span class="gh-navigation-label">Next post {{> icons/arrow-right}}</span>
             <h4 class="gh-navigation-title">{{title}}</h4>
         </a>
         {{/next_post}}

post.hbs

@@ -3,6 +3,7 @@
     {{#post}}
 
     <article class="gh-article {{post_class}}">
+
         <header class="gh-article-header gh-canvas">
             <h1 class="gh-article-title">{{title}}</h1>
 
@@ -27,12 +28,16 @@
 
         {{> common/comments}}
 
-        <footer
-            class="gh-article-footer gh-canvas{{#unless @member}} no-border{{/unless}}{{#unless access}} no-border{{/unless}}">
+        <footer class="gh-article-footer{{#match @custom.mode "Text-based"}} gh-canvas{{/match}}{{#unless @member}}
+            no-border{{/unless}}{{#unless access}} no-border{{/unless}}">
+            {{#match @custom.mode "Text-based"}}
             {{> text/more}}
+            {{else}}
+            {{> image/more}}
+            {{/match}}
         </footer>
-    </article>
 
+    </article>
     {{/post}}
 
     </main>

tag.hbs

@@ -17,5 +17,9 @@
     </section>
     {{/tag}}
 
+    {{#match @custom.mode "Text-based"}}
     {{> text/feed}}
+    {{else}}
+    {{> image/feed}}
+    {{/match}}
     </main>