From 5b69aa9351020304370a830d91dc34007322c681 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephiescastle@users.noreply.github.com>
Date: Wed, 4 Sep 2024 17:36:02 -0700
Subject: [PATCH] fix: edu resource multimedia and gallery templates (#594)

* modifying publication date on multimedia and gallery templates

* QA fixes on edu Gallery Detail page

* moving BlockText styles to BlockText scss file

* fixing vue build errors

* fixing storybook workflow error
---
 .github/workflows/storybook.yml               |  2 +-
 .../src/scss/components/_BlockText.scss       | 42 +++++++++++++++
 .../BaseImageCaption/BaseImageCaption.vue     | 17 +++---
 .../BlockImage/BlockImageFullBleed.vue        | 44 ++++++++++++---
 .../BlockImage/BlockImageStandard.vue         | 44 ++++++++++++---
 .../BlockImageComparison.vue                  | 43 ++++++++-------
 .../src/components/BlockVideo/BlockVideo.vue  | 24 ++++++++-
 .../BlockVideoEmbed/BlockVideoEmbed.vue       | 12 ++++-
 .../DetailHeadline/DetailHeadline.vue         | 17 +++---
 .../PageEduGalleryDetail.stories.js           | 17 ++++--
 .../PageEduGalleryDetail.vue                  | 54 ++++++++++++-------
 .../PageEduMultimediaDetail.vue               |  1 +
 12 files changed, 242 insertions(+), 75 deletions(-)

diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
index f4b5bf4f..c5799e9c 100644
--- a/.github/workflows/storybook.yml
+++ b/.github/workflows/storybook.yml
@@ -40,7 +40,7 @@ jobs:
         run: make vue-storybook-build
 
       - name: Upload build to artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: storybook
           path: apps/vue-storybook/storybook_compiled
diff --git a/packages/common/src/scss/components/_BlockText.scss b/packages/common/src/scss/components/_BlockText.scss
index 1d3ea01d..68a4e6be 100644
--- a/packages/common/src/scss/components/_BlockText.scss
+++ b/packages/common/src/scss/components/_BlockText.scss
@@ -103,6 +103,48 @@
       }
     }
   }
