Choosing Featured Portfolio Items

default discord avatar
Taun
2 months ago
22

Hi. I'd like the admin to choose the portfolio items to display on the home page Portfolio Hero block using the admin panel.


Here is the web design:

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

I have a Portfolio.ts collections file containing these fields:


 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;

I've created portfolio items within the admin panel.


Where to from here?



Repo:

https://github.com/taunhealy/2160-Lodge-Bukela-2

(I'm using this hotel repo for experimenting for now)

  • default discord avatar
    Alessio 🍣
    2 months ago

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

  • default discord avatar
    Taun
    2 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?

    image.png
  • default discord avatar
    noheadphones
    2 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

  • default discord avatar
    Taun
    2 months ago

    Cool, thanks!

  • default discord avatar
    noheadphones
    2 months ago

    for your homepage id create a global collection



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

  • default discord avatar
    Taun
    2 months ago

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

  • default discord avatar
    noheadphones
    2 months ago

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

  • default discord avatar
    Taun
    2 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;


    ?

  • default discord avatar
    noheadphones
    2 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 😅

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.