Page Request -collections/la-rebellion/filmmakers/[slug].vue for FTVA FilmMaker detail craft entry.

[pghorpade]

Page Description

This Page is used to display the details of filmmakers and contributors for the LA Rebellion collection.

YouTube video walk-through: LA Rebellion pages

The first iteration of requirements: Excel

Design

Please also see attached screenshots for quick reference.

• Desktop: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/%5BFTVA%5D-Final-Design-with-Annotations?node-id=2328-80&p=f&t=iLA4QBuXO0ffBazg-0
• Mobile: not finished

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

Developer Tips

1. Route link to set up in the Nuxt pages folder is pages/collections/la-rebellion/filmmakers/[slug].vue
2. Partially pending: GQL query

#import "../gql/fragments/Image.gql"

query ftvaLARebellionIndividual {
  entry(section: "ftvaLARebellionIndividual", slug: "larry-clark") {
    typeHandle
    id
    nameFirst
    nameLast
    imageCarousel {
      ... on imageCarousel_imageCarousel_BlockType {
        image {
          ...Image
        }
        creditText
      }
    }
    richText
    slug
    to: uri
    associatedFilms {
      image {
        ...Image
      }
      titleGeneral
      description
      roles
      year
      filmLink {
        uri
        slug
      }
    }
  }
}

5. Computed Property for Fullname; it is used in the Breadcrumb and as the title
6. Breadcrumb: Collections > L.A. Rebellion > Filmmakers and Contributors > [First Name Last Name]
7. Hero Image
8. The Category (L.A. Rebellion)
   • This can be hard coded as L.A. Rebellion
   • It links to the landing/listing page for LA Rebellion
   • Rollover behavior is the same as the Events page
9. Heading/Title (Gay Abel-Bay) - Combine First & Last Name
10. Share button

          <template #sharebutton>
            <ButtonDropdown
              data-test="share-button"
              button-title="Share"
              :has-icon="true"
              :dropdown-list="socialList.dropdownList"
            />
          </template>

12. Rich-Text Description

        <RichText
          v-if="page?.richText"
          data-test="richText"
          class="richText"
          :rich-text-content="page?.richText"
        />

16. Filmography
    • Use the Staff Subject Librarian Component
    • GQL - Related Collection item entries collection item entry ? @axamei please clarify
    • Image Truncated Description Title Role Year
    • Same Mobile view as the original Staff Subject Librarian component

Child components

• <SectionStaffSubjectLibrarian />
• <TwoColLayoutWStickySideBar>
• <CardMeta>
• <ButtonDropdown />
• <RichText />