@rmdes/indiekit-endpoint-activitypub 2.6.0 → 2.6.2

package/assets/reader-blurhash.js

@@ -0,0 +1,66 @@
+/**
+ * Blurhash placeholder backgrounds for gallery images.
+ *
+ * Extracts the average (DC) color from a blurhash string and applies it
+ * as a background-color on images with a data-blurhash attribute.
+ * This provides a meaningful colored placeholder while images load.
+ *
+ * The DC component is encoded in the first 4 characters of the blurhash
+ * after the size byte, as a base-83 integer representing an sRGB color.
+ */
+
+const BASE83_CHARS =
+  "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~";
+
+function decode83(str) {
+  let value = 0;
+  for (const c of str) {
+    const digit = BASE83_CHARS.indexOf(c);
+    if (digit === -1) return 0;
+    value = value * 83 + digit;
+  }
+  return value;
+}
+
+function decodeDC(value) {
+  return {
+    r: (value >> 16) & 255,
+    g: (value >> 8) & 255,
+    b: value & 255,
+  };
+}
+
+function blurhashToColor(hash) {
+  if (!hash || hash.length < 6) return null;
+  const dcValue = decode83(hash.slice(1, 5));
+  const { r, g, b } = decodeDC(dcValue);
+  return `rgb(${r},${g},${b})`;
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  for (const img of document.querySelectorAll("img[data-blurhash]")) {
+    const color = blurhashToColor(img.dataset.blurhash);
+    if (color) {
+      img.style.backgroundColor = color;
+    }
+  }
+
+  // Handle dynamically loaded images (infinite scroll)
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      for (const node of mutation.addedNodes) {
+        if (node.nodeType !== 1) continue;
+        const imgs = node.querySelectorAll
+          ? node.querySelectorAll("img[data-blurhash]")
+          : [];
+        for (const img of imgs) {
+          const color = blurhashToColor(img.dataset.blurhash);
+          if (color) {
+            img.style.backgroundColor = color;
+          }
+        }
+      }
+    }
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+});

package/assets/reader-links.css

@@ -15,16 +15,16 @@
 .ap-link-preview {
   display: flex;
   overflow: hidden;
-  border-radius: var(--border-radius-small);
-  border: 1px solid var(--color-neutral-lighter);
+  border-radius: 8px;
+  border: 1px solid var(--color-outline);
   background-color: var(--color-offset);
   text-decoration: none;
   color: inherit;
-  transition: border-color 0.2s ease;
+  transition: border-color 0.15s ease;
 }
 
 .ap-link-preview:hover {
-  border-color: var(--color-primary);
+  border-color: var(--color-outline-variant);
 }
 
 /* Text content area (left side) */
@@ -105,7 +105,7 @@
 
 .ap-post-detail__back-link {
   font-size: 0.875rem;
-  color: var(--color-primary);
+  color: var(--color-primary-on-background);
   text-decoration: none;
 }
 
@@ -121,7 +121,7 @@
   letter-spacing: 0.05em;
   margin: var(--space-l) 0 var(--space-s);
   padding-bottom: var(--space-xs);
-  border-bottom: 1px solid var(--color-neutral-lighter);
+  border-bottom: 1px solid var(--color-outline);
 }
 
 .ap-post-detail__main {
@@ -142,7 +142,7 @@
 .ap-post-detail__parents .ap-post-detail__parent-item {
   position: relative;
   padding-left: var(--space-m);
-  border-left: 2px solid var(--color-neutral-lighter);
+  border-left: 2px solid var(--color-outline);
 }
 
 /* Main post highlight */

package/assets/reader.css

@@ -18,7 +18,7 @@
 }
 
 .ap-breadcrumb a {
-  color: var(--color-accent);
+  color: var(--color-primary-on-background);
   text-decoration: none;
 }
 
@@ -115,7 +115,7 @@
 
 .ap-tab--active {
   border-bottom-color: var(--color-primary);
-  color: var(--color-primary);
+  color: var(--color-primary-on-background);
   font-weight: 600;
 }
 
