A.3 my_sign.html image-rendering — first visible surface — TDD. Sprint A.3 of [[project-image-based-deck-face-rendering]]. When the user's equipped deck has has_card_images=True (Minchiate Fiorentine 1860-1890 today), the saved-sig stage card on /billboard/my-sign/ renders as an <img> over the irregular-shape transparent PNG with a contour-following arcana-colored stroke — not the text fan-card scaffold. First of 6 surfaces in the image-rendering rollout (my_sea + both billboard applets + room + game_kit follow in A.5+). New TarotCard.image_url property (consumes A.2's image_filename + DeckVariant.has_card_images + django.templatetags.static.static() to produce a full static-asset URL) — empty string when has_card_images=False so legacy text-only decks (Earthman, RWS) pass through transparently. my_sign.html picker grid .sig-card elements gain data-image-url + data-arcana-key attrs (the latter for stroke-color CSS selection); the .sig-stage-card scaffold gains a hidden <img class="sig-stage-card-img"> slot that JS swaps visible when image-mode is active. stage-card.js extends fromDataset to read image_url + arcana_key; new _setImageMode(stageCard, card) toggles the .sig-stage-card--image marker class + sets data-arcana-key on the stage card + populates the img src/alt; called from populateCard so all existing sig-stage flows pick up image rendering automatically (text-mode decks still pass through since image_url is empty). SCSS: new .sig-stage-card.sig-stage-card--image rule hides the .fan-card-corner + .fan-card-face text scaffold, strips the rectangular border/padding, and applies a 4-cardinal-direction filter: drop-shadow() stack to the <img> so the stroke FOLLOWS the alpha contour of the PNG instead of tracing a rectangular bounding box (per user spec 2026-05-25 PM clarification — early draft used a rectangular border which doesn't match the irregular-card aesthetic). Stroke color is driven by a CSS custom prop --img-stroke-color defaulting to rgba(var(--quiUser), 1) (cream — minor + middle arcana); [data-arcana-key="MAJOR"] override flips it to rgba(var(--terUser), 1) (gold) per Q2 lock. mobile-safe — filter on raster images works cross-browser (the [[feedback-mobile-svg-glow]] dead-end was specifically SVG glow, not raster drop-shadows). New _seed_minchiate_image_fixtures() helper in functional_tests/sig_page.py re-seeds the minimal Minchiate fixture (DeckVariant + Il Matto + Papa Uno) needed for image FTs after TransactionTestCase's flush wipes migration data — mirrors the existing _seed_earthman_sig_pile pattern per [[feedback-transactiontestcase-flush]]. New MySignImageRenderingTest.test_saved_sig_renders_as_img_for_image_deck FT seeds Minchiate + creates a superuser test gamer (superuser auto-gets super-nomad + super-schizo Notes via the User post_save signal, which _filter_major_unlocks then lets through to expose Il Matto in the picker grid — otherwise Minchiate's sig pool is empty since it has no MIDDLE arcana cards), equips Minchiate, saves Il Matto as sig, visits /billboard/my-sign/, asserts the stage card displays + contains an <img> w. src ending in the v2-convention filename minchiate-fiorentine-1860-1890-trumps-00-il-matto.png + carries .sig-stage-card--image marker class. Out of scope for this commit (deferred to A.3 follow-up polish + A.5+): the full stat-block restructure (top-left rank+suit chip Q♥ inline w. EMANATION/REVERSAL header; title in arcana-color font; keyword reposition; FYI panel re-anchor — per the locked Q3 spec) — image card-face ships now w. the existing stat-block layout to land the visible-win first. Tests: 1 new FT green; 15/15 my_sign FT class green (no regression on the 14 existing tests); 1289/1289 IT+UT total green (68s, unchanged from A.2 since no new ITs in this commit — FT covers the wiring end-to-end). Sprint A backend foundation (A.0+A.1+A.2) + first visible surface (A.3) all landed; 5 surfaces remain (A.5-A.8 + A.4's card-deck icon)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/apps/epic/models.py

@@ -511,6 +511,19 @@ class TarotCard(models.Model):
             return ""
         return self.deck_variant.suit_display(self.suit)
 
+    @property
+    def image_url(self):
+        """Full static-asset URL for the card image, or empty string if the
+        deck has no images (legacy text-only mode). Constructed via Django's
+        `static` helper so STATIC_URL prefix + manifest-versioning (when
+        WhiteNoise compressed manifest is active) flow through."""
+        if not self.deck_variant.has_card_images:
+            return ""
+        from django.templatetags.static import static
+        return static(
+            f"apps/epic/images/cards-faces/{self.deck_variant.slug}/{self.image_filename}"
+        )
+
     @property
     def cautions_json(self):
         import json

src/apps/epic/static/apps/epic/stage-card.js

@@ -47,6 +47,14 @@ var StageCard = (function () {
             // Word(s) inside any title slot to wrap in <em> at render time
             // (e.g. "Stalking" for trumps 19-21). Blank for most cards.
             italic_word:        el.dataset.italicWord        || '',
+            // Sprint A.3 — image-rendering mode. When `image_url` is non-empty,
+            // the stage card renders an <img> instead of the text fan-card
+            // scaffold (transparent-bg PNG over arcana-colored border per
+            // [[project-image-based-deck-face-rendering]]). `arcana_key` is the
+            // canonical model code (MAJOR/MINOR/MIDDLE) used to pick the
+            // border-color CSS var (--terUser for major, --quiUser for the rest).
+            image_url:          el.dataset.imageUrl          || '',
+            arcana_key:         el.dataset.arcanaKey         || '',
         };
     }
 
@@ -99,11 +107,42 @@ var StageCard = (function () {
         return '';
     }
 
+    // Toggle image-mode on the stage card. When `card.image_url` is non-empty,
+    // show the <img.sig-stage-card-img> child + add .sig-stage-card--image
+    // marker class (CSS hides the text fan-card-* children + applies the
+    // arcana-colored border). When image_url is empty (legacy text-only
+    // decks: Earthman, RWS pre-images), strip the marker + hide the <img>
+    // so the text scaffold takes over. Sprint A.3 of
+    // [[project-image-based-deck-face-rendering]].
+    function _setImageMode(stageCard, card) {
+        if (!stageCard) return;
+        var img = stageCard.querySelector('.sig-stage-card-img');
+        if (card.image_url) {
+            stageCard.classList.add('sig-stage-card--image');
+            if (card.arcana_key) {
+                stageCard.setAttribute('data-arcana-key', card.arcana_key);
+            }
+            if (img) {
+                img.src = card.image_url;
+                img.alt = card.name_title || '';
+                img.style.display = '';
+            }
+        } else {
+            stageCard.classList.remove('sig-stage-card--image');
+            stageCard.removeAttribute('data-arcana-key');
+            if (img) {
+                img.style.display = 'none';
+                img.removeAttribute('src');
+            }
+        }
+    }
+
     // Paint the stage-card's upright + reversal faces from a normalized card
     // object + the active polarity ('levity' | 'gravity'). Reversal-qualifier
     // falls back to the current polarity's qualifier when blank (6F behavior).
     function populateCard(stageCard, card, polarity) {
         if (!stageCard) return;
+        _setImageMode(stageCard, card);
         var isLevity  = polarity === 'levity';
         var qualifier = isLevity ? (card.levity_qualifier || '') : (card.gravity_qualifier || '');
         var isMajor   = _isMajor(card);