+  .richtext-image {
+    &.full-width {
+      @apply mb-10 lg:mb-14;
+      @apply w-full h-auto;
+    }
+    &.left,
+    &.right {
+      @apply mb-5 lg:mb-5 mx-5 lg:mx-8;
+      @apply inline max-w-full sm:max-w-[50%] h-auto;
+    }
+    &.left {
+      @apply sm:float-left ml-0;
+      @apply ml-0 lg:-ml-[5.3rem] xl:-ml-[6.8rem];
+      // uncomment if floating images become unwieldy
+      // + p,
+      // + div {
+      //   clear: right;
+      // }
+    }
+    &.right {
+      @apply sm:float-right mr-0;
+      @apply mr-0 lg:-mr-[5.3rem] xl:-mr-[6.8rem];
+      // uncomment if floating images become unwieldy
+      // + p,
+      // + div {
+      //   clear: left;
+      // }
+    }
+    &:last-child {
+      @apply mb-0;
+    }
+  }
+  > div {
+    @apply mb-10 lg:mb-14;
+    iframe {
+      @apply w-full h-auto aspect-video;
+    }
+    &:last-child {
+      @apply mb-0;
+    }
+  }
+
   &.-small {
     p {
       @apply mb-2;
diff --git a/packages/vue/src/components/BaseImageCaption/BaseImageCaption.vue b/packages/vue/src/components/BaseImageCaption/BaseImageCaption.vue
index 1f4d2bcf..ff98d626 100644
--- a/packages/vue/src/components/BaseImageCaption/BaseImageCaption.vue
+++ b/packages/vue/src/components/BaseImageCaption/BaseImageCaption.vue
@@ -31,7 +31,10 @@ export default defineComponent({
     v-if="data"
     class="BaseImageCaption text-body-sm"
   >
-    <div class="inline mr-2">
+    <div
+      v-if="data.caption || data.credit"
+      class="inline mr-2"
+    >
       <div
         class="the-caption-text inline"
         v-html="data.caption"
@@ -44,20 +47,20 @@ export default defineComponent({
       </span>
     </div>
     <BaseLink
-      v-if="data.detailUrl"
+      v-if="customLink"
       class="inline-block"
       variant="default"
-      :to="data.detailUrl"
+      :to="customLink"
     >
-      Full Image Details
+      {{ customLinkText }}
     </BaseLink>
     <BaseLink
-      v-else-if="customLink"
+      v-else-if="data.detailUrl"
       class="inline-block"
       variant="default"
-      :to="customLink"
+      :to="data.detailUrl"
     >
-      {{ customLinkText }}
+      Full Image Details
     </BaseLink>
   </div>
 </template>
diff --git a/packages/vue/src/components/BlockImage/BlockImageFullBleed.vue b/packages/vue/src/components/BlockImage/BlockImageFullBleed.vue
index 2f2bd92e..392ed332 100644
--- a/packages/vue/src/components/BlockImage/BlockImageFullBleed.vue
+++ b/packages/vue/src/components/BlockImage/BlockImageFullBleed.vue
@@ -1,6 +1,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
+
 import MixinFancybox from './../MixinFancybox/MixinFancybox.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
@@ -19,7 +22,7 @@ export default defineComponent({
   props: {
     data: {
       type: Object as PropType<ImageObject>,
-      required: false
+      default: undefined
     },
     // if a caption should even be visible
     displayCaption: {
@@ -29,7 +32,12 @@ export default defineComponent({
     // overrides caption provided with image model
     caption: {
       type: String,
-      required: false
+      default: undefined
+    },
+    // overrides detail url provided with image model. Also forces hasCaption to be true
+    customDetailUrl: {
+      type: String,
+      default: undefined
     },
     // if the image should be constrained to a fixed aspect ratio (21:9 on smaller screens, 2:1 on larger screens)
     constrain: {
@@ -43,6 +51,7 @@ export default defineComponent({
     }
   },
   computed: {
+    ...mapStores(useThemeStore),
     theCaption(): string | undefined {
       if (this.caption && this.caption.length > 2 && this.displayCaption) {
         return this.caption
@@ -59,19 +68,36 @@ export default defineComponent({
     theSrcSet(): string | undefined {
       return this.theData ? mixinGetSrcSet(this.theData) : undefined
     },
+    theCredit() {
+      if (this.themeStore.isEdu && !this.displayCaption) {
+        return undefined
+      }
+      return this.data?.credit
+    },
     // reform the data object with the computed caption
     theData(): ImageObject | undefined {
       if (this.data) {
         return {
           ...this.data,
-          caption: this.theCaption
+          caption: this.theCaption,
+          credit: this.theCredit,
+          detailUrl: this.customDetailUrl
         }
       }
       return undefined
     },
     hasCaptionArea(): boolean {
-      if (this.data && (this.theCaption || this.data.credit || this.data.detailUrl)) {
-        return true
+      if (this.data) {
+        if (this.themeStore.isEdu) {
+          return this.theData?.caption || this.customDetailUrl ? true : false
+        } else if (
+          this.theData?.caption ||
+          this.theData?.credit ||
+          this.theData?.detailUrl ||
+          this.customDetailUrl
+        ) {
+          return true
+        }
       }
       return false
     }
@@ -87,7 +113,7 @@ export default defineComponent({
           :src="theData.original || theData.src?.url"
           :caption="theData.caption"
           :credit="theData.credit"
-          :detail-url="theData.detailUrl"
+          :detail-url="customDetailUrl || theData.detailUrl"
         >
           <BaseImagePlaceholder
             :aspect-ratio="constrain ? '16:9' : 'none'"
@@ -113,7 +139,11 @@ export default defineComponent({
       v-if="data && hasCaptionArea"
       class="max-w-screen-3xl p-4 pb-0 mx-auto"
     >
-      <BaseImageCaption :data="theData" />
+      <BaseImageCaption
+        :data="theData"
+        :custom-link="customDetailUrl"
+        custom-link-text="Full Image Details"
+      />
     </div>
   </div>
 </template>
diff --git a/packages/vue/src/components/BlockImage/BlockImageStandard.vue b/packages/vue/src/components/BlockImage/BlockImageStandard.vue
index 33f9f881..d13c776e 100644
--- a/packages/vue/src/components/BlockImage/BlockImageStandard.vue
+++ b/packages/vue/src/components/BlockImage/BlockImageStandard.vue
@@ -1,7 +1,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
-
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 import type { ImageObject } from './../../interfaces'
 import MixinFancybox from './../MixinFancybox/MixinFancybox.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
@@ -19,7 +20,7 @@ export default defineComponent({
   props: {
     data: {
       type: Object as PropType<ImageObject>,
-      required: false
+      default: undefined
     },
     // if a caption should even be visible
     displayCaption: {
@@ -29,7 +30,12 @@ export default defineComponent({
     // overrides caption provided with image model
     caption: {
       type: String,
-      required: false
+      default: undefined
+    },
+    // overrides detail url provided with image model. Also forces hasCaption to be true
+    customDetailUrl: {
+      type: String,
+      default: undefined
     },
     // if the image should be constrained to a 16:9 aspect ratio
     constrain: {
@@ -38,6 +44,7 @@ export default defineComponent({
     }
   },
   computed: {
+    ...mapStores(useThemeStore),
     theCaption(): string | undefined {
       if (this.caption && this.caption.length > 2 && this.displayCaption) {
         return this.caption
@@ -51,19 +58,36 @@ export default defineComponent({
       }
       return undefined
     },
+    theCredit() {
+      if (this.themeStore.isEdu && !this.displayCaption) {
+        return undefined
+      }
+      return this.data?.credit
+    },
     // reform the data object with the computed caption
     theData(): ImageObject | undefined {
       if (this.data) {
         return {
           ...this.data,
-          caption: this.theCaption
+          caption: this.theCaption,
+          credit: this.theCredit,
+          detailUrl: this.customDetailUrl
         }
       }
       return undefined
     },
     hasCaptionArea(): boolean {
-      if (this.data && (this.theCaption || this.data.credit || this.data.detailUrl)) {
-        return true
+      if (this.theData) {
+        if (this.themeStore.isEdu) {
+          return this.theData.caption || this.customDetailUrl ? true : false
+        } else if (
+          this.theData.caption ||
+          this.theData.credit ||
+          this.theData.detailUrl ||
+          this.customDetailUrl
+        ) {
+          return true
+        }
       }
       return false
     }
@@ -77,7 +101,7 @@ export default defineComponent({
       :src="theData.original || theData.src?.url"
       :caption="theData.caption"
       :credit="theData.credit"
-      :detail-url="theData.detailUrl"
+      :detail-url="customDetailUrl || theData.detailUrl"
     >
       <BaseImagePlaceholder
         :aspect-ratio="constrain ? '16:9' : 'none'"
@@ -100,7 +124,11 @@ export default defineComponent({
       v-if="theData && hasCaptionArea"
       class="lg:px-0 p-4 pb-0 print:pl-0"
     >
-      <BaseImageCaption :data="theData" />
+      <BaseImageCaption
+        :data="theData"
+        :custom-link="customDetailUrl"
+        custom-link-text="Full Image Details"
+      />
     </div>
   </div>
 </template>
diff --git a/packages/vue/src/components/BlockImageComparison/BlockImageComparison.vue b/packages/vue/src/components/BlockImageComparison/BlockImageComparison.vue
index b4e83454..5a90f624 100644
--- a/packages/vue/src/components/BlockImageComparison/BlockImageComparison.vue
+++ b/packages/vue/src/components/BlockImageComparison/BlockImageComparison.vue
@@ -1,38 +1,41 @@
 <template>
   <div v-if="data">
-    <client-only placeholder="Loading Image Comparison...">
-      <VueCompareImage
-        v-if="theBeforeImageSrc && theAfterImageSrc"
-        class="h-full animate-fadeIn"
-        :left-image="theBeforeImageSrc.url"
-        left-image-alt="Left image"
-        :right-image="theAfterImageSrc.url"
-        right-image-alt="Right image"
-      />
-    </client-only>
+    <VueCompareImage
+      v-if="theBeforeImageSrc && theAfterImageSrc"
+      class="h-full animate-fadeIn"
+      :left-image="theBeforeImageSrc.url"
+      left-image-alt="Left image"
+      :right-image="theAfterImageSrc.url"
+      right-image-alt="Right image"
+    />
     <div
-      v-if="data.caption && data.caption.length > 2"
-      class="text-gray-mid-dark mt-3"
-      v-html="data.caption"
-    ></div>
+      v-if="data.caption || customDetailUrl"
+      class="lg:px-0 p-4 pb-0 print:pl-0"
+    >
+      <BaseImageCaption
+        :data="{ caption: data.caption }"
+        :custom-link="customDetailUrl"
+        custom-link-text="Full Image Details"
+      />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-// import VueCompareImage from 'vue3-compare-image'
-
-// const VueCompareImage = process.browser ? require('vue3-compare-image') : null
+import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
 
 export default defineComponent({
   name: 'BlockImageComparison',
-  // components: {
-  //   VueCompareImage,
-  // },
+  components: { BaseImageCaption },
   props: {
     data: {
       type: Object,
       required: true
+    },
+    customDetailUrl: {
+      type: String,
+      default: undefined
     }
   },
   computed: {
diff --git a/packages/vue/src/components/BlockVideo/BlockVideo.vue b/packages/vue/src/components/BlockVideo/BlockVideo.vue
index 698e7f05..6539bd48 100644
--- a/packages/vue/src/components/BlockVideo/BlockVideo.vue
+++ b/packages/vue/src/components/BlockVideo/BlockVideo.vue
@@ -9,15 +9,21 @@
     />
 
     <div
-      v-if="(data.caption && data.caption.length > 2) || data.credit"
+      v-if="hasCaption"
       class="lg:px-0 p-4 pb-0 print:pl-0"
     >
-      <BaseImageCaption :data="data" />
+      <BaseImageCaption
+        :data="data"
+        :custom-link="customDetailUrl"
+        custom-link-text="Full Video Details"
+      />
     </div>
   </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 import BaseVideo from './../BaseVideo/BaseVideo.vue'
 import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
 
@@ -35,6 +41,20 @@ export default defineComponent({
     autoplay: {
       type: Boolean,
       default: false
+    },
+    customDetailUrl: {
+      type: String,
+      default: undefined
+    }
+  },
+  computed: {
+    ...mapStores(useThemeStore),
+    hasCaption() {
+      if (this.themeStore.isEdu) {
+        return this.data?.caption || this.customDetailUrl
+      } else {
+        return this.data?.caption || this.data?.credit || this.customDetailUrl
+      }
     }
   }
 })
diff --git a/packages/vue/src/components/BlockVideoEmbed/BlockVideoEmbed.vue b/packages/vue/src/components/BlockVideoEmbed/BlockVideoEmbed.vue
index a9cb3bf3..2a3f5040 100644
--- a/packages/vue/src/components/BlockVideoEmbed/BlockVideoEmbed.vue
+++ b/packages/vue/src/components/BlockVideoEmbed/BlockVideoEmbed.vue
@@ -10,10 +10,14 @@
       <div v-html="data.embed.embed"></div>
     </BaseImagePlaceholder>
     <div
-      v-if="data.caption"
+      v-if="data.caption || customDetailUrl"
       class="lg:px-0 p-4 print:pl-0"
     >
-      <BaseImageCaption :data="data" />
+      <BaseImageCaption
+        :data="data"
+        :custom-link="customDetailUrl"
+        custom-link-text="Full Video Details"
+      />
     </div>
   </div>
 </template>
@@ -45,6 +49,10 @@ export default defineComponent({
       type: Object as PropType<Partial<BlockData>>,
       required: false,
       default: undefined
+    },
+    customDetailUrl: {
+      type: String,
+      default: undefined
     }
   },
   mounted() {
diff --git a/packages/vue/src/components/DetailHeadline/DetailHeadline.vue b/packages/vue/src/components/DetailHeadline/DetailHeadline.vue
index 45ad2e5f..eab41549 100644
--- a/packages/vue/src/components/DetailHeadline/DetailHeadline.vue
+++ b/packages/vue/src/components/DetailHeadline/DetailHeadline.vue
@@ -100,12 +100,13 @@
         <span :itemprop="schema ? 'name' : undefined"> Jet Propulsion Laboratory </span>
         <span :itemprop="schema ? 'url' : undefined"> https://www.jpl.nasa.gov/ </span>
       </span>
-      <span v-if="publicationDate">
-        <meta
-          v-if="schema"
-          itemprop="datePublished"
-          :content="pubDatetime"
-        />
+      <meta
+        v-if="schema && publicationDate"
+        itemprop="datePublished"
+        :content="pubDatetime"
+      />
+
+      <span v-if="publicationDate && !hideDate">
         {{
           // @ts-ignore
           $filters.displayDate(publicationDate)
@@ -186,6 +187,10 @@ export default defineComponent({
     schema: {
       type: Boolean,
       default: false
+    },
+    hideDate: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
diff --git a/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.stories.js b/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.stories.js
index db1a764a..bc12d56f 100644
--- a/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.stories.js
+++ b/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.stories.js
@@ -1,4 +1,3 @@
-import { BlockKeyPointsData } from './../../../components/BlockKeyPoints/BlockKeyPoints.stories'
 import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
 import { EventsBlockLinkCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories'
 import { AboutTheAuthorData } from './../../../components/AboutTheAuthor/AboutTheAuthor.stories'
@@ -33,6 +32,12 @@ const PageEduGalleryDetailData = {
   authors: AboutTheAuthorData,
 
   body: [
+    {
+      blockType: 'HeadingBlock',
+      heading: 'Gallery Body',
+      level: 'h2',
+      size: 'h2'
+    },
     {
       blockType: 'RichTextBlock',
       value:
@@ -75,6 +80,7 @@ export const BaseStory = {
         {
           blockId: `${Math.random().toString(36).slice(2)}`,
           heading: 'Gallery Item Heading',
+          externalLink: 'https://nasa.gov',
           description:
             '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
           media: [{ ...BlockImageData, blockType: 'ImageBlock' }]
@@ -82,22 +88,25 @@ export const BaseStory = {
         {
           blockId: `${Math.random().toString(36).slice(2)}`,
           heading: 'Gallery Item Heading',
+          externalLink: 'https://nasa.gov',
           description:
-            '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
+            '<p data-block-key="5f55p">Description with richtext images.</p><img alt="Perseverance Looks Back at &amp;#x27;Bright Angel&amp;#x27;" class="richtext-image full-width" height="600" src="https://picsum.photos/800/600" width="800"><p data-block-key="89jcq">More text and an image that&#x27;s full width (above)</p><p data-block-key="6jsp"></p><img alt="Carbon Mapper Coalition&amp;#x27;s Tanager Satellite" class="richtext-image right" height="263" src="https://picsum.photos/500/263" width="500"><p data-block-key="4409g">More text and an image that&#x27;s right-aligned. Morbi mollis magna erat, a tristique libero laoreet ut. Curabitur sit amet arcu laoreet, aliquet nibh at, dictum sapien. Duis a tempus nibh. Phasellus porta felis id diam fringilla tincidunt. Curabitur eget gravida leo. Vestibulum sapien nibh, pharetra eget ornare eu, tristique at purus.</p><p data-block-key="bid36"></p><img alt="Lecture Brings Galileo&amp;#x27;s Travels into Final Focus" class="richtext-image left" height="273" src="https://picsum.photos/500/273" width="500"><p data-block-key="1f4rd">More text and an image that&#x27;s left-aligned. Morbi mollis magna erat, a tristique libero laoreet ut. Curabitur sit amet arcu laoreet, aliquet nibh at, dictum sapien. Duis a tempus nibh. Phasellus porta felis id diam fringilla tincidunt. Curabitur eget gravida leo. Vestibulum sapien nibh, pharetra eget ornare eu, tristique at purus. Duis id risus sit amet est maximus placerat a quis sem. Donec lacus sem, cursus at quam sit amet, consequat vestibulum nulla. </p>',
           media: [BlockImageComparisonData]
         },
         {
           blockId: `${Math.random().toString(36).slice(2)}`,
           heading: 'Gallery Item Heading',
+          externalLink: 'https://nasa.gov',
           description:
-            '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
+            '<p data-block-key="5f55p">Description with a richtext embedded video below it.</p><div>\n    <iframe width="200" height="113" src="https://www.youtube.com/embed/C5aC-U9jHDE?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen title="How Do We Know Where Faraway Spacecraft Are?"></iframe>\n</div>\n<p data-block-key="4t2tv">More text below the embedded video.</p>',
           media: [BlockVideoData.block]
         },
         {
           blockId: `${Math.random().toString(36).slice(2)}`,
           heading: 'Gallery Item Heading',
+          externalLink: 'https://nasa.gov',
           description:
-            '<p data-block-key="53wg6">Description that is <strong>rich text</strong>.</p>',
+            '<p data-block-key="5f55p">Description with richtext images.</p><img alt="Perseverance Looks Back at &amp;#x27;Bright Angel&amp;#x27;" class="richtext-image full-width" height="600" src="https://picsum.photos/800/600" width="800"><p data-block-key="89jcq">More text and another image that&#x27;s full width (above)</p><p data-block-key="6jsp"></p><img alt="Carbon Mapper Coalition&amp;#x27;s Tanager Satellite" class="richtext-image right" height="263" src="https://picsum.photos/500/263" width="500"><p data-block-key="4409g">Short text in-between two floating images.</p><p data-block-key="bid36"></p><img alt="Lecture Brings Galileo&amp;#x27;s Travels into Final Focus" class="richtext-image left" height="273" src="https://picsum.photos/500/273" width="500"><p data-block-key="1f4rd">More text and something that&#x27;s left-aligned. Morbi mollis magna erat, a tristique libero laoreet ut. Curabitur sit amet arcu laoreet, aliquet nibh at, dictum sapien. Duis a tempus nibh. Phasellus porta felis id diam fringilla tincidunt. Curabitur eget gravida leo. Vestibulum sapien nibh, pharetra eget ornare eu, tristique at purus.</p>',
           media: [BlockVideoEmbedData.data]
         }
       ]
diff --git a/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue b/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue
index 61ea9467..dc836396 100644
--- a/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue
+++ b/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue
@@ -16,6 +16,7 @@ import BlockVideoEmbed from './../../../components/BlockVideoEmbed/BlockVideoEmb
 import BlockRelatedLinks from './../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
 import BlockText from './../../../components/BlockText/BlockText.vue'
+import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
 import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
 import AboutTheAuthor from './../../../components/AboutTheAuthor/AboutTheAuthor.vue'
 import { getHeadingId } from '../../../utils/getHeadingId'
@@ -25,6 +26,7 @@ interface PageEduGalleryObject extends PageEduResourcesObject {
     blockId: string
     heading?: string
     description?: string
+    externalLink?: string
     media: StreamfieldBlockData[]
   }[]
 }
@@ -57,6 +59,7 @@ const jumpMenuHeadings = computed((): BreadcrumbPathObject[] => {
   }
   return itemHeadings
 })
+
 const { data } = reactive(props)
 </script>
 <template>
@@ -77,6 +80,7 @@ const { data } = reactive(props)
         :publication-date="data.publicationDate"
         schema
         pill
+        hide-date
       />
       <ShareButtonsEdu
         v-if="data?.url"
@@ -104,7 +108,10 @@ const { data } = reactive(props)
       :key="index"
       class="PageEduGalleryDetailItem"
     >
-      <template v-if="item.media?.length">
+      <div
+        v-if="item.media?.length"
+        class="PageEduGalleryDetailItem__media mb-5 lg:mb-12"
+      >
         <template
           v-for="(block, _media_index) in item.media"
           :key="_media_index"
@@ -113,41 +120,41 @@ const { data } = reactive(props)
             <LayoutHelper
               v-if="block.image"
               indent="col-2"
-              class="mb-5 lg:mb-10"
             >
               <BlockImageStandard
                 :data="block.image"
                 :caption="block.caption"
                 :display-caption="block.displayCaption"
+                :custom-detail-url="item.externalLink"
               />
             </LayoutHelper>
           </template>
           <template v-else-if="block.blockType === 'ImageComparisonBlock'">
-            <LayoutHelper
-              indent="col-2"
-              class="mb-5 lg:mb-10"
-            >
-              <BlockImageComparison :data="block" />
+            <LayoutHelper indent="col-2">
+              <BlockImageComparison
+                :data="block"
+                :custom-detail-url="item.externalLink"
+              />
             </LayoutHelper>
           </template>
           <template v-else-if="block.blockType === 'VideoBlock'">
-            <LayoutHelper
-              indent="col-2"
-              class="mb-5 lg:mb-10"
-            >
-              <BlockVideo :data="block" />
+            <LayoutHelper indent="col-2">
+              <BlockVideo
+                :data="block"
+                :custom-detail-url="item.externalLink"
+              />
             </LayoutHelper>
           </template>
           <template v-else-if="block.blockType === 'VideoEmbedBlock'">
-            <LayoutHelper
-              indent="col-2"
-              class="mb-5 lg:mb-10"
-            >
-              <BlockVideoEmbed :data="block" />
+            <LayoutHelper indent="col-2">
+              <BlockVideoEmbed
+                :data="block"
+                :custom-detail-url="item.externalLink"
+              />
             </LayoutHelper>
           </template>
         </template>
-      </template>
+      </div>
       <LayoutHelper
         v-if="item.heading || item.description"
         indent="col-3"
@@ -164,6 +171,7 @@ const { data } = reactive(props)
         />
       </LayoutHelper>
       <LayoutHelper
+        v-if="index + 1 !== data.galleryItems?.length"
         indent="col-2"
         class="pt-10 lg:pt-18 mb-10 lg:mb-18"
       >
@@ -171,6 +179,16 @@ const { data } = reactive(props)
       </LayoutHelper>
     </div>
 
+    <div
+      v-if="data.body?.length"
+      class="my-10 lg:my-18"
+    >
+      <BlockStreamfield
+        v-if="data.body?.length"
+        :data="data.body"
+      />
+    </div>
+
     <!-- related links -->
     <LayoutHelper
       v-if="data.relatedLinks && data.relatedLinks.length"
diff --git a/packages/vue/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.vue b/packages/vue/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.vue
index 35d6c7f9..3bd9a509 100644
--- a/packages/vue/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.vue
+++ b/packages/vue/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.vue
@@ -180,6 +180,7 @@ const { data } = reactive(props)
         :publication-date="data.publicationDate"
         schema
         pill
+        hide-date
       />
       <ShareButtonsEdu
         v-if="data?.url"