search

UCLALibrary / ucla-library-website-components

This is a library of Vue components that will be used in UCLA Library Nuxt websites.
Other
4 stars 1 forks source link

Component Request - Update ResponsiveImage to include creditText #520

Open jendiamond opened 2 weeks ago

jendiamond commented 2 weeks ago

Component Description

Update the ResponsiveImage component so if the creditText field exists creditText will be displayed at the bottom right corner.

Screenshot 2024-06-12 at 3 52 44 PM

Design

Please also see attached screenshots for reference.

Slots

No slots needed.

Props

No props needed creditText will come in through the slot.

Developer Tips

Used a named slot for creditText https://vuejs.org/guide/components/slots

  1. if creditText if it exists if Token: FTVA/ d/captions + credits (captions/credits font style)
    • creditText will be displayed at the bottom right corner
    • background: var(--Colors-Black-off-black, #191919;
    • opacity: 0.6;
    • allCaps
    • padding: 8 16;
    • z-index: 20 or 30;
    • caption { position: absolute; bottom: 0; right: 0; }

NOTE: Caption is included in the image field but creditText is a different field that is NOT include in the image object. It needs to be added and referred to separately.

  1. Use ResponsiveImage

DATA from the FTVA Events Detail Page in Craft

{
  data: {
    entry: {
      typeHandle: "ftvaEvent",
      title: "La Région Centrale 03-08-24",
      imageCarousel: [
        {
          id: "3108930",
          image: [
            {
              id: "3108924",
              src: "http://craft.ddev.site/assets/_fullscreen/RégionCentrale_2024-06-12-202956_wpgd.jpeg",
              height: 1915,
              width: 2560,
              srcset: "http://craft.ddev.site/assets/_375xAUTO_crop_center-center_none/RégionCentrale_2024-06-12-202956_wpgd.jpeg 375w, http://craft.ddev.site/assets/_960xAUTO_crop_center-center_none/RégionCentrale_2024-06-12-202956_wpgd.jpeg 960w, http://craft.ddev.site/assets/_1280xAUTO_crop_center-center_none/RégionCentrale_2024-06-12-202956_wpgd.jpeg 1280w, http://craft.ddev.site/assets/_1920xAUTO_crop_center-center_none/RégionCentrale_2024-06-12-202956_wpgd.jpeg 1920w, http://craft.ddev.site/assets/_2560xAUTO_crop_center-center_none/RégionCentrale_2024-06-12-202956_wpgd.jpeg 2560w",
              alt: null,
              focalPoint: [
                0.5,
                0.5
              ]
            }
          ],
          creditText: "Micahel Snow"
        },
        {
          id: "3108743",
          image: [
            {
              id: "3108929",
              src: "http://craft.ddev.site/assets/_fullscreen/RégionCentrale2_2024-06-12-203017_saem.jpeg",
              height: 1915,
              width: 2560,
              srcset: "http://craft.ddev.site/assets/_375xAUTO_crop_center-center_none/RégionCentrale2_2024-06-12-203017_saem.jpeg 375w, http://craft.ddev.site/assets/_960xAUTO_crop_center-center_none/RégionCentrale2_2024-06-12-203017_saem.jpeg 960w, http://craft.ddev.site/assets/_1280xAUTO_crop_center-center_none/RégionCentrale2_2024-06-12-203017_saem.jpeg 1280w, http://craft.ddev.site/assets/_1920xAUTO_crop_center-center_none/RégionCentrale2_2024-06-12-203017_saem.jpeg 1920w, http://craft.ddev.site/assets/_2560xAUTO_crop_center-center_none/RégionCentrale2_2024-06-12-203017_saem.jpeg 2560w",
              alt: null,
              focalPoint: [
                0.5,
                0.5
              ]
            }
          ],
          creditText: "Michelle Snow"
        }
      ]
    }
  }
}

Query

query FTVADetail($slug: [String!]) {
  entry(section: "ftvaEvent", slug: $slug) {
    id
    typeHandle
    title
    uri
    slug
    ... on ftvaEvent_ftvaEvent_Entry {
      id
      imageCarousel {
        ... on imageCarousel_imageCarousel_BlockType {
          id
          image {
                    ...Image
                }
          creditText
        }
      }
    }
  }
}

fragment Image on AssetInterface {
    id
    src: url(transform: "fullscreen")
    height(transform: "fullscreen")
    width(transform: "fullscreen")
    srcset(sizes: ["375", "960", "1280", "1920", "2560"])
    alt: altText
    focalPoint
}

Child components

None

pghorpade commented 2 weeks ago

@jendiamond will update this component to remove any references to BannerHeader. Also, There is no child component, this is not a new component we will add a credit prop to ResponsiveImage directly. The top description needs to specify that the details are from the Craft. @jendiamond will research further how to use slots for overlaying the credit for FTVA in ResponsiveImage component.

pghorpade commented 2 weeks ago

@jendiamond We will not need the creditText prop if we use a named slot with the conditional slot name check feature of Vue.