From 2f7d3854785eabbcdefdca91060399dd60017db9 Mon Sep 17 00:00:00 2001
From: Jon Froehlich <jonf@cs.uw.edu>
Date: Mon, 22 Jun 2026 12:34:08 -0700
Subject: [PATCH] feat(publications): poster/talk preview popover with download
 actions (#840)

Hovering or clicking a publication's "Poster"/"Talk" link now opens a
Cite-style card showing the artifact thumbnail plus download actions
(PDF, the raw file e.g. PPTX, and the editable Source link), each with
file size. The card opens on hover (mouse) and on click/Enter/tap, moves
focus in and traps Tab while open, and closes on Escape/outside-click, so
it works for mouse, keyboard, and touch alike. It degrades to the plain
direct-to-PDF link when the artifact has no thumbnail.

Also adds safe pdf_file_size/raw_file_size properties on Artifact: the
size is read from storage at render time, which raises FileNotFoundError
when a file is missing on disk. The card renders that size for every
entry on a listing, so a single missing file used to 500 the whole
/publications/ page; it now degrades to "no size shown" instead.

- snippets/artifact_preview_link.html: reusable trigger + inert <template> card
- thumbnailPreview.js: interactive popover (hover + click-to-pin, focus mgmt)
- publications.css: card / action-row styling (reuses Bootstrap .popover)
- wired the script into the 5 pages that render the publication snippet
- tests: website/tests/test_thumbnail_preview.py

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 website/models/artifact.py                    |  33 ++
 website/static/website/css/publications.css   |  73 +++-
 website/static/website/js/thumbnailPreview.js | 380 ++++++++++++++++++
 .../snippets/artifact_preview_link.html       |  96 +++++
 .../snippets/display_pub_snippet.html         |  16 +-
 website/templates/website/awards.html         |   1 +
 website/templates/website/index.html          |   1 +
 website/templates/website/member.html         |   1 +
 website/templates/website/project.html        |   1 +
 website/templates/website/publications.html   |   1 +
 website/tests/test_thumbnail_preview.py       | 159 ++++++++
 11 files changed, 749 insertions(+), 13 deletions(-)
 create mode 100644 website/static/website/js/thumbnailPreview.js
 create mode 100644 website/templates/snippets/artifact_preview_link.html
 create mode 100644 website/tests/test_thumbnail_preview.py

diff --git a/website/models/artifact.py b/website/models/artifact.py
index 1a2f9181..3eacd138 100644
--- a/website/models/artifact.py
+++ b/website/models/artifact.py
@@ -106,6 +106,39 @@ def raw_file_label(self):
             return None
         return self.RAW_FILE_LABELS.get(ext, ext.lstrip('.').upper())
 
+    @staticmethod
+    def _safe_file_size(file_field):
+        """
+        Size of a FileField's file in bytes, or None if there is no file or it
+        can't be read.
+
+        Reading ``FieldFile.size`` hits storage (a stat) and raises
+        ``FileNotFoundError`` when the file has gone missing on disk — which
+        happens in practice on the servers (the fuzzy ``serve_pdf`` view exists
+        precisely because publication files get renamed/removed). The public
+        preview card (#840) reads these sizes at render time for every card on
+        a listing, so a single missing file must degrade to "no size shown"
+        rather than 500 the whole page.
+        """
+        if not file_field:
+            return None
+        try:
+            return file_field.size
+        except (OSError, ValueError):
+            return None
+
+    @property
+    def pdf_file_size(self):
+        """Size of ``pdf_file`` in bytes, or None if empty/missing. See
+        :meth:`_safe_file_size`."""
+        return self._safe_file_size(self.pdf_file)
+
+    @property
+    def raw_file_size(self):
+        """Size of ``raw_file`` in bytes, or None if empty/missing. See
+        :meth:`_safe_file_size`."""
+        return self._safe_file_size(self.raw_file)
+
     def __str__(self):
         if self.id and self.authors.exists():          
             return "{}, '{}', {} {}".format(self.get_first_author_last_name(), self.title, self.forum_name, self.date)
diff --git a/website/static/website/css/publications.css b/website/static/website/css/publications.css
index 2d3efc41..a65b651c 100644
--- a/website/static/website/css/publications.css
+++ b/website/static/website/css/publications.css
@@ -684,4 +684,75 @@
   border-width: 2px;
   border-color: var(--color-primary);
   font-weight: var(--font-weight-medium);
-}
\ No newline at end of file
+}
+/* ============================================================================
+   ARTIFACT PREVIEW CARD (#840)
+   ============================================================================
+   Poster / Talk preview popover opened by thumbnailPreview.js: a thumbnail
+   plus download actions (PDF, raw file, Source). It reuses Bootstrap's
+   `.popover` base class (border, shadow, arrow); the rules below size the card
+   and style its contents. */
+
+.artifact-preview-popover {
+  /* Compact card. Talk slides are landscape, so width drives the size; keep it
+     modest. Posters (often portrait) are bounded by the image max-height. */
+  max-width: 272px;
+  /* Bootstrap sets .popover { display: none }; the JS reveals it. Keep it
+     above page chrome but below modals. */
+  z-index: 1060;
+}
+
+.artifact-preview-popover .popover-content {
+  padding: 6px;
+}
+
+.artifact-preview-image-link {
+  display: block;
+  cursor: pointer;
+}
+
+.artifact-preview-image {
+  display: block;
+  width: 100%;
+  height: auto;
+  /* Never let a tall poster run past the viewport. */
+  max-height: 45vh;
+  object-fit: contain;
+  border-radius: var(--border-radius-sm, 3px);
+}
+
+.artifact-preview-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-top: 6px;
+}
+
+.artifact-preview-action {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 8px;
+  border-radius: var(--border-radius-sm, 3px);
+  color: var(--color-text-primary);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.artifact-preview-action:hover,
+.artifact-preview-action:focus {
+  background-color: var(--color-bg-muted, #f0f0f0);
+  text-decoration: none;
+}
+
+.artifact-preview-action:focus-visible {
+  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, #1b6ec2);
+  outline-offset: var(--focus-ring-offset, 2px);
+}
+
+/* File size, pushed to the trailing edge of each action row. */
+.artifact-preview-size {
+  margin-left: auto;
+  color: var(--color-text-secondary, #666);
+  font-size: 0.85em;
+}
diff --git a/website/static/website/js/thumbnailPreview.js b/website/static/website/js/thumbnailPreview.js
new file mode 100644
index 00000000..0352e047
--- /dev/null
+++ b/website/static/website/js/thumbnailPreview.js
@@ -0,0 +1,380 @@
+/**
+ * ============================================================================
+ * ARTIFACT PREVIEW POPOVER MODULE
+ * ============================================================================
+ *
+ * Opens a small card previewing a publication's poster / talk-slides thumbnail
+ * plus download actions (PDF, the raw file e.g. PPTX, and the editable Source
+ * link). Implements issue #840.
+ *
+ * The trigger is the "Poster" / "Talk" link rendered by
+ * snippets/artifact_preview_link.html. Behavior mirrors the Cite popover
+ * (citationPopoverSimple.js):
+ *
+ *   - MOUSE: hovering the trigger opens the card (a passive glance that
+ *     auto-closes when the pointer leaves). Clicking PINS it open so the user
+ *     can interact without holding hover.
+ *   - KEYBOARD: Enter/Space activates the trigger (a click), which opens and
+ *     pins the card and moves focus to its first action. Focus is kept within
+ *     the card while pinned; Escape closes it and restores focus to the trigger.
+ *   - TOUCH: there is no hover, so a tap just opens (pins) the card — the same
+ *     accessible path as keyboard.
+ *
+ * The trigger keeps `href` pointing at the PDF, so with JS disabled it still
+ * works as a plain download link (progressive enhancement).
+ *
+ * The card's HTML lives in a per-trigger <template>, which is inert until we
+ * clone it into the DOM on open — so the preview <img> is only fetched when the
+ * card is shown (lazy), even on a page listing dozens of publications.
+ *
+ * DEPENDENCIES:
+ *   - None (self-contained vanilla JS). Builds a Bootstrap-3-styled `.popover`
+ *     so the site's existing popover CSS (border, shadow, arrow) applies;
+ *     `.artifact-preview-*` in publications.css styles the card contents.
+ *
+ * DESIGN:
+ *   Self-initializing and fully event-delegated, so triggers injected after
+ *   load (the member page's AJAX "load more", #1110) work with no re-init.
+ *
+ * @version 2.0.0
+ * @author Makeability Lab
+ * ============================================================================
+ */
+(function () {
+  'use strict';
+
+  /* ===========================================================================
+     CONSTANTS
+     =========================================================================== */
+
+  const TRIGGER_SEL = '.artifact-preview-trigger';
+  const FOCUSABLE_SEL =
+    'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+  /** Gap (px) between the trigger and the card (matches Bootstrap's popover). */
+  const GAP = 10;
+  /** Viewport padding (px) used when clamping the card on screen. */
+  const PAD = 8;
+  /** Half the popover arrow's box size (Bootstrap's `.arrow` border-width is 11px). */
+  const ARROW_HALF = 11;
+  /** Delay (ms) before a hover-opened card hides, so the pointer can reach it. */
+  const HIDE_DELAY = 140;
+
+  /* ===========================================================================
+     STATE
+     ===========================================================================
+     Only one card is open at a time. `pinned` is true when it was opened by
+     click/Enter/tap (stays open until Escape / outside-click / re-click) versus
+     hover (auto-closes on mouse-leave). */
+
+  let activeTrigger = null;
+  let activePopover = null;
+  let pinned = false;
+  let hideTimer = null;
+
+  /* ===========================================================================
+     HELPERS
+     =========================================================================== */
+
+  /** True only on devices with a real hovering pointer (excludes touch). */
+  function canHover() {
+    return window.matchMedia && window.matchMedia('(hover: hover)').matches;
+  }
+
+  function cancelHide() {
+    if (hideTimer) {
+      clearTimeout(hideTimer);
+      hideTimer = null;
+    }
+  }
+
+  /** The <template> holding a trigger's card markup. */
+  function getTemplate(trigger) {
+    const wrapper = trigger.closest('.artifact-preview');
+    return wrapper
+      ? wrapper.querySelector('template.artifact-preview-template')
+      : null;
+  }
+
+  function getFocusables(root) {
+    return Array.prototype.slice.call(root.querySelectorAll(FOCUSABLE_SEL));
+  }
+
+  /**
+   * Builds the card popover for a trigger by cloning its <template> into
+   * Bootstrap-3 popover markup (so the existing `.popover` CSS applies). The
+   * clone is what makes the preview image load — the <template> was inert.
+   *
+   * @param {HTMLElement} trigger - The trigger link
+   * @returns {HTMLElement|null} The `.popover` element, or null if no template
+   */
+  function buildPopover(trigger) {
+    const template = getTemplate(trigger);
+    if (!template) {
+      return null;
+    }
+
+    const popover = document.createElement('div');
+    popover.className = 'popover artifact-preview-popover';
+
+    const arrow = document.createElement('div');
+    arrow.className = 'arrow';
+    popover.appendChild(arrow);
+
+    const content = document.createElement('div');
+    content.className = 'popover-content';
+    content.appendChild(template.content.cloneNode(true));
+    popover.appendChild(content);
+
+    return popover;
+  }
+
+  /**
+   * Positions a rendered card relative to its trigger using Bootstrap's "auto
+   * right" rule: prefer the right side, flip to the left when there isn't room.
+   * Vertically centers on the trigger, clamps to the viewport, and moves the
+   * arrow to keep pointing at the trigger. (Same math as citationPopoverSimple.js.)
+   *
+   * @param {HTMLElement} trigger - The trigger link
+   * @param {HTMLElement} popover - The `.popover` element (already in the DOM)
+   */
+  function positionPopover(trigger, popover) {
+    const rect = trigger.getBoundingClientRect();
+    const scrollX = window.pageXOffset;
+    const scrollY = window.pageYOffset;
+    const viewportWidth = document.documentElement.clientWidth;
+    const viewportHeight = document.documentElement.clientHeight;
+    const width = popover.offsetWidth;
+    const height = popover.offsetHeight;
+
+    const placement =
+      rect.right + GAP + width > viewportWidth ? 'left' : 'right';
+    popover.classList.remove('left', 'right');
+    popover.classList.add(placement);
+
+    const left = placement === 'right'
+      ? rect.right + scrollX
+      : rect.left + scrollX - width;
+
+    const desiredTop = rect.top + scrollY + rect.height / 2 - height / 2;
+    const minTop = scrollY + PAD;
+    const maxTop = scrollY + viewportHeight - height - PAD;
+    const top = Math.max(minTop, Math.min(desiredTop, Math.max(minTop, maxTop)));
+
+    popover.style.left = left + 'px';
+    popover.style.top = top + 'px';
+
+    const arrow = popover.querySelector('.arrow');
+    if (arrow) {
+      const triggerCenterY = rect.top + scrollY + rect.height / 2;
+      const arrowCenter = Math.max(
+        ARROW_HALF + PAD,
+        Math.min(triggerCenterY - top, height - ARROW_HALF - PAD)
+      );
+      arrow.style.top = (arrowCenter - ARROW_HALF) + 'px';
+      arrow.style.marginTop = '0';
+    }
+  }
+
+  /* ===========================================================================
+     OPEN / CLOSE
+     =========================================================================== */
+
+  function removeActive() {
+    if (activePopover) {
+      activePopover.remove();
+    }
+    if (activeTrigger) {
+      activeTrigger.setAttribute('aria-expanded', 'false');
+    }
+    activePopover = null;
+    activeTrigger = null;
+    pinned = false;
+  }
+
+  /**
+   * Opens the card for a trigger.
+   *
+   * @param {HTMLElement} trigger - The trigger link
+   * @param {boolean} pin - Pin it open (click/keyboard/touch) vs. hover-open
+   */
+  function open(trigger, pin) {
+    cancelHide();
+
+    // Already open for this trigger: just upgrade hover-open to pinned, and
+    // move focus in if we are pinning now.
+    if (activeTrigger === trigger && activePopover) {
+      if (pin && !pinned) {
+        pinned = true;
+        focusFirst(activePopover);
+      }
+      return;
+    }
+
+    removeActive();
+
+    const popover = buildPopover(trigger);
+    if (!popover) {
+      return;
+    }
+    // Render hidden first so we can measure it, then position and reveal.
+    popover.style.display = 'block';
+    popover.style.visibility = 'hidden';
+    document.body.appendChild(popover);
+
+    activeTrigger = trigger;
+    activePopover = popover;
+    pinned = !!pin;
+
+    positionPopover(trigger, popover);
+    popover.style.visibility = 'visible';
+    trigger.setAttribute('aria-expanded', 'true');
+
+    if (pin) {
+      focusFirst(popover);
+    }
+  }
+
+  function focusFirst(popover) {
+    const focusables = getFocusables(popover);
+    if (focusables.length) {
+      focusables[0].focus();
+    }
+  }
+
+  /**
+   * Closes the open card.
+   *
+   * @param {boolean} returnFocus - Restore focus to the trigger (for keyboard)
+   */
+  function close(returnFocus) {
+    const trigger = activeTrigger;
+    removeActive();
+    cancelHide();
+    if (returnFocus && trigger) {
+      trigger.focus();
+    }
+  }
+
+  function scheduleHide() {
+    if (pinned) {
+      return;
+    }
+    cancelHide();
+    hideTimer = setTimeout(function () {
+      close(false);
+    }, HIDE_DELAY);
+  }
+
+  /* ===========================================================================
+     EVENT HANDLERS (delegated on document)
+     =========================================================================== */
+
+  function onMouseOver(event) {
+    if (!canHover()) {
+      return;
+    }
+    const trigger = event.target.closest(TRIGGER_SEL);
+    if (trigger) {
+      cancelHide();
+      if (activeTrigger !== trigger) {
+        open(trigger, false);
+      }
+      return;
+    }
+    // Pointer moved onto the open card: keep it open (hoverable).
+    if (activePopover && activePopover.contains(event.target)) {
+      cancelHide();
+    }
+  }
+
+  function onMouseOut(event) {
+    if (!canHover() || pinned || (!activeTrigger && !activePopover)) {
+      return;
+    }
+    const to = event.relatedTarget;
+    const stillOnTrigger = activeTrigger && to && activeTrigger.contains(to);
+    const stillOnPopover = activePopover && to && activePopover.contains(to);
+    if (!stillOnTrigger && !stillOnPopover) {
+      scheduleHide();
+    }
+  }
+
+  function onClick(event) {
+    const trigger = event.target.closest(TRIGGER_SEL);
+    if (trigger) {
+      // Open the card instead of navigating to the PDF (that's available as an
+      // action inside the card). Re-clicking a pinned card closes it.
+      event.preventDefault();
+      if (activeTrigger === trigger && pinned) {
+        close(false);
+      } else {
+        open(trigger, true);
+      }
+      return;
+    }
+    // A click anywhere outside a pinned card closes it. (Action links inside
+    // the card are not triggers and fall through here to navigate normally.)
+    if (pinned && activePopover && !activePopover.contains(event.target)) {
+      close(false);
+    }
+  }
+
+  function onKeyDown(event) {
+    if (!activePopover) {
+      return;
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      close(true);
+      return;
+    }
+    // While pinned, keep Tab focus cycling within the card so keyboard users
+    // can reach every action and can't tab off into the page behind it.
+    if (event.key === 'Tab' && pinned) {
+      const focusables = getFocusables(activePopover);
+      if (!focusables.length) {
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  }
+
+  function reposition() {
+    if (activeTrigger && activePopover) {
+      positionPopover(activeTrigger, activePopover);
+    }
+  }
+
+  /* ===========================================================================
+     INIT
+     =========================================================================== */
+
+  function init() {
+    if (init._done) {
+      return;
+    }
+    init._done = true;
+
+    document.addEventListener('mouseover', onMouseOver);
+    document.addEventListener('mouseout', onMouseOut);
+    document.addEventListener('click', onClick);
+    document.addEventListener('keydown', onKeyDown);
+    window.addEventListener('resize', reposition);
+    window.addEventListener('scroll', reposition, { passive: true });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();
diff --git a/website/templates/snippets/artifact_preview_link.html b/website/templates/snippets/artifact_preview_link.html
new file mode 100644
index 00000000..f0d2b27c
--- /dev/null
+++ b/website/templates/snippets/artifact_preview_link.html
@@ -0,0 +1,96 @@
+{% comment %}
+================================================================================
+ARTIFACT PREVIEW LINK SNIPPET (#840)
+================================================================================
+
+Renders a publication's Poster / Talk download link. When the related artifact
+has a generated thumbnail, the link becomes a popover *trigger* (mirroring the
+Cite popover): hovering (mouse) or clicking / Enter / tapping it opens a small
+card showing the thumbnail plus download actions (PDF, the raw file e.g. PPTX,
+and the editable Source link). Without a thumbnail it degrades to the plain
+direct-to-PDF link it was before.
+
+The card markup lives inside a <template>, which is inert until thumbnailPreview.js
+clones it into the DOM on open — so the preview image is only fetched when the
+card is actually shown (lazy), even on a page listing dozens of publications.
+
+USAGE:
+  {% include 'snippets/artifact_preview_link.html' with artifact=pub.poster label='Poster' label_lower='poster' icon='fa-image' title=pub.title %}
+
+CONTEXT VARIABLES (all required):
+  - artifact:    the Poster or Talk instance (must have a pdf_file)
+  - label:       button text, e.g. "Poster" / "Talk"
+  - label_lower: lowercased phrase for aria-labels, e.g. "poster" / "talk slides"
+  - icon:        Font Awesome icon class, e.g. "fa-image" / "fa-person-chalkboard"
+  - title:       the parent publication's title (for accessible labels)
+
+DEPENDENCIES:
+  - thumbnailPreview.js (open/close/position/focus handling)
+  - publications.css (.artifact-preview-* styles; reuses Bootstrap .popover)
+
+ACCESSIBILITY:
+  - Trigger is role="button" with aria-haspopup="dialog"; aria-expanded is
+    toggled by the JS. The card is a role="dialog" with an accessible name.
+  - On click/Enter, focus moves into the card and is kept within it until close;
+    Escape closes and restores focus to the trigger.
+  - The clickable preview image duplicates the PDF action, so it is tabindex=-1
+    and aria-hidden (the PDF action below is the accessible control).
+================================================================================
+{% endcomment %}
+{% load thumbnail %}
+
+{% if artifact.thumbnail %}{% thumbnail artifact.thumbnail 600x0 detail as preview_img %}{% endif %}
+
+{% if preview_img %}
+<span class="artifact-preview">
+  <a class="artifact-preview-trigger"
+     href="{{ artifact.pdf_file.url }}"
+     role="button"
+     aria-haspopup="dialog"
+     aria-expanded="false"
+     aria-label="{{ label }} options for {{ title }}">
+    <i class="fa-solid {{ icon }}" aria-hidden="true"></i>{{ label }}
+  </a>
+  <template class="artifact-preview-template">
+    <div class="artifact-preview-card" role="dialog" aria-label="{{ label }} for {{ title }}">
+      <a class="artifact-preview-image-link"
+         href="{{ artifact.pdf_file.url }}"
+         tabindex="-1"
+         aria-hidden="true">
+        <img class="artifact-preview-image" src="{{ preview_img.url }}" alt="">
+      </a>
+      <div class="artifact-preview-actions">
+        <a class="artifact-preview-action" href="{{ artifact.pdf_file.url }}">
+          <i class="fa-solid fa-file-pdf" aria-hidden="true"></i>
+          <span class="artifact-preview-action-label">PDF</span>
+          {% if artifact.pdf_file_size %}
+          <span class="artifact-preview-size">{{ artifact.pdf_file_size|filesizeformat }}</span>
+          {% endif %}
+        </a>
+        {% if artifact.raw_file %}
+        <a class="artifact-preview-action" href="{{ artifact.raw_file.url }}">
+          <i class="fa-solid fa-file-arrow-down" aria-hidden="true"></i>
+          <span class="artifact-preview-action-label">{{ artifact.raw_file_label }}</span>
+          {% if artifact.raw_file_size %}
+          <span class="artifact-preview-size">{{ artifact.raw_file_size|filesizeformat }}</span>
+          {% endif %}
+        </a>
+        {% endif %}
+        {% if artifact.external_slides_url %}
+        <a class="artifact-preview-action"
+           href="{{ artifact.external_slides_url }}"
+           target="_blank"
+           rel="noopener">
+          <i class="fa-solid fa-up-right-from-square" aria-hidden="true"></i>
+          <span class="artifact-preview-action-label">Source</span>
+        </a>
+        {% endif %}
+      </div>
+    </div>
+  </template>
+</span>
+{% else %}
+<a href="{{ artifact.pdf_file.url }}" aria-label="Download {{ label_lower }}">
+  <i class="fa-solid {{ icon }}" aria-hidden="true"></i>{{ label }}
+</a>
+{% endif %}
diff --git a/website/templates/snippets/display_pub_snippet.html b/website/templates/snippets/display_pub_snippet.html
index fde553b7..142186c1 100644
--- a/website/templates/snippets/display_pub_snippet.html
+++ b/website/templates/snippets/display_pub_snippet.html
@@ -117,14 +117,10 @@ <h3 class="artifact-title line-clamp" style="margin-top: 0;">{{ pub.title }}</h3
     </a>
     {% endif %}
     {% if pub.talk and pub.talk.pdf_file %}
-    <a href="{{ pub.talk.pdf_file.url }}" aria-label="Download talk slides">
-      <i class="fa-solid fa-person-chalkboard" aria-hidden="true"></i>Talk
-    </a>
+    {% include 'snippets/artifact_preview_link.html' with artifact=pub.talk label='Talk' label_lower='talk slides' icon='fa-person-chalkboard' title=pub.title %}
     {% endif %}
     {% if pub.poster and pub.poster.pdf_file %}
-    <a href="{{ pub.poster.pdf_file.url }}" aria-label="Download poster">
-      <i class="fa-solid fa-image" aria-hidden="true"></i>Poster
-    </a>
+    {% include 'snippets/artifact_preview_link.html' with artifact=pub.poster label='Poster' label_lower='poster' icon='fa-image' title=pub.title %}
     {% endif %}
     {% for project in pub.projects.all %}
     {% if project.can_show_online %}
@@ -251,14 +247,10 @@ <h3 class="artifact-title pub-title">{{ pub.title }}</h3>
       </a>
       {% endif %}
       {% if pub.talk and pub.talk.pdf_file %}
-      <a href="{{ pub.talk.pdf_file.url }}" aria-label="Download talk slides">
-        <i class="fa-solid fa-person-chalkboard" aria-hidden="true"></i>Talk
-      </a>
+      {% include 'snippets/artifact_preview_link.html' with artifact=pub.talk label='Talk' label_lower='talk slides' icon='fa-person-chalkboard' title=pub.title %}
       {% endif %}
       {% if pub.poster and pub.poster.pdf_file %}
-      <a href="{{ pub.poster.pdf_file.url }}" aria-label="Download poster">
-        <i class="fa-solid fa-image" aria-hidden="true"></i>Poster
-      </a>
+      {% include 'snippets/artifact_preview_link.html' with artifact=pub.poster label='Poster' label_lower='poster' icon='fa-image' title=pub.title %}
       {% endif %}
       {% for project in pub.projects.all %}
       {% if project.can_show_online %}
diff --git a/website/templates/website/awards.html b/website/templates/website/awards.html
index 5ee29611..7139cea2 100644
--- a/website/templates/website/awards.html
+++ b/website/templates/website/awards.html
@@ -13,6 +13,7 @@
 {% block external_scripts %}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.18.2/tocbot.js"></script>
 <script src="{% static 'website/js/citationPopoverSimple.js' %}"></script>
+<script src="{% static 'website/js/thumbnailPreview.js' %}"></script>
 {% endblock %}
 
 {% block scripts %}
diff --git a/website/templates/website/index.html b/website/templates/website/index.html
index 954f669e..238f0d5a 100644
--- a/website/templates/website/index.html
+++ b/website/templates/website/index.html
@@ -69,6 +69,7 @@
 
 {% block external_scripts %}
 <script src="{% static 'website/js/citationPopoverSimple.js' %}"></script>
+<script src="{% static 'website/js/thumbnailPreview.js' %}"></script>
 <script src="{% static 'website/js/humanize-duration.js' %}"></script>
 <script src="{% static 'website/js/video-age.js' %}"></script>
 <script type="module" src="{% static 'website/js/makelab-logo.js' %}"></script>
diff --git a/website/templates/website/member.html b/website/templates/website/member.html
index e7b7e87a..7dc0925e 100644
--- a/website/templates/website/member.html
+++ b/website/templates/website/member.html
@@ -85,6 +85,7 @@
 {% block external_scripts %}
 <script src="{% static 'website/js/swap-image.js' %}"></script>
 <script src="{% static 'website/js/citationPopoverSimple.js' %}"></script>
+<script src="{% static 'website/js/thumbnailPreview.js' %}"></script>
 <script src="{% static 'website/js/humanize-duration.js' %}"></script>
 <script src="{% static 'website/js/video-age.js' %}"></script>
 <script src="{% static 'website/js/bio-expand.js' %}"></script>
diff --git a/website/templates/website/project.html b/website/templates/website/project.html
index 0b3bc930..b52f1440 100644
--- a/website/templates/website/project.html
+++ b/website/templates/website/project.html
@@ -93,6 +93,7 @@
 
 {% block external_scripts %}
 <script src="{% static 'website/js/citationPopoverSimple.js' %}"></script>
+<script src="{% static 'website/js/thumbnailPreview.js' %}"></script>
 <script src="{% static 'website/js/humanize-duration.js' %}"></script>
 <script src="{% static 'website/js/video-age.js' %}"></script>
 <script src="{% static 'website/js/project-sidebar-sticky.js' %}"></script>
diff --git a/website/templates/website/publications.html b/website/templates/website/publications.html
index a3c6ef1b..35d2cc95 100644
--- a/website/templates/website/publications.html
+++ b/website/templates/website/publications.html
@@ -12,6 +12,7 @@
 {% block external_scripts %}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.18.2/tocbot.js"></script>
 <script src="{% static 'website/js/citationPopoverSimple.js' %}"></script>
+<script src="{% static 'website/js/thumbnailPreview.js' %}"></script>
 {% endblock %}
 
 {% block scripts %}
diff --git a/website/tests/test_thumbnail_preview.py b/website/tests/test_thumbnail_preview.py
new file mode 100644
index 00000000..5a69d6f4
--- /dev/null
+++ b/website/tests/test_thumbnail_preview.py
@@ -0,0 +1,159 @@
+"""
+Regression tests for the poster / talk preview card wiring (#840).
+
+The open/close/focus behavior lives in
+``static/website/js/thumbnailPreview.js`` (this repo has no JS test harness),
+but the *server-side* markup in ``snippets/artifact_preview_link.html`` decides
+what the card can contain, so that's what we pin here:
+
+  - With a thumbnail, the "Poster"/"Talk" link becomes a popover trigger and a
+    <template> carries the card (image + PDF / raw-file / Source actions).
+  - The raw-file (e.g. PPTX) and Source actions appear only when those fields
+    are set.
+  - Without a thumbnail it degrades to the plain direct-to-PDF link.
+
+Attaching a thumbnail: the factory artifacts carry only a *stub* PDF, so
+``Artifact.save()``'s ImageMagick step can't generate a real thumbnail. We
+write a valid 1x1 GIF straight to storage and point the field at it (bypassing
+the field's ``upload_to``, which is only ever exercised by the PDF generator),
+so easy_thumbnails has a real source for the ``{% thumbnail %}`` tag.
+"""
+
+from django.core.files.base import ContentFile
+from django.core.files.storage import default_storage
+from django.core.files.uploadedfile import SimpleUploadedFile
+from django.template.loader import render_to_string
+
+from website.tests.base import DatabaseTestCase
+from website.tests.factories import PosterFactory, _GIF_1PX
+
+
+class ArtifactPreviewCardTests(DatabaseTestCase):
+    def _render(self, pub, orientation=None):
+        ctx = {"pub": pub, "MEDIA_URL": "/media/"}
+        if orientation:
+            ctx["orientation"] = orientation
+        return render_to_string("snippets/display_pub_snippet.html", ctx)
+
+    def _attach_thumbnail(self, artifact):
+        """
+        Give ``artifact`` a real (1x1 GIF) thumbnail without re-running
+        Artifact.save(): write the file via default storage at the artifact's
+        own thumbnail path, then persist the field name with an UPDATE so
+        easy_thumbnails can open it during template rendering.
+        """
+        rel_path = artifact.get_upload_thumbnail_dir(f"preview_test_{artifact.pk}.gif")
+        saved_name = default_storage.save(rel_path, ContentFile(_GIF_1PX))
+        type(artifact).objects.filter(pk=artifact.pk).update(thumbnail=saved_name)
+        artifact.refresh_from_db()
+        return artifact
+
+    def test_thumbnail_turns_link_into_a_card_trigger(self):
+        author = self.make_person()
+        poster = self._attach_thumbnail(PosterFactory(authors=[author]))
+        pub = self.make_publication(authors=[author], poster=poster)
+
+        html = self._render(pub)
+
+        # Trigger + inert template + dialog card, with the generated thumbnail.
+        self.assertIn("artifact-preview-trigger", html)
+        self.assertIn('aria-haspopup="dialog"', html)
+        self.assertIn("artifact-preview-template", html)
+        self.assertIn('role="dialog"', html)
+        self.assertIn("600x0", html)  # the {% thumbnail %} variant was built
+        # The PDF action and its file size are always present.
+        self.assertIn("artifact-preview-action", html)
+        self.assertIn("artifact-preview-size", html)
+
+    def test_raw_file_adds_a_download_action(self):
+        author = self.make_person()
+        talk = self.make_talk(
+            raw_file=SimpleUploadedFile(
+                "slides.pptx", b"PKstub", content_type="application/octet-stream"
+            )
+        )
+        talk = self._attach_thumbnail(talk)
+        pub = self.make_publication(authors=[author], talk=talk)
+
+        html = self._render(pub)
+
+        self.assertIn("PPTX", html)     # raw_file_label
+        # Links to the raw file. Storage may uniquify the stored name
+        # (slides.pptx -> slides_xxxx.pptx) when the media dir already has one,
+        # so match the extension rather than the exact filename.
+        self.assertIn(".pptx", html)
+
+    def test_source_action_when_external_slides_url_set(self):
+        author = self.make_person()
+        poster = self._attach_thumbnail(
+            PosterFactory(
+                authors=[author],
+                external_slides_url="https://www.figma.com/file/abc/poster",
+            )
+        )
+        pub = self.make_publication(authors=[author], poster=poster)
+
+        html = self._render(pub)
+
+        self.assertIn("Source", html)
+        self.assertIn("https://www.figma.com/file/abc/poster", html)
+        self.assertIn('target="_blank"', html)
+        self.assertIn('rel="noopener"', html)
+
+    def test_plain_link_when_no_thumbnail(self):
+        author = self.make_person()
+        poster = PosterFactory(authors=[author])  # stub PDF → no thumbnail
+        pub = self.make_publication(authors=[author], poster=poster)
+
+        html = self._render(pub)
+
+        # Degrades to the plain download link — no trigger, no card template.
+        self.assertNotIn("artifact-preview-trigger", html)
+        self.assertNotIn("artifact-preview-template", html)
+        self.assertIn(">Poster", html)
+
+    def test_no_poster_link_without_poster(self):
+        author = self.make_person()
+        pub = self.make_publication(authors=[author])
+
+        html = self._render(pub)
+
+        self.assertNotIn(">Poster", html)
+        self.assertNotIn("artifact-preview-trigger", html)
+
+    def test_card_is_wired_in_horizontal_layout_too(self):
+        author = self.make_person()
+        poster = self._attach_thumbnail(PosterFactory(authors=[author]))
+        pub = self.make_publication(authors=[author], poster=poster)
+
+        html = self._render(pub, orientation="horizontal")
+
+        self.assertIn("artifact-preview-trigger", html)
+        self.assertIn("artifact-preview-template", html)
+
+    def test_missing_file_degrades_instead_of_crashing(self):
+        """
+        Reading FileField.size stats the file and raises if it's missing on
+        disk (which happens on the servers). The card renders that size for
+        every entry on a listing, so a missing file must degrade to "no size"
+        rather than 500 the whole page (#840).
+        """
+        author = self.make_person()
+        poster = self._attach_thumbnail(PosterFactory(authors=[author]))
+        # Simulate the PDF having gone missing on disk while the field/thumbnail
+        # still point at it.
+        default_storage.delete(poster.pdf_file.name)
+
+        self.assertIsNone(poster.pdf_file_size)
+
+        pub = self.make_publication(authors=[author], poster=poster)
+        # Must not raise despite the missing file; card + PDF action still show.
+        html = self._render(pub)
+        self.assertIn("artifact-preview-trigger", html)
+        self.assertIn("PDF", html)
+
+    def test_safe_file_size_returns_bytes_when_present(self):
+        poster = PosterFactory()  # stub PDF present on disk
+        self.assertEqual(poster.pdf_file_size, len(b"%PDF-1.4 test"))
+        # No raw_file → None (not a crash).
+        self.assertIsNone(poster.raw_file_size)