templates: add hero image field to posts instead of using the meta image for the hero as well (#9999)

Adds a hero image field instead of using the meta image for the hero on
posts collection

Author: paulpopus

templates/website/src/blocks/RenderBlocks.tsx

@@ -36,8 +36,8 @@ export const RenderBlocks: React.FC<{
             if (Block) {
               return (
                 <div className="my-16" key={index}>
-                  {/* @ts-expect-error */}
-                  <Block {...block} />
+                  {/* @ts-expect-error there may be some mismatch between the expected types here */}
+                  <Block {...block} disableInnerContainer />
                 </div>
               )
             }

templates/website/src/collections/Posts/index.ts

@@ -79,6 +79,11 @@ export const Posts: CollectionConfig<'posts'> = {
       tabs: [
         {
           fields: [
+            {
+              name: 'heroImage',
+              type: 'upload',
+              relationTo: 'media',
+            },
             {
               name: 'content',
               type: 'richText',

templates/website/src/components/ui/card.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/heading-has-content */
 import { cn } from 'src/utilities/cn'
 import * as React from 'react'
 

templates/website/src/components/ui/pagination.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/button-has-type */
 import type { ButtonProps } from '@/components/ui/button'
 
 import { buttonVariants } from '@/components/ui/button'

templates/website/src/endpoints/seed/image-hero-1.ts

@@ -0,0 +1,5 @@
+import type { Media } from '@/payload-types'
+
+export const imageHero1: Omit<Media, 'createdAt' | 'id' | 'updatedAt'> = {
+  alt: 'Straight metallic shapes with a blue gradient',
+}

templates/website/src/endpoints/seed/index.ts

@@ -5,6 +5,7 @@ import { contact as contactPageData } from './contact-page'
 import { home } from './home'
 import { image1 } from './image-1'
 import { image2 } from './image-2'
+import { imageHero1 } from './image-hero-1'
 import { post1 } from './post-1'
 import { post2 } from './post-2'
 import { post3 } from './post-3'
@@ -72,7 +73,7 @@ export const seed = async ({
     depth: 0,
     where: {
       email: {
-        equals: 'demo-author@payloadcms.com',
+        equals: 'demo-author@example.com',
       },
     },
   })
@@ -111,7 +112,7 @@ export const seed = async ({
       collection: 'users',
       data: {
         name: 'Demo Author',
-        email: 'demo-author@payloadcms.com',
+        email: 'demo-author@example.com',
         password: 'password',
       },
     }),
@@ -132,7 +133,7 @@ export const seed = async ({
     }),
     payload.create({
       collection: 'media',
-      data: image2,
+      data: imageHero1,
       file: hero1Buffer,
     }),
 

templates/website/src/endpoints/seed/post-1.ts

@@ -3,6 +3,7 @@ import type { Post } from '@/payload-types'
 export const post1: Partial<Post> = {
   slug: 'digital-horizons',
   _status: 'published',
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   authors: ['{{AUTHOR}}'],
   content: {
@@ -291,10 +292,11 @@ export const post1: Partial<Post> = {
       version: 1,
     },
   },
-
+  heroImage: '{{IMAGE_1}}',
   meta: {
     description:
       'Dive into the marvels of modern innovation, where the only constant is change. A journey where pixels and data converge to craft the future.',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     image: '{{IMAGE_1}}',
     title: 'Digital Horizons: A Glimpse into Tomorrow',

templates/website/src/endpoints/seed/post-2.ts

@@ -3,6 +3,7 @@ import type { Post } from '@/payload-types'
 export const post2: Partial<Post> = {
   slug: 'global-gaze',
   _status: 'published',
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   authors: ['{{AUTHOR}}'],
   content: {
@@ -214,9 +215,11 @@ export const post2: Partial<Post> = {
       version: 1,
     },
   },
+  heroImage: '{{IMAGE_1}}',
   meta: {
     description:
       'Explore the untold and overlooked. A magnified view into the corners of the world, where every story deserves its spotlight.',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     image: '{{IMAGE_1}}',
     title: 'Global Gaze: Beyond the Headlines',

templates/website/src/endpoints/seed/post-3.ts

@@ -3,6 +3,7 @@ import type { Post } from '@/payload-types'
 export const post3: Partial<Post> = {
   slug: 'dollar-and-sense-the-financial-forecast',
   _status: 'published',
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   authors: ['{{AUTHOR}}'],
   content: {
@@ -251,8 +252,10 @@ export const post3: Partial<Post> = {
       version: 1,
     },
   },
+  heroImage: '{{IMAGE_1}}',
   meta: {
     description: `Money isn't just currency; it's a language. Dive deep into its nuances, where strategy meets intuition in the vast sea of finance.`,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     image: '{{IMAGE_1}}',
     title: 'Dollar and Sense: The Financial Forecast',

templates/website/src/heros/PostHero/index.tsx

@@ -9,7 +9,7 @@ import { formatAuthors } from '@/utilities/formatAuthors'
 export const PostHero: React.FC<{
   post: Post
 }> = ({ post }) => {
-  const { categories, meta: { image: metaImage } = {}, populatedAuthors, publishedAt, title } = post
+  const { categories, heroImage, populatedAuthors, publishedAt, title } = post
 
   const hasAuthors =
     populatedAuthors && populatedAuthors.length > 0 && formatAuthors(populatedAuthors) !== ''
@@ -63,13 +63,13 @@ export const PostHero: React.FC<{
         </div>
       </div>
       <div className="min-h-[80vh] select-none">
-        {metaImage && typeof metaImage !== 'string' && (
+        {heroImage && typeof heroImage !== 'string' && (
           <Media
             fill
             priority={false}
             loading="lazy"
             imgClassName="-z-10 object-cover"
-            resource={metaImage}
+            resource={heroImage}
           />
         )}
         <div className="absolute pointer-events-none left-0 bottom-0 w-full h-1/2 bg-gradient-to-t from-black to-transparent" />