Choosing Featured Portfolio Items

Taun

8 months ago

22

 import { fields } from '@payloadcms/collection-config';
import { Block } from 'payload/types';

const PortfolioHeroBlock: Block = {
  slug: 'portfolio-hero',
  labels: {
    singular: 'Portfolio Hero',
    plural: 'Portfolio Hero Blocks',
  },
  fields: [
    {
      name: 'itemOrder',
      label: 'Item Order',
      type: 'list',
      itemProps: [
        {
          name: 'itemId',
          label: 'Item',
          type: 'relationship',
          relationTo: 'Portfolio',
          required: true,
        },
        {
          name: 'position',
          label: 'Position',
          type: 'select',
          options: [
            { value: 'primary', label: 'Primary' },
            { value: 'secondary', label: 'Secondary' },
            { value: 'tertiary', label: 'Tertiary' },
          ],
          required: true,
        },
      ],
      required: true,
      admin: {
        condition: (_, siblingData) => siblingData?.type === 'portfolio-hero',
        width: '50%',
      },
    },
  ],
};

export default PortfolioHeroBlock;

• 

  Alessio 🍣

  8 months ago

  can you send a screenshot of the portfolio design here rq?

• 

  Taun

  8 months ago

  Does this link not work?

  
  

  
  

  https://www.figma.com/file/e1SGH17lyuKQ77pGcedNC8/Wedding-Photographers---Theme-2?node-id=0-1&t=9UCS8JzjtgpD4sig-0
  

  
  

  
  

  
  

  Can I create a block, 'Portfolio Hero' and for the fields include something like this?

  
  
  

   import { Block } from 'payload/types';
  
  const PortfolioHeroBlock: Block = {
    slug: 'portfolio-hero',
    labels: {
      singular: 'Portfolio Hero',
      plural: 'Portfolio Hero Blocks',
    },
    fields: [
      {
        name: 'itemOrder',
        label: 'Item Order',
        type: 'array',
        fields: [
          {
            name: 'itemId',
            label: 'Item',
            type: 'relationship',
            relationTo: 'Portfolio',
            required: true,
          },
          {
            name: 'position',
            label: 'Position',
            type: 'select',
            options: [
              { value: 'primary', label: 'Primary' },
              { value: 'secondary', label: 'Secondary' },
              { value: 'tertiary', label: 'Tertiary' },
            ],
            required: true,
          },
        ],
        required: true,
        admin: {
          condition: (_, siblingData) => siblingData?.type === 'portfolio-hero',
          width: '50%',
        },
      },
    ],
  };
  
  export default PortfolioHeroBlock;

  
  

  
  

  Is this Figma file public?

  
• 

  noheadphones

  8 months ago

  Yeah you can create an actual block, not sure this config is correct rn but ill reply later when im at my laptop with how i recommend you do it unless someone else gets ahead of me

• 

  Taun

  8 months ago

  Cool, thanks!

• 

  noheadphones

  8 months ago

  for your homepage id create a global collection

  
  

  
  

  attach the block or field there but ill expand on that later

• 

  Taun

  8 months ago

  The fields are generated by ChatGPT - it could have summoned it's own syntax

• 

  noheadphones

  8 months ago

  chat gpt is awful for payload...at least 3.x

• 

  Taun

  8 months ago

  Haha, yea I have to direct it most of the time. At least it makes me think and fact check.

  
  

  
  

  To provide more context with the objectives for this Wedding Photography website - I'd like the admin to be able to switch themes. That's something I'll tackle later, though knowing that you may have a different approach to share.

  
  

  
  

  I'd also like the admin to be able to choose blocks per page. Maybe on the home page they prefer to display a Cover Image block, instead of the Portfolio Hero block. So the architecture needs to be block orientated to make it flexible.

  
  

  
  

  I'm getting this error:

   [14:01:49] INFO (payload): Starting Payload...
  unhandledRejection InvalidFieldRelationship: Field Item has invalid relationship 'Portfolio'.

  
  
  

  Portfolio collection:

  
  

  import { CollectionConfig } from 'payload/types';
  
  const Portfolio: CollectionConfig = {
    slug: 'portfolio',
    access: {
      create: (): boolean => true,
      read: (): boolean => true,
      update: (): boolean => true,
      delete: (): boolean => true,
    },
  
    fields: [
      {
        name: 'title',
        label: 'Title',
        type: 'text',
        required: true,
      },
      {
        name: 'subtitle',
        label: 'Venue Title',
        type: 'text',
        required: true,
      },
      {
        name: 'backgroundImage',
        type: 'upload',
        relationTo: 'media',
        required: true,
      },
      {
        name: 'alt',
        label: 'Alt Text',
        type: 'text',
        required: true,
      },
      {
        name: 'images',
        label: 'Images',
        type: 'upload',
        relationTo: 'media',
        required: true,
      },
    ],
  };
  
  export default Portfolio;

  
  
  

  ?

• 

  noheadphones

  8 months ago

  relationTo's values should be the slug of the content...in this case you need to keep it lowercase "portfolio"

  
  

  
  

  So I'm not entirely sure what you're after to build...but you can do a mix of things...personally here is what I do:

  
  
  

  For any page that has statically placed referenced data, I just provide a relationship field the admin can manage and with that they get limited control, the page will always render that content in the same place, be it hero or aside etc.

  
  
  

  For a page like a homepage where you may want the layout to be somewhat dynamic, then I would have an array of blocks where each block matches to a component in the frontend basically...so then an editor can put a hero, then a listing, a button, a quote, another listing or w/e really and you can customise the combination of these blocks in the array per global/collection

  
  

  
  

  The benefit is that the editors can then choose the content but still wont have too much power or confusing UI on managing a complex layout

  
  

  
  

  You can also be a little creative and keep it open for future development by having an array with only one block, requiring at least 1 item and having a maximum of 1...in the future you can then add other blocks to the list, but i wouldnt overcomplicate it unless you know for sure it's going to go in that direction

  
  

  
  

  Idk if I made any sense lol 😅