@asd20/ui-next 2.33.1 → 2.33.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [2.33.3](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.33.2...ui-next-v2.33.3) (2026-10-27)
+
+
+### Bug Fixes
+
+* limit size of videos in body content; exclude videos and images already in body content from media section ([aba90ce](https://github.com/academydistrict20/asd20-ui-next/commit/aba90ceec4c244a8317cc544972fa753615da982))
+
+## [2.33.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.33.1...ui-next-v2.33.2) (2026-10-26)
+
 ## [2.33.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.33.0...ui-next-v2.33.1) (2026-10-26)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.33.1",
+  "version": "2.33.3",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

package/src/components/atoms/Asd20RichBodyContent/index.vue

@@ -231,8 +231,9 @@ export default {
   }
 
   :deep(.asd20-message-video) {
-    max-width: 100%;
-    margin: 0.75rem 0;
+    width: 100%;
+    max-width: 1200px;
+    margin: 0.75rem auto;
   }
 
   :deep(.asd20-message-video__description) {

package/src/components/organisms/Asd20MediaSection/index.vue

@@ -1,22 +1,22 @@
 <template>
   <section
-    v-show="images.length || videos.length"
+    v-if="showImageGallery || remainingMedia.videos.length"
     class="asd20-media-section"
     role="complementary"
   >
     <slot name="before" />
 
     <asd20-image-gallery
-      v-if="allowSingleImageGallery ? images.length > 0 : images.length > 1"
+      v-if="showImageGallery"
       title="Images"
-      :images="images"
+      :images="galleryImages"
     >
     </asd20-image-gallery>
 
     <asd20-videos-section
-      v-if="videos.length > 0"
+      v-if="remainingMedia.videos.length > 0"
       title="Videos"
-      :videos="videos"
+      :videos="remainingMedia.videos"
     >
     </asd20-videos-section>
     <slot />
@@ -25,6 +25,7 @@
 
 <script>
 import { defineAsyncComponent } from 'vue'
+import excludeBodyMedia from '../../../helpers/excludeBodyMedia'
 
 export default {
   name: 'Asd20MediaSection',
@@ -40,6 +41,26 @@ export default {
     allowSingleImageGallery: { type: Boolean, default: false },
     images: { type: Array, default: () => [] },
     videos: { type: Array, default: () => [] },
+    // Include only messages whose bodies are displayed on this page.
+    bodyMessages: { type: Array, default: () => [] },
+  },
+  computed: {
+    remainingMedia() {
+      return excludeBodyMedia({
+        images: this.images,
+        videos: this.videos,
+        bodyMessages: this.bodyMessages,
+      })
+    },
+    galleryImages() {
+      return this.remainingMedia.images.filter(image => !image.isCover)
+    },
+    showImageGallery() {
+      // Preserve galleries that have one image left after body duplicates
+      // are removed, while retaining the existing single-image opt-in.
+      return this.galleryImages.length > 0 &&
+        (this.allowSingleImageGallery || this.images.length > 1)
+    },
   },
 }
 </script>

package/src/components/organisms/Asd20SecondaryHeader/index.vue

@@ -97,26 +97,11 @@
     <div class="white-accent-band">
       <section
         ref="header"
-        :class="headerClasses"
+        class="asd20-secondary-header"
         aria-label="Secondary message"
-        :style="secondaryHeaderStyle"
       >
-        <!-- Parallax background (masked by .asd20-secondary-header mask) -->
-        <div
-          class="secondary-parallax"
-          aria-hidden="true"
-        >
-          <div class="secondary-parallax__layer secondary-parallax__base"></div>
-          <div
-            class="secondary-parallax__layer secondary-parallax__field"
-          ></div>
-          <div
-            class="secondary-parallax__layer secondary-parallax__ribbons"
-          ></div>
-        </div>
-
         <asd20-messaging
-          v-bind="secondaryMessageForDisplay"
+          v-bind="secondaryMessage"
           fullscreen
         ></asd20-messaging>
       </section>
@@ -141,181 +126,10 @@ export default {
     grid: { type: Boolean, default: false },
     forceDisplay: { type: Boolean, default: false },
   },
-  data() {
-    return {
-      isTouchCapableDevice: false,
-      parallaxEnabled: false,
-      intersectionObserver: null,
-      parallaxRaf: null,
-      handleScroll: null,
-      handleResize: null,
-    }
-  },
   computed: {
-    shouldUseParallax() {
-      return !this.isTouchCapableDevice
-    },
-    headerClasses() {
-      return {
-        'asd20-secondary-header': true,
-        'asd20-secondary-header--desktop-background':
-          this.hasSecondaryHeaderImage,
-        'asd20-secondary-header--parallax-enabled-background':
-          this.hasSecondaryHeaderImage && this.shouldUseParallax,
-        'asd20-secondary-header--hide-desktop-image':
-          !this.shouldShowDesktopInlineImage,
-      }
-    },
     secondaryMessage() {
       return Array.isArray(this.messages) ? this.messages[1] || {} : {}
     },
-    secondaryMessageImages() {
-      return Array.isArray(this.secondaryMessage.images)
-        ? this.secondaryMessage.images
-        : []
-    },
-    secondaryHeaderImageObject() {
-      return (
-        this.secondaryMessageImages.find(image => image && image.isCover) ||
-        this.secondaryMessageImages[0] ||
-        null
-      )
-    },
-    secondaryHeaderImage() {
-      return this.resolveMessageImageUrl(this.secondaryHeaderImageObject)
-    },
-    hasSecondaryHeaderImage() {
-      return Boolean(this.secondaryHeaderImage)
-    },
-    shouldShowDesktopInlineImage() {
-      return Boolean(
-        this.secondaryHeaderImageObject && this.secondaryHeaderImageObject.isCover
-      )
-    },
-    secondaryMessageForDisplay() {
-      if (!this.secondaryHeaderImageObject) return this.secondaryMessage
-
-      return {
-        ...this.secondaryMessage,
-        images: [
-          {
-            ...this.secondaryHeaderImageObject,
-            isCover: true,
-          },
-        ],
-      }
-    },
-    secondaryHeaderStyle() {
-      if (!this.hasSecondaryHeaderImage) return {}
-
-      return {
-        '--secondary-header-image': `url("${this.secondaryHeaderImage}")`,
-      }
-    },
-  },
-  mounted() {
-    if (typeof window !== 'undefined') {
-      this.isTouchCapableDevice = Boolean(
-        window.matchMedia?.('(pointer: coarse)').matches ||
-          window.navigator?.maxTouchPoints > 0
-      )
-    }
-
-    // Respect reduced motion
-    const prefersReduced =
-      typeof window !== 'undefined' &&
-      window.matchMedia &&
-      window.matchMedia('(prefers-reduced-motion: reduce)').matches
-
-    if (prefersReduced || !this.shouldUseParallax) return
-
-    this.handleScroll = () => this.scheduleParallaxUpdate()
-    this.handleResize = () => this.scheduleParallaxUpdate()
-
-    // Only animate when the header is in view
-    if (typeof window !== 'undefined' && 'IntersectionObserver' in window) {
-      this.intersectionObserver = new IntersectionObserver(
-        entries => {
-          const entry = entries && entries[0]
-          if (!entry) return
-          if (entry.isIntersecting) this.enableParallax()
-          else this.disableParallax()
-        },
-        { root: null, threshold: 0.01 }
-      )
-
-      if (this.$refs.header) this.intersectionObserver.observe(this.$refs.header)
-    } else {
-      // Fallback: just enable
-      this.enableParallax()
-    }
-
-    // Initial set
-    this.scheduleParallaxUpdate()
-  },
-  beforeUnmount() {
-    this.teardownParallax()
-  },
-  methods: {
-    resolveMessageImageUrl(image) {
-      if (!image) return ''
-
-      const imageFiles = Array.isArray(image.files) ? image.files : []
-      const fullImage = imageFiles.find(file => file.name === 'full')
-      return fullImage ? fullImage.url : image.url || ''
-    },
-    teardownParallax() {
-      this.disableParallax()
-      if (this.intersectionObserver) this.intersectionObserver.disconnect()
-      this.intersectionObserver = null
-    },
-    enableParallax() {
-      if (this.parallaxEnabled) return
-      this.parallaxEnabled = true
-      window.addEventListener('scroll', this.handleScroll, { passive: true })
-      window.addEventListener('resize', this.handleResize, { passive: true })
-      this.scheduleParallaxUpdate()
-    },
-    disableParallax() {
-      if (!this.parallaxEnabled) return
-      this.parallaxEnabled = false
-      window.removeEventListener('scroll', this.handleScroll)
-      window.removeEventListener('resize', this.handleResize)
-      if (this.parallaxRaf) cancelAnimationFrame(this.parallaxRaf)
-      this.parallaxRaf = null
-    },
-    scheduleParallaxUpdate() {
-      if (!this.parallaxEnabled) return
-      if (this.parallaxRaf) return
-      this.parallaxRaf = requestAnimationFrame(() => {
-        this.parallaxRaf = null
-        this.updateParallax()
-      })
-    },
-    updateParallax() {
-      const el = this.$refs.header
-      if (!el) return
-
-      const rect = el.getBoundingClientRect()
-      const vh = window.innerHeight || 1
-
-      // Progress through viewport: 0 (below) -> 1 (above)
-      // We keep it gentle and clamp
-      const mid = rect.top + rect.height * 0.25
-      const tRaw = 1 - mid / vh
-      const t = Math.max(0, Math.min(1, tRaw * 1.25))
-      const t2 = Math.max(0, Math.min(1, tRaw * 1.25)) // field
-      const t3 = Math.max(0, Math.min(1, tRaw * 1.6)) // ribbons
-
-      // Subtle movement only (px)
-      const y1 = (t - 0.5) * 22 // base
-      const y2 = (t2 - 0.5) * 60 // field
-      const y3 = (t3 - 0.5) * 40 // ribbons
-
-      el.style.setProperty('--secondary-parallax-y1', `${y1}px`)
-      el.style.setProperty('--secondary-parallax-y2', `${y2}px`)
-      el.style.setProperty('--secondary-parallax-y3', `${y3}px`)
-    },
   },
 }
 </script>
@@ -344,13 +158,14 @@ export default {
 }
 
 .asd20-secondary-header {
-  --secondary-header-image: none;
   position: relative;
   display: flex;
   flex-shrink: 0;
   flex-direction: column;
   color: var(--website-homepage-header__secondary-foreground-color);
-  background: var(--website-homepage-header__secondary-background-color);
+  // CommCenter supplies a full background shorthand (image, position, size, repeat).
+  background: var(--website-homepage-header__secondary-background-style, none);
+  background-color: var(--website-homepage-header__secondary-background-color);
   padding: space(1) 0 0 0;
 
   mask: url(#secondary-header-mask-mobile);
@@ -358,7 +173,6 @@ export default {
   mask-size: 100% 100%;
   -webkit-mask-size: 100% 100%;
 
-  /* Ensure content stays above the parallax layers */
   .asd20-messaging {
     position: relative;
     z-index: 2;
@@ -367,94 +181,6 @@ export default {
     flex-direction: column;
   }
 
-  /* Parallax background container */
-  .secondary-parallax {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-    pointer-events: none;
-    overflow: hidden; /* mask will clip, but this avoids any edge artifacts */
-  }
-
-  .secondary-parallax__layer {
-    position: absolute;
-    inset: -10% -10% -10% -10%;
-    transform: translate3d(0, 0, 0);
-    will-change: transform;
-  }
-
-  /* Layer 1: base gradient glow */
-  .secondary-parallax__base {
-    transform: translate3d(0, var(--secondary-parallax-y1, 0px), 0);
-    background: radial-gradient(
-        800px 520px at 90% 90%,
-        rgba(255, 255, 255, 0.55) 0%,
-        rgba(255, 255, 255, 0.22) 0%,
-        rgba(255, 255, 255, 0) 0%
-      ),
-      linear-gradient(
-        90deg,
-        rgba(12, 36, 86, 0.95) 0%,
-        rgba(12, 36, 86, 0.85) 35%,
-        rgba(12, 36, 86, 0.25) 100%
-      );
-      /* linear-gradient(*/
-      /*   90deg,*/
-      /*   rgba(12, 36, 86, 0.95) 0%,*/
-      /*   rgba(24, 74, 160, 0.6) 85%,*/
-      /*   rgba(112, 160, 230, 0.85) 100%*/
-      /* );*/
-  }
-
-  /* Layer 2: soft wave fields (broad arcs) */
-  .secondary-parallax__field {
-    transform: translate3d(0px, var(--secondary-parallax-y2, 0px), 0)
-      rotate(-5deg);
-    background: radial-gradient(
-      280% 155% at 20% 110%,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0) 62%,
-      rgba(188, 220, 250, 0.95) 70%,
-      rgba(255, 255, 255, 0) 72%
-    );
-    filter: none;
-    opacity: 0.9;
-    mask-image: linear-gradient(
-      90deg,
-      rgba(0, 0, 0, 0.85) 0%,
-      rgba(0, 0, 0, 1) 85%
-    );
-    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,1) 85%);
-  }
-
-  /* Layer 3: highlight ribbons (brighter curves) */
-  .secondary-parallax__ribbons {
-    transform: translate3d(0, var(--secondary-parallax-y3, 0px), 0)
-      rotate(-3deg);
-    background: radial-gradient(
-      260% 160% at 50% 110%,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0) 60%,
-      rgba(255, 255, 255, 0.9) 64%,
-      rgba(255, 255, 255, 0) 70%
-    );
-    opacity: 0.9;
-    filter: none;
-    mask-image: linear-gradient(
-      90deg,
-      rgba(0, 0, 0, 0.3) 0%,
-      rgba(0, 0, 0, 1) 70%
-    );
-    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,1) 70%);
-  }
-
-  /* Reduced motion: lock the layers */
-  @media (prefers-reduced-motion: reduce) {
-    .secondary-parallax__layer {
-      transform: none !important;
-    }
-  }
-
   & :deep(.message-image) {
     order: 2;
     border-top: none !important;
@@ -484,6 +210,15 @@ export default {
     padding: space(1) space(1) space(1) space(1);
   }
 
+  & :deep(.asd20-messaging__button-group) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: space(0.5);
+    width: 70vw;
+    max-width: 100%;
+    margin: space(0.5) auto;
+  }
+
   & :deep(.asd20-button) {
     @include asd20-font(
       0.75,
@@ -492,8 +227,10 @@ export default {
       700
     );
     flex-direction: column;
-    width: 70vw;
-    margin: space(0.5) auto !important;
+    box-sizing: border-box;
+    min-width: 0;
+    width: 100%;
+    margin: 0 !important;
     color: var(--website-homepage-header__secondary-button-foreground-color);
     background: var(
       --website-homepage-header__secondary-button-background-color
@@ -505,6 +242,9 @@ export default {
     z-index: 2;
     overflow: hidden;
   }
+  & :deep(.asd20-button__label) {
+    overflow-wrap: anywhere;
+  }
   & :deep(.asd20-button)::before {
     content: '';
     position: absolute;
@@ -542,9 +282,9 @@ export default {
     & :deep(.lead) {
       width: 100%;
     }
-    & :deep(.asd20-button) {
+    & :deep(.asd20-messaging__button-group) {
       width: 50vw;
-      margin: space(0.5) space(0.5) 0 0 !important;
+      margin-inline: 0;
     }
   }
 }
@@ -575,14 +315,8 @@ export default {
 }
 
 @media (min-width: 1024px) {
-  .asd20-secondary-header--desktop-background {
+  .asd20-secondary-header {
     padding: space(3) space(3) space(2) space(3);
-    background-color: var(--website-homepage-header__secondary-background-color);
-    background-image: var(--secondary-header-image);
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-attachment: scroll;
     padding-top: 70px;
 
     mask: url(#secondary-header-mask-desktop);
@@ -607,6 +341,11 @@ export default {
       border-bottom: none;
     }
 
+    & :deep(.asd20-messaging__button-group) {
+      grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+      width: 100%;
+    }
+
     & :deep(.asd20-button) {
       @include asd20-font(
         0.75,
@@ -615,8 +354,6 @@ export default {
         700
       );
       flex-direction: row;
-      width: inherit;
-      margin: space(0.5) space(0.5) 0 0 !important;
       padding: space(0.5) space(1.5);
     }
 
@@ -634,64 +371,17 @@ export default {
     }
   }
 
-  .asd20-secondary-header--desktop-background .secondary-parallax {
-    display: block;
-  }
-
-  .asd20-secondary-header--desktop-background .secondary-parallax__field,
-  .asd20-secondary-header--desktop-background .secondary-parallax__ribbons {
-    display: none;
-  }
-
-  .asd20-secondary-header--parallax-enabled-background {
-    background-attachment: fixed;
-  }
-
-  .asd20-secondary-header--parallax-enabled-background .secondary-parallax__field,
-  .asd20-secondary-header--parallax-enabled-background .secondary-parallax__ribbons {
-    display: block;
-  }
-
-  .asd20-secondary-header--parallax-enabled-background .secondary-parallax__field {
-    transform: translate3d(0px, var(--secondary-parallax-y2, 0px), 0)
-      rotate(-5deg);
-    filter: none;
-    opacity: 0.9;
-    mask-image: linear-gradient(
-      90deg,
-      rgba(0, 0, 0, 0.85) 0%,
-      rgba(0, 0, 0, 1) 85%
-    );
-    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,1) 85%);
-  }
-
-  .asd20-secondary-header--parallax-enabled-background .secondary-parallax__ribbons {
-    transform: translate3d(0, var(--secondary-parallax-y3, 0px), 0)
-      rotate(-3deg);
-    background: radial-gradient(
-      180% 160% at 40% 110%,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0) 60%,
-      rgba(255, 255, 255, 0.9) 64%,
-      rgba(255, 255, 255, 0) 70%
-    );
-    opacity: 0.9;
-    filter: none;
-    mask-image: linear-gradient(
-      90deg,
-      rgba(0, 0, 0, 0.3) 0%,
-      rgba(0, 0, 0, 1) 70%
-    );
-    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,1) 70%);
-  }
-
-  .asd20-secondary-header--desktop-background.asd20-secondary-header--hide-desktop-image {
-    & :deep(.asd20-messaging--fullscreen > .message-image) {
-      display: none;
+}
+@media (min-width: 1025px) {
+  .asd20-secondary-header {
+    & :deep(.asd20-messaging__button-group) {
+      display: flex;
+      flex-wrap: wrap;
     }
 
-    & :deep(.asd20-messaging--fullscreen > .asd20-messaging__content) {
-      max-width: 60%;
+    & :deep(.asd20-button) {
+      width: fit-content;
+      max-width: 100%;
     }
   }
 }

package/src/components/templates/Asd20ArticleDigestCompactTemplate/index.vue

@@ -210,6 +210,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20ArticleDigestTemplate/index.vue

@@ -211,6 +211,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20ArticleListTemplate/index.vue

@@ -230,6 +230,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20ArticleTemplate/index.vue

@@ -95,9 +95,10 @@
     ></asd20-feeds-section> -->
 
     <asd20-media-section
-      v-if="shouldShowArticleMediaSection"
+      v-if="combinedMessageImages.length || combinedMessageVideos.length"
+      :body-messages="[...primaryDetailMessages, ...secondaryMessages]"
       allow-single-image-gallery
-      :images="articleGalleryImages || []"
+      :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >
     </asd20-media-section>

package/src/components/templates/Asd20CampusDetailTemplate/index.vue

@@ -89,6 +89,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20ClubsTemplate/index.vue

@@ -222,6 +222,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20DetailAlternateTemplate/index.vue

@@ -95,6 +95,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryDetailMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20DetailImageFullTemplate/index.vue

@@ -94,6 +94,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryDetailMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20DetailImageTemplate/index.vue

@@ -94,6 +94,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryDetailMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20DetailTemplate/index.vue

@@ -94,6 +94,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryDetailMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20FileListPageTemplate/index.vue

@@ -90,6 +90,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20GroupFeatureTemplate/index.vue

@@ -91,6 +91,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessagesGroup, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20ProfileTemplate/index.vue

@@ -276,6 +276,7 @@
 
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
+      :body-messages="[...primaryMessages, ...secondaryMessages]"
       :images="combinedMessageImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/templates/Asd20WayfindingAlternateTemplate/index.vue

@@ -95,6 +95,7 @@
     <!-- Photos & Videos -->
     <asd20-media-section
       v-if="firstMessage.images.length > 1 || firstMessage.videos.length"
+      :body-messages="primaryMessage || []"
       :images="firstMessage.images || []"
       :videos="firstMessage.videos || []"
     >

package/src/components/templates/Asd20WayfindingImageTemplate/index.vue

@@ -96,6 +96,7 @@
     <!-- Photos & Videos -->
     <asd20-media-section
       v-if="firstMessage.images.length > 1 || firstMessage.videos.length"
+      :body-messages="primaryMessage || []"
       :images="firstMessage.images || []"
       :videos="firstMessage.videos || []"
     >

package/src/components/templates/Asd20WayfindingTemplate/index.vue

@@ -93,6 +93,7 @@
     <!-- Photos & Videos -->
     <asd20-media-section
       v-if="firstMessage.images.length > 1 || firstMessage.videos.length"
+      :body-messages="primaryMessage || []"
       :images="firstMessage.images || []"
       :videos="firstMessage.videos || []"
     >

package/src/helpers/excludeBodyMedia.js

@@ -0,0 +1,96 @@
+import { parseFragment } from 'parse5'
+import { buildRichBodyRenderModel } from '../components/atoms/Asd20RichBodyContent/messageDocumentRenderer'
+
+const STORAGE_HOST = 'asd20websitestorage.blob.core.windows.net'
+const RELATIVE_ORIGIN = 'https://ui-next.invalid'
+
+function resourceKey(value) {
+  if (typeof value !== 'string' || !value.trim()) return ''
+  try {
+    const url = new URL(value.trim(), RELATIVE_ORIGIN)
+    if (!['http:', 'https:'].includes(url.protocol)) return ''
+    url.hash = ''
+    // The website media proxy and blob origin serve the same stored files.
+    if (url.pathname.startsWith('/_media/')) {
+      return `storage:${url.pathname.slice('/_media'.length)}${url.search}`
+    }
+    if (url.hostname === STORAGE_HOST) {
+      return `storage:${url.pathname}${url.search}`
+    }
+    return url.href
+  } catch {
+    return ''
+  }
+}
+
+function videoKey(value) {
+  const key = resourceKey(value)
+  if (!key || key.startsWith('storage:')) return key
+  const url = new URL(key)
+  const host = url.hostname.replace(/^www\./, '')
+  if (['youtube.com', 'youtube-nocookie.com', 'youtu.be'].includes(host)) {
+    const id = host === 'youtu.be'
+      ? url.pathname.split('/')[1]
+      : url.searchParams.get('v') || url.pathname.match(/^\/(?:embed|shorts)\/([^/]+)/)?.[1]
+    if (id) return `youtube:${id}`
+  }
+  if (['vimeo.com', 'player.vimeo.com'].includes(host)) {
+    const id = url.pathname.match(/^\/(?:video\/)?(\d+)(?:\/|$)/)?.[1]
+    if (id) return `vimeo:${id}`
+  }
+  if (host === 'live.myvrspot.com' && url.searchParams.get('v')) {
+    return `myvrspot:${url.searchParams.get('v')}`
+  }
+  return key
+}
+
+function addSource(sources, value, normalize) {
+  const key = normalize(value)
+  if (key) sources.add(key)
+}
+
+function collectHtmlMedia(html, sources) {
+  const visit = node => {
+    const attrs = Object.fromEntries((node.attrs || []).map(attr => [attr.name, attr.value]))
+    if (node.tagName === 'img') {
+      addSource(sources.images, attrs.src, resourceKey)
+    }
+    if (['iframe', 'video'].includes(node.tagName) ||
+        (node.tagName === 'source' && node.parentNode?.tagName === 'video')) {
+      addSource(sources.videos, attrs.src, videoKey)
+    }
+    for (const child of node.childNodes || []) visit(child)
+  }
+  visit(parseFragment(html || ''))
+}
+
+export default function excludeBodyMedia({ images = [], videos = [], bodyMessages = [] } = {}) {
+  const sources = { images: new Set(), videos: new Set() }
+  for (const message of bodyMessages) {
+    if (!message) continue
+    // Use the renderer's selected content, including its HTML fallback for
+    // invalid/unsupported JSON, rather than inspecting stale saved sidecars.
+    const model = buildRichBodyRenderModel({
+      bodyContent: message.bodyContent || message.bodyHtml || '',
+      bodyJson: message.bodyJson,
+    })
+    for (const node of model.nodes) {
+      if (node.html) collectHtmlMedia(node.html, sources)
+      if (node.type === 'accordion') {
+        for (const item of node.block.items || []) {
+          if (item.contentType !== 'tableau') collectHtmlMedia(item.bodyHtml, sources)
+        }
+      }
+    }
+  }
+
+  return {
+    images: images.filter(image => image && ![
+      image.url,
+      ...(image.files || []).map(file => file?.url),
+    ].some(url => sources.images.has(resourceKey(url)))),
+    videos: videos.filter(video => video && ![
+      video.embedUrl, video.watchUrl, video.url,
+    ].some(url => sources.videos.has(videoKey(url)))),
+  }
+}

package/src/mixins/pageTemplateMixin.js

@@ -1,32 +1,6 @@
 import responsiveBreakpointMixin from './responsiveBreakpointMixin'
 import { buildBreadcrumbLinks } from '../helpers/breadcrumbLinks'
 
-function getMessageBodyHtml(message) {
-  return (message && (message.bodyContent || message.bodyHtml)) || ''
-}
-
-function getImageUrls(image) {
-  const urls = []
-  const files = (image && image.files) || []
-  if (image && image.url) urls.push(image.url)
-  files.forEach(file => {
-    if (file && file.url) urls.push(file.url)
-  })
-  return urls
-}
-
-function normalizeHtmlValue(value) {
-  return String(value || '').replace(/&/g, '&')
-}
-
-function imageAppearsInBody(image, bodyHtml) {
-  if (!bodyHtml) return false
-  const normalizedBodyHtml = normalizeHtmlValue(bodyHtml)
-  return getImageUrls(image).some(url =>
-    normalizedBodyHtml.includes(normalizeHtmlValue(url))
-  )
-}
-
 export default {
   mixins: [responsiveBreakpointMixin],
 
@@ -270,24 +244,6 @@ export default {
       }, [])
     },
 
-    articleGalleryImages() {
-      const messageBodies = (this.primaryDetailMessages || [])
-        .map(getMessageBodyHtml)
-        .filter(Boolean)
-
-      return this.combinedMessageImages.filter(image => {
-        if (!image || image.isCover) return false
-        return !messageBodies.some(bodyHtml => imageAppearsInBody(image, bodyHtml))
-      })
-    },
-
-    shouldShowArticleMediaSection() {
-      return (
-        this.articleGalleryImages.length > 0 ||
-        this.combinedMessageVideos.length > 0
-      )
-    },
-
     combinedMessageVideos() {
       return (this.messages || []).reduce((a, m) => {
         const videos = m.videos || []