fixing minor issues on multimedia templates (#584)

nasa-jpl · Aug 29, 2024 · 4475aa9 · 4475aa9
1 parent baf4f90
commit 4475aa9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue b/packages/vue/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue
@@ -115,7 +115,11 @@ const { data } = reactive(props)
               indent="col-2"
               class="mb-5 lg:mb-10"
             >
-              <BlockImageStandard :data="block.image" />
+              <BlockImageStandard
+                :data="block.image"
+                :caption="block.caption"
+                :display-caption="block.displayCaption"
+              />
             </LayoutHelper>
           </template>
           <template v-else-if="block.blockType === 'ImageComparisonBlock'">

diff --git a/packages/vue/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.vue b/packages/vue/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.vue
@@ -5,7 +5,7 @@ import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
 import BaseHeading from './../../../components/BaseHeading/BaseHeading.vue'
 import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
 import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
-import BaseVideo from './../../../components/BaseVideo/BaseVideo.vue'
+import BlockVideo from './../../../components/BlockVideo/BlockVideo.vue'
 import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
 import BlockVideoEmbed from './../../../components/BlockVideoEmbed/BlockVideoEmbed.vue'
 import BaseButton from './../../../components/BaseButton/BaseButton.vue'
@@ -143,7 +143,7 @@ const creditText = computed(() => {
     case 'image':
       return heroImage.value?.credit
     case 'video':
-      return videoBlock.value?.caption
+      return videoBlock.value?.credit
     case 'document':
       return data.credit
     default:
@@ -263,8 +263,8 @@ const { data } = reactive(props)
       />
       <template v-if="videoBlock.blockType === 'VideoBlock' && videoBlock.video">
         <div class="max-w-screen-2xl lg:mb-24 mx-auto mt-10 mb-8">
-          <BaseVideo
-            :data="videoBlock.video"
+          <BlockVideo
+            :data="videoBlock"
             schema
           />
         </div>
@@ -297,7 +297,6 @@ const { data } = reactive(props)
       />
 
       <div class="max-w-screen-3xl lg:mb-24 mx-auto mt-10 mb-8">
-        <!-- inline hero content -->
         <LayoutHelper
           v-if="heroImage"
           indent="col-2"
@@ -311,8 +310,6 @@ const { data } = reactive(props)
       </div>
     </template>
 
-    <!-- !Gallery body -->
-
     <LayoutHelper indent="col-2">
       <div class="lg:grid grid-cols-12">
         <div
@@ -430,5 +427,14 @@ const { data } = reactive(props)
   .bg-stars .MixinCarousel__Heading {
     @apply text-white;
   }
+  .BlockVideo,
+  .BlockVideoEmbed {
+    .BaseImageCaption {
+      @apply px-4 sm:px-5;
+      @screen 3xl {
+        @apply px-0;
+      }
+    }
+  }
 }
 </style>