@@ -150,10 +150,11 @@
 .ap-card {
   background: var(--color-offset);
   border: var(--border-width-thin) solid var(--color-outline);
-  border-left: var(--border-width-thickest) solid var(--color-outline);
-  border-radius: var(--border-radius-small);
+  border-left: 3px solid var(--color-outline);
+  border-radius: 8px;
   overflow: hidden;
   padding: var(--space-m);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
   transition:
     box-shadow 0.2s ease,
     border-color 0.2s ease;
@@ -162,6 +163,7 @@
 .ap-card:hover {
   border-color: var(--color-outline-variant);
   border-left-color: var(--color-outline-variant);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
 /* ==========================================================================
@@ -240,7 +242,7 @@
 }
 
 .ap-card__reply-to a {
-  color: var(--color-primary);
+  color: var(--color-primary-on-background);
   text-decoration: none;
 }
 
@@ -263,9 +265,9 @@
   border: var(--border-width-thin) solid var(--color-outline);
   border-radius: 50%;
   flex-shrink: 0;
-  height: 40px;
+  height: 44px;
   object-fit: cover;
-  width: 40px;
+  width: 44px;
 }
 
 .ap-card__avatar--default {
@@ -282,10 +284,12 @@
   display: flex;
   flex-direction: column;
   flex: 1;
+  gap: 1px;
   min-width: 0;
 }
 
 .ap-card__author-name {
+  font-size: 0.95em;
   font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -327,7 +331,7 @@
 .ap-card__timestamp {
   color: var(--color-on-offset);
   flex-shrink: 0;
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-s);
 }
 
 .ap-card__edited {
@@ -345,7 +349,7 @@
 
 .ap-card__timestamp-link:hover {
   text-decoration: underline;
-  color: var(--color-primary);
+  color: var(--color-primary-on-background);
 }
 
 /* ==========================================================================
@@ -374,14 +378,14 @@
 
 .ap-card__content {
   color: var(--color-on-background);
-  line-height: var(--line-height-prose);
+  line-height: calc(4 / 3 * 1em);
   margin-bottom: var(--space-s);
   overflow-wrap: break-word;
   word-break: break-word;
 }
 
 .ap-card__content a {
-  color: var(--color-primary);
+  color: var(--color-primary-on-background);
 }
 
 .ap-card__content p {
@@ -443,7 +447,7 @@
 
 .ap-card__content .h-card a:hover,
 .ap-card__content a.u-url.mention:hover {
-  color: var(--color-primary);
+  color: var(--color-primary-on-background);
   text-decoration: underline;
 }
 
@@ -460,7 +464,7 @@
 }
 
 .ap-card__content a.mention.hashtag:hover {
-  color: var(--color-primary);
+  color: var(--color-primary-on-background);
   text-decoration: underline;
 }
 
@@ -504,7 +508,7 @@
    ========================================================================== */
 
 .ap-card__gallery {
-  border-radius: var(--border-radius-small);
+  border-radius: 6px;
   display: grid;
   gap: 2px;
   margin-bottom: var(--space-s);
@@ -524,9 +528,14 @@
 .ap-card__gallery img {
   background: var(--color-offset-variant);
   display: block;
-  height: 200px;
+  height: 220px;
   object-fit: cover;
   width: 100%;
+  transition: filter 0.2s ease;
+}
+
+.ap-card__gallery-link:hover img {
+  filter: brightness(0.92);
 }
 
 .ap-card__gallery-link--more::after {
@@ -557,7 +566,7 @@
 
 .ap-card__gallery--1 img {
   height: auto;
-  max-height: 400px;
+  max-height: 500px;
 }
 
 /* 2 photos — side by side */
@@ -711,17 +720,17 @@
 }
 
 .ap-card__mention {
-  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
   border-radius: var(--border-radius-large);
-  color: var(--color-accent);
+  color: var(--color-primary-on-background);
   font-size: var(--font-size-s);
   padding: 2px var(--space-xs);
   text-decoration: none;
 }
 
 .ap-card__mention:hover {
-  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
-  color: var(--color-accent);
+  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
+  color: var(--color-primary-on-background);
 }
 
 .ap-card__mention--legacy {
@@ -761,60 +770,86 @@
   border-top: var(--border-width-thin) solid var(--color-outline);
   display: flex;
   flex-wrap: wrap;
-  gap: var(--space-s);
+  gap: 2px;
   padding-top: var(--space-s);
 }
 
 .ap-card__action {
   align-items: center;
   background: transparent;
-  border: var(--border-width-thin) solid var(--color-outline);
-  border-radius: var(--border-radius-small);
+  border: 0;
+  border-radius: 6px;
   color: var(--color-on-offset);
   cursor: pointer;
   display: inline-flex;
   font-size: var(--font-size-s);
-  gap: var(--space-xs);
-  padding: var(--space-xs) var(--space-s);
+  gap: 0.3em;
+  min-height: 36px;
+  padding: 0.25em 0.6em;
   text-decoration: none;
-  transition: all 0.2s ease;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
 }
 
 .ap-card__action:hover {
   background: var(--color-offset-variant);
-  border-color: var(--color-outline-variant);
   color: var(--color-on-background);
 }
 
-/* Active interaction states — using Indiekit's color palette */
+/* Color-coded hover states per action type */
+.ap-card__action--reply:hover {
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  color: var(--color-primary);
+}
+
+.ap-card__action--boost:hover {
+  background: color-mix(in srgb, var(--color-green50) 12%, transparent);
+  color: var(--color-green50);
+}
+
+.ap-card__action--like:hover {
+  background: color-mix(in srgb, var(--color-red45) 12%, transparent);
+  color: var(--color-red45);
+}
+
+.ap-card__action--link:hover {
+  background: var(--color-offset-variant);
+  color: var(--color-on-background);
+}
+
+.ap-card__action--save:hover {
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  color: var(--color-primary);
+}
+
+/* Active interaction states */
 .ap-card__action--like.ap-card__action--active {
-  background: var(--color-red90);
-  border-color: var(--color-red45);
+  background: color-mix(in srgb, var(--color-red45) 12%, transparent);
   color: var(--color-red45);
 }
 
 .ap-card__action--boost.ap-card__action--active {
-  background: var(--color-green90);
-  border-color: var(--color-green50);
+  background: color-mix(in srgb, var(--color-green50) 12%, transparent);
   color: var(--color-green50);
 }
 
 .ap-card__action--save.ap-card__action--active {
-  background: #4a9eff22;
-  border-color: #4a9eff;
-  color: #4a9eff;
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  color: var(--color-primary);
 }
 
 .ap-card__action:disabled {
   cursor: wait;
-  opacity: 0.6;
+  opacity: 0.5;
 }
 
 /* Interaction counts */
 .ap-card__count {
   font-size: var(--font-size-xs);
-  color: var(--color-on-offset);
-  margin-left: 0.25rem;
+  color: inherit;
+  opacity: 0.7;
+  margin-left: 0.1em;
   font-variant-numeric: tabular-nums;
 }
 
@@ -839,7 +874,7 @@
 }
 
 .ap-pagination a {
-  color: var(--color-primary);
+  color: var(--color-primary-on-background);
   text-decoration: none;
 }
 
@@ -1085,11 +1120,11 @@
 }
 
 .ap-notifications__btn--danger {
-  color: var(--color-red45);
+  color: var(--color-error);
 }
 
 .ap-notifications__btn--danger:hover {
-  border-color: var(--color-red45);
+  border-color: var(--color-error);
 }
 
 .ap-notification {
@@ -1195,7 +1230,7 @@
 
 .ap-notification__dismiss-btn:hover {
   background: var(--color-offset-variant);
-  color: var(--color-red45);
+  color: var(--color-error);
 }
 
 .ap-notification__actions {
@@ -1281,7 +1316,7 @@
 }
 
 .ap-profile__bio a {
-  color: var(--color-primary);
+  color: var(--color-primary-on-background);
 }
 
 /* Override upstream .mention { display: grid } for bio content */
@@ -1428,7 +1463,7 @@
 }
 
 .ap-my-profile__bio a {
-  color: var(--color-primary);
+  color: var(--color-primary-on-background);
 }
 
 /* Override upstream .mention { display: grid } for bio content */
@@ -1478,7 +1513,7 @@
 }
 
 .ap-my-profile__field-value a {
-  color: var(--color-primary);
+  color: var(--color-primary-on-background);
 }
 
 .ap-my-profile__stats {
@@ -1760,7 +1795,7 @@
 }
 
 .ap-post-detail__back-link {
-  color: var(--color-primary);
+  color: var(--color-primary-on-background);
   font-size: var(--font-size-s);
   text-decoration: none;
 }
