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)