.

2025-12-06 22:02:31 +00:00
parent 25b80f5dea
commit aa4baae500
6 changed files with 14 additions and 11 deletions
@@ -3,8 +3,8 @@
  <div style="padding:8px; display:flex; gap:8px; justify-content:flex-end;"></div>
  <div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; height:200px; position:relative; overflow:hidden;">
    {# Print fallback: actual <img> element that is hidden on screen but shown by `printable.html` via its print stylesheet. #}
-    {% if card.background and card.background.image %}
-      <img class="print-hero-bg" src="{{ card.background.image.url }}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
+    {% if card.background and card.background.image or background and background.image %}
+      <img class="print-hero-bg" src="{% if card.background and card.background.image %}{{ card.background.image.url }}{% else %}{{ background.image.url }}{% endif %}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
    {% endif %}
    {% if card.image %}
      <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:180px; z-index:1;">
@@ -1,8 +1,8 @@
 {# Shared inner fragment for Design 2 - core card markup only #}
 <div class="toptrump-card design-2" style="border-radius:6px; overflow:hidden; background:#111; color:#eee;">
  <div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; height:220px; filter:brightness(0.7); position:relative; overflow:hidden;">
-    {% if card.background and card.background.image %}
-      <img class="print-hero-bg" src="{{ card.background.image.url }}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
+    {% if card.background and card.background.image or background and background.image %}
+      <img class="print-hero-bg" src="{% if card.background and card.background.image %}{{ card.background.image.url }}{% else %}{{ background.image.url }}{% endif %}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
    {% endif %}
    {% if card.image %}
      <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:200px; border-radius:6px; box-shadow:0 8px 20px rgba(0,0,0,0.6); z-index:1;">
@@ -1,8 +1,8 @@
 {# Shared inner fragment for Design 3 - core card markup only #}
 <div class="toptrump-card design-3" style="border-radius:10px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.14);">
  <div class="hero-image" style="background-image: linear-gradient(120deg,#ff7a18, #af002d), url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; height:200px; filter:brightness(0.9); position:relative; overflow:hidden;">
-    {% if card.background and card.background.image %}
-      <img class="print-hero-bg" src="{{ card.background.image.url }}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
+    {% if card.background and card.background.image or background and background.image %}
+      <img class="print-hero-bg" src="{% if card.background and card.background.image %}{{ card.background.image.url }}{% else %}{{ background.image.url }}{% endif %}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
    {% endif %}
    {% if card.image %}
      <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:160px; border-radius:8px; z-index:1;">
@@ -11,8 +11,8 @@
      </div>
    </div>
    <div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size: {{ card.background_image_scale }}; background-position:center; flex:1; position:relative; padding:8px; overflow:hidden;">
-      {% if card.background and card.background.image %}
-        <img class="print-hero-bg" src="{{ card.background.image.url }}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
+      {% if card.background and card.background.image or background and background.image %}
+        <img class="print-hero-bg" src="{% if card.background and card.background.image %}{{ card.background.image.url }}{% else %}{{ background.image.url }}{% endif %}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
      {% endif %}
      <div style="position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:3; width:84%; max-width:420px;">
        <div style="background:rgba(0,0,0,0.55); padding:6px 10px; border-radius:999px; color:#fff; display:flex; align-items:center; justify-content:center;">
@@ -1,7 +1,7 @@
 {# Shared inner fragment for Design 5 - core card markup only #}
 <div class="toptrump-card design-5" style="border-radius:6px; overflow:hidden; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,0.08); position:relative;">
-  {% if card.background and card.background.image %}
-    <img class="print-hero-bg" src="{{ card.background.image.url }}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
+  {% if card.background and card.background.image or background and background.image %}
+    <img class="print-hero-bg" src="{% if card.background and card.background.image %}{{ card.background.image.url }}{% else %}{{ background.image.url }}{% endif %}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
  {% endif %}
  <div style="padding:14px; display:flex; align-items:center; gap:12px;">
    <div style="flex:1">
@@ -119,7 +119,10 @@
                {% include 'cards/_card_inner_design5.html' %}
              {% else %}
                <div class="toptrump-card design-{{ design }}">
-                  <div class="hero-image" style="background:{% if card.background and card.background.image %}url('{{ card.background.image.url }}'){% endif %}; background-size:cover; background-position:center">
+                  <div class="hero-image" style="background:{% if card.background and card.background.image %}url('{{ card.background.image.url }}'){% elif background and background.image %}url('{{ background.image.url }}'){% endif %}; background-size:cover; background-position:center">
+                    {% if card.background and card.background.image or background and background.image %}
+                      <img class="print-hero-bg" src="{% if card.background and card.background.image %}{{ card.background.image.url }}{% else %}{{ background.image.url }}{% endif %}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
+                    {% endif %}
                    {% if card.image %}
                      <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}">
                    {% endif %}