diff --git a/components/content-blocks/Callout/CalloutEntry/index.js b/components/content-blocks/Callout/CalloutEntry/index.js index 1c434791..1256f777 100644 --- a/components/content-blocks/Callout/CalloutEntry/index.js +++ b/components/content-blocks/Callout/CalloutEntry/index.js @@ -50,7 +50,7 @@ export default function CalloutEntry({ callout }) { description, subtitle, hero, - image: featureImage, + image, images: releaseImages, entryType, } = entryWithRelease || entry[0]; @@ -63,8 +63,8 @@ export default function CalloutEntry({ callout }) { lang ); const calloutImage = - featureImage?.[0] || - makeReleaseFeature(releaseImages, "thumb700x")?.[0] || + image?.[0] || + makeReleaseFeature(releaseImages, "screen640")?.[0] || hero?.[0]; return ( diff --git a/components/content-blocks/GridBlock/CarouselGrid/index.js b/components/content-blocks/GridBlock/CarouselGrid/index.js index aaf0aa82..9b113dba 100644 --- a/components/content-blocks/GridBlock/CarouselGrid/index.js +++ b/components/content-blocks/GridBlock/CarouselGrid/index.js @@ -43,7 +43,7 @@ function CarouselGrid({ title, description, plainText, - image: featureImage, + image, hero, images: releaseImages, mixedLink, @@ -54,8 +54,8 @@ function CarouselGrid({ { description, subtitle, id, - image: featureImage, + image, hero, images: releaseImages, newsAssets, @@ -63,8 +63,8 @@ const NewsGrid = ({ items = [], limit, listTypeId, sectionHandle, pageId }) => { button: t("read-more"), }} image={ - featureImage?.[0] || - makeReleaseFeature(releaseImages, "thumb700x")?.[0] || + image?.[0] || + makeReleaseFeature(releaseImages, "screen640")?.[0] || hero?.[0] } isFeature={i === 0} diff --git a/components/dynamic/EventList/index.js b/components/dynamic/EventList/index.js index 38207e7a..519d806b 100644 --- a/components/dynamic/EventList/index.js +++ b/components/dynamic/EventList/index.js @@ -44,7 +44,7 @@ const EventList = ({ description, id, hero, - image: featureImage, + image, eventType, registrationCloseDate, registrationOpenDate, @@ -83,7 +83,7 @@ const EventList = ({ } : null } - image={featureImage?.[0] || hero?.[0]} + image={image?.[0] || hero?.[0]} link={uri} pretitle={ gridType === "events" && eventType?.[0]?.title diff --git a/components/dynamic/NewsList/index.js b/components/dynamic/NewsList/index.js index ab34c81c..453eb0ae 100644 --- a/components/dynamic/NewsList/index.js +++ b/components/dynamic/NewsList/index.js @@ -53,7 +53,7 @@ const NewsList = ({ subtitle, id, hero, - image: featureImage, + image, images: releaseImages, newsAssets, postType, @@ -73,7 +73,7 @@ const NewsList = ({ : null } image={ - featureImage?.[0] || + image?.[0] || makeReleaseFeature(releaseImages)?.[0] || hero?.[0] } diff --git a/components/dynamic/RelatedList/index.js b/components/dynamic/RelatedList/index.js index 3ee28d6d..435986ba 100644 --- a/components/dynamic/RelatedList/index.js +++ b/components/dynamic/RelatedList/index.js @@ -37,7 +37,7 @@ const RelatedList = ({ id, description, hero, - image: featureImage, + image, images: releaseImages, title, uri, @@ -47,8 +47,8 @@ const RelatedList = ({ {({ @@ -29,12 +29,7 @@ export default function Body({ children, description, featuredImage, title }) { return ( <> - +
{`${title} | ${siteTitle}`} @@ -104,6 +104,6 @@ HtmlHead.propTypes = { siteInfo: siteInfoShape, title: PropTypes.string, description: PropTypes.string, - featuredImage: PropTypes.arrayOf(imageShape), + openGraphImage: PropTypes.arrayOf(imageShape), children: PropTypes.node, }; diff --git a/components/templates/EventPage/index.js b/components/templates/EventPage/index.js index 628d6933..87affcdd 100644 --- a/components/templates/EventPage/index.js +++ b/components/templates/EventPage/index.js @@ -28,7 +28,7 @@ export default function EventPage({ endTime, description, eventType = [], - featuredImage = [], + openGraphImage = [], hero = [], focalPointX, focalPointY, @@ -45,7 +45,7 @@ export default function EventPage({ const rootHomeLink = customBreadcrumbs.slice(-1)[0]; const bodyProps = { description, - featuredImage, + openGraphImage, title, }; const pageLink = { diff --git a/components/templates/GalleryPage/index.js b/components/templates/GalleryPage/index.js index 164ec3ba..c3525042 100644 --- a/components/templates/GalleryPage/index.js +++ b/components/templates/GalleryPage/index.js @@ -26,7 +26,7 @@ export default function GalleryPage({ assetVariants, credit, customDateCreated, - featuredImage, + openGraphImage, galleryItemCategory, galleryItemTags, id, @@ -53,7 +53,7 @@ export default function GalleryPage({ const { t } = useTranslation(); const bodyProps = { description: striptags(richTextDescription), - featuredImage, + openGraphImage, title, }; @@ -84,7 +84,7 @@ export default function GalleryPage({ title, }; - const image = featuredImage[0]; + const image = openGraphImage[0]; // localized dates const localizedMetadataDate = useDateString(metadataDate); diff --git a/components/templates/GlossaryPage/index.js b/components/templates/GlossaryPage/index.js index 44aadec8..53ee253e 100644 --- a/components/templates/GlossaryPage/index.js +++ b/components/templates/GlossaryPage/index.js @@ -25,7 +25,7 @@ export default function GlossaryPage({ data }) { const bodyProps = { description, - featuredImage: image, + openGraphImage: image, title, }; diff --git a/components/templates/NewsPage/index.js b/components/templates/NewsPage/index.js index dedd06c8..fe298ca9 100644 --- a/components/templates/NewsPage/index.js +++ b/components/templates/NewsPage/index.js @@ -23,7 +23,6 @@ export default function NewsPage({ data }) { contentBlocksNews = [], description, headline, - featuredImage = [], hero = [], focalPointX, focalPointY, @@ -33,13 +32,21 @@ export default function NewsPage({ data }) { postTags, title, uri, + openGraphImage, images: releaseImages, videos: releaseVideos, } = entryWithRelease || data; + + const heroImage = + hero?.length > 0 ? hero : makeReleaseFeature(releaseImages, "banner1920"); + const { t } = useTranslation(); const bodyProps = { description: description || headline, - featuredImage, + openGraphImage: + openGraphImage?.length > 0 + ? openGraphImage + : makeReleaseFeature(releaseImages, "screen640"), title, }; const customBreadcrumbs = useCustomBreadcrumbs("News"); @@ -92,11 +99,7 @@ export default function NewsPage({ data }) { 0 - ? hero - : makeReleaseFeature(releaseImages, "banner1920") - } + data={heroImage} narrowCaption={showAside} {...{ focalPointX, focalPointY }} /> diff --git a/components/templates/Page/index.js b/components/templates/Page/index.js index 7d954c17..1de1826e 100644 --- a/components/templates/Page/index.js +++ b/components/templates/Page/index.js @@ -28,7 +28,6 @@ export default function Page({ description, dynamicComponent, eventFilter = [], - featuredImage, hero, focalPointX, focalPointY, @@ -42,6 +41,7 @@ export default function Page({ subHeroHeader, subHeroText, subHeroColorScheme, + openGraphImage, parent, showGuideNav, showSidebar, @@ -58,7 +58,7 @@ export default function Page({ const { t } = useTranslation(); const bodyProps = { description, - featuredImage, + openGraphImage, title, }; const pageLink = { diff --git a/components/templates/SlideshowPage/index.js b/components/templates/SlideshowPage/index.js index 7fe98bf6..7fe5e15d 100644 --- a/components/templates/SlideshowPage/index.js +++ b/components/templates/SlideshowPage/index.js @@ -16,13 +16,13 @@ import { containerFull, respond } from "@/styles/globalStyles"; export default function SlideshowPage({ data: { - entry: { featuredImage, id, description, title, uri, items }, + entry: { openGraphImage, id, description, title, uri, items }, }, }) { const { t } = useTranslation(); const bodyProps = { description: striptags(description), - featuredImage, + openGraphImage, title, }; @@ -40,7 +40,7 @@ export default function SlideshowPage({ id, title, description, - image: featuredImage, + image: openGraphImage, }, ...items, ]; diff --git a/components/templates/StaffPage/index.js b/components/templates/StaffPage/index.js index f8e0efb8..77940d90 100644 --- a/components/templates/StaffPage/index.js +++ b/components/templates/StaffPage/index.js @@ -26,7 +26,7 @@ function getParentEntry(rootPages) { export default function StaffPage({ data: { - featuredImage = [], + openGraphImage = [], id, uri, title, @@ -43,7 +43,7 @@ export default function StaffPage({ const parentUri = getParentUri(uri); const parentEntry = getParentEntry(rootPages); const bodyProps = { - featuredImage, + openGraphImage, title, }; const pageLink = { diff --git a/lib/api/fragments/content-blocks.js b/lib/api/fragments/content-blocks.js index 0affb3f0..b9a7b341 100644 --- a/lib/api/fragments/content-blocks.js +++ b/lib/api/fragments/content-blocks.js @@ -50,7 +50,7 @@ export const calloutBlockFragment = ` image: contentImage { ...on contentImages_Asset { ${getImageFields("crop", 900, 550)} - } + } } links { ...links @@ -71,7 +71,7 @@ export const calloutBlockFragment = ` imageQuote { ...on contentImages_Asset { ${getImageFields("crop", 492, 492)} - } + } } } ... on callouts_calloutNews_Entry { @@ -91,8 +91,8 @@ export const calloutBlockFragment = ` ${getImageFields("crop", 900, 550)} } } - image: featuredImage { - ...on contentImages_Asset { + image: hero { + ...on heroes_Asset { ${getImageFields("crop", 900, 550)} } } @@ -119,8 +119,8 @@ export const calloutBlockFragment = ` ${getImageFields("crop", 900, 550)} } } - image: featuredImage { - ...on contentImages_Asset { + image: hero { + ...on heroes_Asset { ${getImageFields("crop", 900, 550)} } } @@ -326,8 +326,8 @@ export const newsBlockFragment = ` ${getImageFields("crop", 900, 550)} } } - image: featuredImage { - ...on contentImages_Asset { + image: hero { + ...on heroes_Asset { ${getImageFields("crop", 900, 550)} } } @@ -362,8 +362,8 @@ export const relatedContentFragment = ` ${getImageFields("crop", 900, 550)} } } - image: featuredImage { - ...on contentImages_Asset { + image: hero { + ...on heroes_Asset { ${getImageFields("crop", 900, 550)} } } @@ -375,8 +375,8 @@ export const relatedContentFragment = ` ${getImageFields("crop", 900, 550)} } } - image: featuredImage { - ...on contentImages_Asset { + image: hero { + ...on heroes_Asset { ${getImageFields("crop", 900, 550)} } } @@ -565,7 +565,7 @@ export const downloadListBlockFragment = ` } } } - } + } } `; @@ -578,7 +578,7 @@ export const embedBlockFragment = ` fullWidth embedCode embedUrl: externalUrl - } + } } `; @@ -588,7 +588,7 @@ export const summitStatusBlockFragment = ` id typeHandle summitStatusLayout - } + } } `; @@ -702,7 +702,7 @@ export const allPageBlocks = ` ...staffGridBlock ...tableGroupBlock ...textBlock - ...videoBlock + ...videoBlock ...downloadListBlock ...embedBlock ...summitStatusBlock @@ -795,8 +795,8 @@ export const relatedContentNewsFragment = ` uri ... on pages_pages_Entry { description - image: featuredImage { - ...on contentImages_Asset { + image: hero { + ...on heroes_Asset { ${getImageFields("crop", 900, 550)} } } @@ -804,8 +804,8 @@ export const relatedContentNewsFragment = ` ...on news_post_Entry { date description: teaser - image: featuredImage { - ...on contentImages_Asset { + image: hero { + ...on heroes_Asset { ${getImageFields("crop", 900, 550)} } } diff --git a/lib/api/fragments/educator-page.js b/lib/api/fragments/educator-page.js index 274c016e..7cdaa10e 100644 --- a/lib/api/fragments/educator-page.js +++ b/lib/api/fragments/educator-page.js @@ -8,8 +8,8 @@ export const educatorPageFragment = ` ...on pages_educatorPages_Entry { date: dateUpdated description - image: featuredImage { - ... on contentImages_Asset { + image: hero { + ...on heroes_Asset { ${getImageFields("crop", 900, 550)} } } @@ -33,9 +33,14 @@ fragment educatorPageFragmentFull on pages_educatorPages_Entry { hideTitle pageType dynamicComponent - featuredImage { - ... on contentImages_Asset { - ${getImageFields("crop", 800, 600)} + image: hero { + ...on heroes_Asset { + ${getImageFields("crop", 900, 550)} + } + } + openGraphImage: hero { + ...on heroes_Asset { + ${getImageFields("crop", 1200, 630)} } } ancestors { diff --git a/lib/api/fragments/event.js b/lib/api/fragments/event.js index 62ca91aa..5d262006 100644 --- a/lib/api/fragments/event.js +++ b/lib/api/fragments/event.js @@ -14,9 +14,9 @@ export const eventFragment = ` startDate endDate: date description - image: featuredImage { - ...on contentImages_Asset { - ${getImageFields("crop", 400, 400)} + image: hero { + ...on heroes_Asset { + ${getImageFields("crop", 900, 550)} } } hero { @@ -55,9 +55,9 @@ export const eventFragmentFull = ` } focalPointX focalPointY - image: featuredImage { - ...on contentImages_Asset { - ${getImageFields("crop", 800, 800)} + openGraphImage: hero { + ...on heroes_Asset { + ${getImageFields("crop", 1200, 630)} } } eventType { @@ -67,7 +67,7 @@ export const eventFragmentFull = ` } contentBlocks { ${allPageBlocks} - } + } } } `; diff --git a/lib/api/fragments/news-post.js b/lib/api/fragments/news-post.js index e317bef6..1d131b5d 100644 --- a/lib/api/fragments/news-post.js +++ b/lib/api/fragments/news-post.js @@ -11,8 +11,8 @@ export const newsPostFragment = ` dateCreated description: teaser pressReleaseId - image: featuredImage { - ...on contentImages_Asset { + image: hero { + ...on heroes_Asset { ${getImageFields("crop", 900, 550)} } } @@ -65,9 +65,9 @@ export const newsPostFragmentFull = ` focalPointX focalPointY heroCaption: captionRichText - image: featuredImage { - ...on contentImages_Asset { - ${getImageFields("crop", 800, 800)} + openGraphImage: hero { + ...on heroes_Asset { + ${getImageFields("crop", 1200, 630)} } } newsAssets: sidebarAssets { diff --git a/lib/api/fragments/page.js b/lib/api/fragments/page.js index 4b319138..26ee6d8d 100644 --- a/lib/api/fragments/page.js +++ b/lib/api/fragments/page.js @@ -8,8 +8,8 @@ export const pageFragment = ` ...on pages_pages_Entry { date: dateUpdated description - image: featuredImage { - ... on contentImages_Asset { + image: hero { + ...on heroes_Asset { ${getImageFields("crop", 900, 550)} } } @@ -35,6 +35,11 @@ fragment pageFragmentFull on pages_pages_Entry { ${getImageFields("crop", 1920, 1067)} } } + openGraphImage: hero { + ...on heroes_Asset { + ${getImageFields("crop", 1200, 630)} + } + } focalPointX focalPointY overlapHero @@ -45,11 +50,6 @@ fragment pageFragmentFull on pages_pages_Entry { eventFilter: eventType { id } - featuredImage { - ... on contentImages_Asset { - ${getImageFields("crop", 800, 600)} - } - } showSidebar sidebarAssets { ... on sidebarAssets_header_BlockType { diff --git a/lib/api/fragments/staff-profile.js b/lib/api/fragments/staff-profile.js index 02fd8bc0..ce375c66 100644 --- a/lib/api/fragments/staff-profile.js +++ b/lib/api/fragments/staff-profile.js @@ -25,7 +25,7 @@ export const staffProfileFragmentFull = ` ${getImageFields("crop", 1920, 1067)} } } - featuredImage: staffPortrait { + openGraphImage: staffPortrait { ...on staffProfiles_Asset { ${getImageFields("crop", 800, 600)} } @@ -45,7 +45,7 @@ export const staffProfileFragmentFull = ` } contentBlocks: contentBlocksNews { ${allNewsBlocks} - } + } } } `; diff --git a/lib/api/fragments/student-page.js b/lib/api/fragments/student-page.js index 707a4f95..304b11a1 100644 --- a/lib/api/fragments/student-page.js +++ b/lib/api/fragments/student-page.js @@ -8,8 +8,8 @@ export const studentPageFragment = ` ...on pages_studentPages_Entry { date: dateUpdated description - image: featuredImage { - ... on contentImages_Asset { + image: hero { + ...on heroes_Asset { ${getImageFields("crop", 900, 550)} } } @@ -26,17 +26,17 @@ fragment studentPageFragmentFull on pages_studentPages_Entry { ${getImageFields("crop", 1920, 1067)} } } + openGraphImage: hero { + ...on heroes_Asset { + ${getImageFields("crop", 1200, 630)} + } + } focalPointX focalPointY overlapHero hideTitle pageType dynamicComponent - featuredImage { - ... on contentImages_Asset { - ${getImageFields("crop", 800, 600)} - } - } parent { id uri diff --git a/lib/api/gallery-items.js b/lib/api/gallery-items.js index f05776b8..7ad0e1f5 100644 --- a/lib/api/gallery-items.js +++ b/lib/api/gallery-items.js @@ -24,7 +24,7 @@ export async function getGalleryItemDataByUri( customDateCreated usageTerms videoUrl: externalUrl - featuredImage: representativeAssetVariant { + openGraphImage: representativeAssetVariant { ... on assetVariants_Asset { ${getImageFields("crop", 1000, 670)} } @@ -37,7 +37,7 @@ export async function getGalleryItemDataByUri( state country } - } + } assetVariants { ... on assetVariants_header_BlockType { id @@ -58,7 +58,7 @@ export async function getGalleryItemDataByUri( } } } - + } globals: globalSets(handle: "galleryItemDefaults") { ... on galleryItemDefaults_GlobalSet { diff --git a/lib/api/noirlabReleases.js b/lib/api/noirlabReleases.js index 16a5ba92..720c9c60 100644 --- a/lib/api/noirlabReleases.js +++ b/lib/api/noirlabReleases.js @@ -1,5 +1,5 @@ import useSWR from "swr"; -import { getLocaleString } from "@/lib/utils"; +import { getLocaleString, makeReleaseFeature } from "@/lib/utils"; // const RELEASE_URL = process.env.NEXT_PUBLIC_RELEASE_URL; @@ -22,7 +22,7 @@ export function useRelease(site, entry) { return fetch(releaseUrl).then((response) => response.json().then((releaseData) => { - const { description, title } = release; + const { title } = release; const { description: releaseDescription, title: releaseTitle, @@ -61,8 +61,9 @@ export function useReleases(site, entries = []) { return fetch(releaseUrl).then((response) => response.json().then((releaseData) => { - const { description, title } = release; + const { title, image = [] } = release; const { + images, description: releaseDescription, title: releaseTitle, url, @@ -70,6 +71,10 @@ export function useReleases(site, entries = []) { return { ...releaseData, ...release, + image: + image.length > 0 + ? [...makeReleaseFeature(images, "screen640"), ...image] + : makeReleaseFeature(images, "screen640"), releaseDescription, title: releaseTitle || title, releaseUrl: url, diff --git a/lib/api/slideshows.js b/lib/api/slideshows.js index 0f878625..69cb7977 100644 --- a/lib/api/slideshows.js +++ b/lib/api/slideshows.js @@ -15,7 +15,7 @@ export async function getSlideshowDataByUri( ...slideshowFragment ...on slideshows_slideshow_Entry { - featuredImage: representativeAssetVariant { + openGraphImage: representativeAssetVariant { ... on assetVariants_Asset { ${getImageFields("fit", 800)} } diff --git a/lib/utils.js b/lib/utils.js index dd0beea4..ef819880 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -374,6 +374,10 @@ export function normalizeItemData(items, whichEntry = "entry") { .map((item) => item[whichEntry]?.[0]); } +/** @function makeReleaseFeature + * @param {Array} images + * @param {"banner1920" | "large" | "medium" | "news" | "newsfeature" | "newsmini" | "original" | "screen" | "screen640" | "thumb350x" | "thumb700x"} format + */ export function makeReleaseFeature(images, format = "screen") { if (!images) return; const feature = images[0];