Page Request - ARSC and IMCS

[farosFreed]

Page Description

This request is for a single template that will be used to render 2 page paths:
/archive-research-study-center from this craft cms data

/instructional-media-collections-services from this craft cms data

Youtube video walkthrough

Design

Please also see attached screenshots for quick reference.

• https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/%5BFTVA%5D-Final-Design-with-Annotations?node-id=7117-835&p=f&t=KcriQI1Gnve7dcyO-0

If no mobile designs provided, please use your best judgment for responsiveness.

GraphQL

query FTVAARSCIMCS($section: [String!]) {
  entry(section: $section) {
    id
    typeHandle
    sectionHandle
    title: titleGeneral
    summary
    displaySummary
    ftvaAlternativeTitle
    ftvaHomepageDescription

    imageCarousel {
      ... on imageCarousel_imageCarousel_BlockType {
        image {
          ...Image
        }
        creditText
      }
    }

    ftvaImage {
      ...Image
    }

    ...AllFtvaFpb
  }
}

Developer Tips

List any developer tips here

1. You will need to create a graphQL query that looks at the current route to query the data

   • assuming the fields on both types are 100% the same, you should only need 1 graphQL query. If there are differences, create 2 different .gql queries

2. Layout / Multi-Page Setup: To prevent code duplication there should only be 1 file with the page layout code for both of these pages. You can either place the page in 1 directory and use an alias to cover the other path like so:

definePageMeta({
  layout: 'default',
  path: '/archive-research-study-center',
  alias: ['/instructional-media-collections-services/']
})

OR you can try implementing a layout, (this option becomes more useful if we need a different GQL querie for each page):

<script setup lang="ts">
definePageMeta({
  layout: false,
})
</script>

<template>
  <div>
    <NuxtLayout name="custom">
      <template #header> Some header template content. </template>

      The rest of the page
    </NuxtLayout>
  </div>
</template>

Child components

List out any components that are used by this new Page.

1. FlexibleMediaGalleryNewLightbox.vue
2. ResponsiveImage.vue
3. FlexibleBlocks.vue used for the rest of the content on the page
4. SectionWrapper.vue if needed for page layout spacing.

Screenshots