@@ -1844,10 +1879,10 @@
 }
 
 .ap-tag-header__follow-btn {
-  background: var(--color-accent);
+  background: var(--color-primary);
   border: none;
   border-radius: var(--border-radius-small);
-  color: var(--color-on-accent);
+  color: var(--color-on-primary, var(--color-neutral99));
   cursor: pointer;
   font-size: var(--font-size-s);
   padding: var(--space-xs) var(--space-s);
@@ -1988,10 +2023,10 @@
 }
 
 .ap-explore-error {
-  background: color-mix(in srgb, var(--color-red45) 10%, transparent);
-  border: var(--border-width-thin) solid var(--color-red45);
+  background: color-mix(in srgb, var(--color-error) 10%, transparent);
+  border: var(--border-width-thin) solid var(--color-error);
   border-radius: var(--border-radius-small);
-  color: var(--color-red45);
+  color: var(--color-error);
   margin-bottom: var(--space-m);
   padding: var(--space-s) var(--space-m);
 }
@@ -2261,7 +2296,7 @@
 }
 
 .ap-tab-control--remove:hover {
-  color: var(--color-red45);
+  color: var(--color-error);
 }
 
 /* Truncate long domain names in tab labels */
@@ -2286,13 +2321,13 @@
 }
 
 .ap-tab__badge--local {
-  background: color-mix(in srgb, var(--color-blue40, #2563eb) 15%, transparent);
-  color: var(--color-blue40, #2563eb);
+  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
+  color: var(--color-primary-on-background);
 }
 
 .ap-tab__badge--federated {
-  background: color-mix(in srgb, var(--color-purple45, #7c3aed) 15%, transparent);
-  color: var(--color-purple45, #7c3aed);
+  background: color-mix(in srgb, var(--color-purple45) 15%, transparent);
+  color: var(--color-purple45);
 }
 
 /* +# button for adding hashtag tabs */
@@ -2358,9 +2393,9 @@
 
 .ap-explore-pin-btn {
   background: none;
-  border: var(--border-width-thin) solid var(--color-primary);
+  border: var(--border-width-thin) solid var(--color-primary-on-background);
   border-radius: var(--border-radius-small);
-  color: var(--color-primary);
+  color: var(--color-primary-on-background);
   cursor: pointer;
   font-family: inherit;
   font-size: var(--font-size-s);
@@ -2440,23 +2475,23 @@
 }
 
 .ap-explore-tab-error__message {
-  color: var(--color-red45);
+  color: var(--color-error);
   font-size: var(--font-size-s);
   margin: 0;
 }
 
 .ap-explore-tab-error__retry {
   background: none;
-  border: 1px solid var(--color-accent);
+  border: 1px solid var(--color-primary-on-background);
   border-radius: var(--border-radius-small);
-  color: var(--color-accent);
+  color: var(--color-primary-on-background);
   cursor: pointer;
   font-size: var(--font-size-s);
   padding: var(--space-xs) var(--space-s);
 }
 
 .ap-explore-tab-error__retry:hover {
-  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
+  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
 }
 
 /* Empty state */
@@ -2536,9 +2571,14 @@
 
 .ap-quote-embed {
   border: var(--border-width-thin) solid var(--color-outline);
-  border-radius: var(--border-radius-small);
+  border-radius: 8px;
   margin-top: var(--space-s);
   overflow: hidden;
+  transition: border-color 0.15s ease;
+}
+
+.ap-quote-embed:hover {
+  border-color: var(--color-outline-variant);
 }
 
 .ap-quote-embed--pending {
@@ -2553,7 +2593,7 @@
 }
 
 .ap-quote-embed__link:hover {
-  background: var(--color-offset);
+  background: color-mix(in srgb, var(--color-offset) 50%, transparent);
 }
 
 .ap-quote-embed__author {
@@ -2618,8 +2658,8 @@
 .ap-quote-embed__content {
   color: var(--color-on-background);
   font-size: var(--font-size-s);
-  line-height: 1.5;
-  max-height: calc(1.5em * 6);
+  line-height: calc(4 / 3 * 1em);
+  max-height: calc(1.333em * 6);
   overflow: hidden;
 }
 
@@ -2709,3 +2749,103 @@
   z-index: 2;
 }
 
+/* ==========================================================================
+   Dark Mode Overrides
+   Softens saturated colors that are uncomfortable on dark backgrounds.
+   Uses Indiekit's existing light-variant tokens (red80, green90, yellow90)
+   which are designed for dark surfaces.
+   ========================================================================== */
+
+@media (prefers-color-scheme: dark) {
+
+  /* --- Action button hover states: softer colors, more visible tinted backgrounds --- */
+  .ap-card__action--reply:hover {
+    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
+    color: var(--color-primary-on-background);
+  }
+
+  .ap-card__action--boost:hover {
+    background: color-mix(in srgb, var(--color-green50) 18%, transparent);
+    color: var(--color-green90);
+  }
+
+  .ap-card__action--like:hover {
+    background: color-mix(in srgb, var(--color-red45) 18%, transparent);
+    color: var(--color-red80);
+  }
+
+  .ap-card__action--save:hover {
+    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
+    color: var(--color-primary-on-background);
+  }
+
+  /* --- Active interaction states --- */
+  .ap-card__action--like.ap-card__action--active {
+    background: color-mix(in srgb, var(--color-red45) 18%, transparent);
+    color: var(--color-red80);
+  }
+
+  .ap-card__action--boost.ap-card__action--active {
+    background: color-mix(in srgb, var(--color-green50) 18%, transparent);
+    color: var(--color-green90);
+  }
+
+  .ap-card__action--save.ap-card__action--active {
+    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
+    color: var(--color-primary-on-background);
+  }
+
+  /* --- Post-type left border accents: desaturated for dark surfaces --- */
+  .ap-card--note,
+  .ap-card--note:hover {
+    border-left-color: var(--color-purple90);
+  }
+
+  .ap-card--article,
+  .ap-card--article:hover {
+    border-left-color: var(--color-green90);
+  }
+
+  .ap-card--boost,
+  .ap-card--boost:hover {
+    border-left-color: var(--color-yellow90);
+  }
+
+  .ap-card--reply,
+  .ap-card--reply:hover {
+    border-left-color: var(--color-primary-on-background);
+  }
+
+  /* --- Notification unread glow: toned down --- */
+  .ap-notification--unread {
+    border-color: var(--color-yellow90);
+    box-shadow: 0 0 6px 0 color-mix(in srgb, var(--color-yellow50) 15%, transparent);
+  }
+
+  /* --- Post detail highlight ring: softened --- */
+  .ap-post-detail__main .ap-card {
+    border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 50%, transparent);
+  }
+
+  /* --- Card shadows: use light tint instead of black --- */
+  .ap-card {
+    box-shadow: 0 1px 2px rgba(255, 255, 255, 0.04);
+  }
+
+  .ap-card:hover {
+    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.06);
+  }
+
+  /* --- Compose counter warning --- */
+  .ap-compose__counter--warn {
+    color: var(--color-yellow90);
+  }
+
+  /* --- Tab badge federated: soften purple --- */
+  .ap-tab__badge--federated {
+    color: var(--color-purple90);
+    background: color-mix(in srgb, var(--color-purple45) 18%, transparent);
+  }
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-endpoint-activitypub",
-  "version": "2.6.0",
+  "version": "2.6.2",
   "description": "ActivityPub federation endpoint for Indiekit via Fedify. Adds full fediverse support: actor, inbox, outbox, followers, following, syndication, and Mastodon migration.",
   "keywords": [
     "indiekit",

package/views/layouts/ap-reader.njk

@@ -19,6 +19,8 @@
 
   {# AP link interception for internal navigation #}
   <script defer src="/assets/@rmdes-indiekit-endpoint-activitypub/reader-links.js"></script>
+  {# Blurhash placeholder backgrounds for gallery images #}
+  <script defer src="/assets/@rmdes-indiekit-endpoint-activitypub/reader-blurhash.js"></script>
 
   {% if readerParent %}
   <nav class="ap-breadcrumb" aria-label="Breadcrumb">

package/views/partials/ap-item-media.njk

@@ -10,10 +10,18 @@
       {# Support both old string format and new object format #}
       {% set photoSrc = photo.url if photo.url else photo %}
       {% set photoAlt = photo.alt if photo.alt else "" %}
+      {% set photoBlurhash = photo.blurhash if photo.blurhash else "" %}
+      {# Focus-point cropping: convert -1..1 range to CSS object-position percentages #}
+      {% set focusStyle = "" %}
+      {% if photo.focus and photo.focus.x != null and photo.focus.y != null %}
+        {% set fpX = ((photo.focus.x + 1) / 2 * 100) %}
+        {% set fpY = ((1 - (photo.focus.y + 1) / 2) * 100) %}
+        {% set focusStyle = "object-position:" + fpX + "% " + fpY + "%;" %}
+      {% endif %}
       {% if loop.index0 < 4 %}
         <div class="ap-card__gallery-item" x-data="{ showAlt: false }">
           <button type="button" @click="idx = {{ loop.index0 }}; lightbox = true" class="ap-card__gallery-link{% if loop.index0 == 3 and extraCount > 0 %} ap-card__gallery-link--more{% endif %}">
-            <img src="{{ photoSrc }}" alt="{{ photoAlt }}" loading="lazy">
+            <img src="{{ photoSrc }}" alt="{{ photoAlt }}" loading="lazy"{% if focusStyle %} style="{{ focusStyle }}"{% endif %}{% if photoBlurhash %} data-blurhash="{{ photoBlurhash }}"{% endif %}>
             {% if loop.index0 == 3 and extraCount > 0 %}
               <span class="ap-card__gallery-more">+{{ extraCount }}</span>
             {% endif %}

package/views/partials/ap-quote-embed.njk

@@ -26,8 +26,14 @@
       {% endif %}
       {% if item.quote.photo and item.quote.photo.length > 0 %}
         {% set qPhoto = item.quote.photo[0] %}
+        {% set qFocusStyle = "" %}
+        {% if qPhoto.focus and qPhoto.focus.x != null and qPhoto.focus.y != null %}
+          {% set qFpX = ((qPhoto.focus.x + 1) / 2 * 100) %}
+          {% set qFpY = ((1 - (qPhoto.focus.y + 1) / 2) * 100) %}
+          {% set qFocusStyle = "object-position:" + qFpX + "% " + qFpY + "%;" %}
+        {% endif %}
         <div class="ap-quote-embed__media">
-          <img src="{{ qPhoto.url if qPhoto.url else qPhoto }}" alt="{{ qPhoto.alt if qPhoto.alt else '' }}" loading="lazy" class="ap-quote-embed__photo">
+          <img src="{{ qPhoto.url if qPhoto.url else qPhoto }}" alt="{{ qPhoto.alt if qPhoto.alt else '' }}" loading="lazy" class="ap-quote-embed__photo"{% if qFocusStyle %} style="{{ qFocusStyle }}"{% endif %}>
         </div>
       {% endif %}
     </a>