Skip to content

Commit

Permalink
[F] NewsPost sidebar assets reorg
Browse files Browse the repository at this point in the history
 - Hero image is auto-added to mediaAssets
 - Manual ImageAssets are added to mediaAssets (excluded from manual sections)
 - Fix issue where non-press-release type news posts were missing any/all assets
  • Loading branch information
Blake Mason authored and blnkt committed Mar 6, 2024
1 parent 8c9ba24 commit e1f3810
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 24 deletions.
13 changes: 8 additions & 5 deletions components/templates/NewsPage/MediaAssets.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import PropTypes from "prop-types";
import Link from "next/link";
import { useTranslation } from "react-i18next";
import { ResponsiveImage } from "@rubin-epo/epo-react-lib";
import { ResponsiveImage, Figure } from "@rubin-epo/epo-react-lib";
import ReleaseAssets from "./ReleaseAssets";
import * as Styled from "./styles";

Expand All @@ -15,19 +15,22 @@ export default function MediaAssets({
if (!contentBlockAssets && !releaseImages && !releaseVideos) return null;

if (
contentBlockAssets?.length <= 0 &&
releaseImages?.length <= 0 &&
releaseVideos?.length <= 0
contentBlockAssets?.length === 0 &&
releaseImages?.length === 0 &&
releaseVideos?.length === 0
)
return null;

return (
<Styled.AsideSecondary>
<h3>{t(`media`)}</h3>
{contentBlockAssets.map((asset, i) => {
if (asset.image?.[0].url) {
return (
<Link key={i} prefetch={false} href={asset.image?.[0].url}>
<ResponsiveImage image={asset.image?.[0]} ratio="8:5" />
<Figure caption={asset.caption}>
<ResponsiveImage image={asset.image?.[0]} ratio="8:5" />
</Figure>
</Link>
);
}
Expand Down
28 changes: 15 additions & 13 deletions components/templates/NewsPage/NewsAside.js
Original file line number Diff line number Diff line change
@@ -1,30 +1,32 @@
import PropTypes from "prop-types";
import Link from "next/link";
import { ResponsiveImage, IconComposer } from "@rubin-epo/epo-react-lib";
import {
ResponsiveImage,
IconComposer,
Figure,
} from "@rubin-epo/epo-react-lib";
import Tags from "./Tags";
import MediaAssets from "./MediaAssets";
import * as Styled from "./styles";

export default function NewsAside({
newsAssets,
manualAssets,
contentBlockAssets,
releaseImages,
releaseVideos,
tags,
rootHomeLink,
}) {
// This sets up the automatic media grabber -- if there are no manual media set
let manualMedia = false;
// This adds the document icon from the designs, if there is a text-style link near the start.
let manualDoc = newsAssets.some(
let manualDoc = manualAssets.some(
(a, i) => i < 4 && (a.textLink?.length > 0 || a.externalLink?.length > 0)
);

return (
<Styled.Aside>
{newsAssets?.length > 0 && (
{manualAssets?.length > 0 && (
<Styled.AsidePrimary>
{newsAssets.map((a, i) => {
{manualAssets.map((a, i) => {
if (a.assetHeader) {
return (
<h3 key={i}>
Expand Down Expand Up @@ -53,14 +55,14 @@ export default function NewsAside({
</a>
);
} else if (a.image?.length > 0) {
manualMedia = true;
return (
<a href={a.image[0].url} key={i}>
<ResponsiveImage image={a.image[0]} />
</a>
<Link key={i} prefetch={false} href={a.image[0].url}>
<Figure caption={a.caption}>
<ResponsiveImage image={a.image[0]} ratio="8:5" />
</Figure>
</Link>
);
} else if (a.galleryItem?.length > 0) {
manualMedia = true;
if (a.galleryItem[0].uri) {
return (
<Link
Expand Down Expand Up @@ -89,7 +91,7 @@ export default function NewsAside({
}

NewsAside.propTypes = {
newsAssets: PropTypes.array,
manualAssets: PropTypes.array,
contentBlockAssets: PropTypes.array,
releaseImages: PropTypes.array,
releaseVideos: PropTypes.array,
Expand Down
39 changes: 33 additions & 6 deletions components/templates/NewsPage/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,40 @@ export default function NewsPage({ data }) {
title,
active: true,
};
const imageContentBlocks = [...contentBlocksNews].filter(
(block) => block.typeHandle === "image"
const manualAssets = [];
const heroBlock =
hero?.length > 0
? {
id: id + "hero",
typeHandle: "image",
image: hero,
caption: heroCaption,
}
: null;
const mediaContentBlocks = [...contentBlocksNews].filter(
(block) => block.typeHandle === "image" || block.typeHandle === "video"
);

newsAssets.forEach((a, i) => {
if (a.image?.length > 0) {
// If there are manually added news assets combine them with the content block media assets
mediaContentBlocks.push({
id: id + i,
typeHandle: "image",
image: a.image,
caption: a.caption,
});
} else {
manualAssets.push(a);
}
});
// If there is a hero then combine it with the content block media assets
if (heroBlock) mediaContentBlocks.unshift(heroBlock);

// Only show the aside if there are news assets
const showAside =
newsAssets?.length > 0 ||
imageContentBlocks?.length > 0 ||
manualAssets?.length > 0 ||
mediaContentBlocks?.length > 0 ||
releaseImages?.length > 0 ||
releaseVideos?.length > 0 ||
postTags?.length > 0;
Expand All @@ -77,8 +104,8 @@ export default function NewsPage({ data }) {
)}
{showAside && (
<NewsAside
newsAssets={newsAssets}
contentBlockAssets={imageContentBlocks}
manualAssets={manualAssets}
contentBlockAssets={mediaContentBlocks}
releaseImages={releaseImages}
releaseVideos={releaseVideos}
tags={postTags}
Expand Down
1 change: 1 addition & 0 deletions lib/api/fragments/news-post.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ export const newsPostFragmentFull = `
${getImageFields("crop", 900, 550)}
}
}
caption
}
... on newsAssets_galleryItem_BlockType {
galleryItem {
Expand Down

0 comments on commit e1f3810

Please sign in to comment.