source: Klonkt/src/views/partials/post-tile.ejs@ 457e87b

<%
// Square Instagram-style tile for the .feed-grid view (v9 pattern).
//   - With cover  → background-image, dark gradient overlay reveals title on hover/touch
//   - No cover    → .grid-tile-gradient with the title centered (random hue per tile)
const _tileHue = ((post.id || post.slug || '0').charCodeAt(0) * 7) % 360;
const _isPinned = !!post.pinned;
const _isBoost = !!post.isBoost;
const _hasCover = !!post.cover_image_url || !!post.cover_video_url;
// A C2S post carries its media IN the content (a cover next to it showed the
// video twice on the post page). The tile derives its picture from the
// content instead, like the Cirkel card: first <video> (with its poster) or
// first <img>.
let _cVideo = null, _cPoster = null, _cImg = null, _cAudio = false, _cWave = null;
if (!_hasCover && post.content) {
  const vm = String(post.content).match(/<video[^>]*\ssrc="([^"]+)"[^>]*>/i);
  if (vm) { _cVideo = vm[1]; const pm = vm[0].match(/poster="([^"]+)"/i); if (pm) _cPoster = pm[1]; }
  else {
    const im = String(post.content).match(/<img[^>]*\ssrc="([^"]+)"/i);
    if (im) _cImg = im[1];
    else {
      // An audio post (Robins vraag, 30-7): the waveform the upload leg drew
      // (data-poster) goes OVER the gradient, so the tile keeps its own hue.
      const am = String(post.content).match(/<audio[^>]*>/i);
      if (am) { _cAudio = true; const wm = am[0].match(/data-poster="([^"]+)"/i); if (wm) _cWave = wm[1]; }
    }
  }
}
const _showCover = _hasCover || !!_cVideo || !!_cImg;   // the wave keeps the gradient
// A C2S post has no title: fall back to the post's own words, and for a
// media-only post to a friendly type label instead of "(untitled)". A tile
// that already shows its picture needs no forced label at all.
let _title = post.title || '';
if (!_title && post.content) {
  const _txt = String(post.content).replace(/<[^>]*>/g, ' ').replace(/&[a-zA-Z#0-9]+;/g, ' ').replace(/\s+/g, ' ').trim();
  if (_txt) _title = _txt.length > 64 ? _txt.slice(0, 63).replace(/\s+\S*$/, '') + '…' : _txt;
}
if (!_title) _title = _cAudio ? '♪ audio' : (_cVideo || _cImg) ? '' : '(untitled)';
const _typeLabel = (post.type && post.type !== 'post') ? post.type : '';
const _src = post.source_name || '';   // bron-site (cirkel-feed: van welke site komt deze post)
const _base = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
const _external = post.external_url || null;
const _href = _external || (_base + '/' + post.slug);
const _ext = !!_external;
%>
<a class="grid-tile<%= _showCover ? '' : ' grid-tile-gradient' %><%= _cWave ? ' grid-tile-audio' : '' %><%= (_isPinned || _isBoost) ? ' is-pinned' : '' %><%= post.nsfw ? ' nsfw-media' : '' %>"
   href="<%= _href %>"
   style="--tile-hue: <%= _tileHue %>;"
   <% if (_ext) { %>target="_blank" rel="noopener"<% } else { %>hx-get="<%= _href %>?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="<%= _href %>" hx-indicator="#pcms-loading"<% } %>>

  <% if (post.cover_image_url) { %><img class="grid-tile-img" src="<%= thumb(post.cover_image_url, 480) %>" alt="" loading="lazy" decoding="async"<% if (post.cover_video_url) { %> data-ios-mp4="<%= post.cover_video_url %>"<% } %>><% } else if (post.cover_video_url) { %><video class="grid-tile-img" src="<%= post.cover_video_url %>" poster="<%= thumb(post.cover_video_url, 480) %>" autoplay loop muted playsinline></video><% } else if (_cVideo) { %><video class="grid-tile-img" src="<%= _cVideo %>"<% if (_cPoster) { %> poster="<%= _cPoster %>"<% } %> autoplay loop muted playsinline preload="metadata"></video><% } else if (_cImg) { %><img class="grid-tile-img" src="<%= _cImg %>" alt="" loading="lazy" decoding="async"><% } else if (_cWave) { %><img class="grid-tile-img grid-tile-wave" src="<%= _cWave %>" alt="" loading="lazy" decoding="async"><% } %>

  <% if (_typeLabel) { %>
    <span class="grid-tile-type"><%= _typeLabel %></span>
  <% } %>
  <% if (_isBoost) { %>
    <span class="grid-tile-pin grid-tile-boost"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m17 2 4 4-4 4"/><path d="M3 11v-1a4 4 0 0 1 4-4h14"/><path d="m7 22-4-4 4-4"/><path d="M21 13v1a4 4 0 0 1-4 4H3"/></svg>Boost</span>
  <% } else if (_isPinned) { %>
    <span class="grid-tile-pin"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg>Pinned</span>
  <% } %>

  <% if (_hasCover) { %>
    <div class="grid-tile-overlay">
      <strong><%= _title %></strong>
      <% if (_src) { %><span class="grid-tile-overlay-src">van <%= _src %></span><% } %>
    </div>
  <% } else { %>
    <span class="grid-tile-title"><%= _title %></span>
    <% if (_src) { %><span class="grid-tile-gradient-src">van <%= _src %></span><% } %>
  <% } %>
  <% if (post.nsfw) { %><div class="nsfw-veil"><%- include('nsfw-veil', { cw: post.content_warning }) %></div><% } %>
</a>