Is it possible to have custom images for blocks? It's kind of hard to define meaningful names

default discord avatar
wiesson
6 months ago
1

As visible in the image, we came up with a couple of components and after a while, nobody knows what they do.



Is it possible to order them a little bit better? 😅

  • discord user avatar
    jesschow
    Payload Team
    6 months ago

    Hi @wiesson - yes! You can change the block image by adding an

    imageURL

    to the block config:



    const QuoteBlock: Block = {
      slug: 'Quote', 
      imageURL: 'https://google.com/path/to/image.jpg',
      imageAltText: 'A nice thumbnail image to show what this block looks like',
      fields: [ 
        {
          name: 'quoteHeader',
          type: 'text',
          required: true,
        },
        {
          name: 'quoteText',
          type: 'text',
        },
      ]
    };


    Regarding the order of blocks, this will be the same order as they are defined in. We usually put them in alphabetical order, you can do whatever suits you best.



    {
          name: 'layout', 
          type: 'blocks',
          minRows: 1,
          maxRows: 20,
          blocks: [ 
          // This same order will be used in the admin 
           Accordion,
           Banner,
           Form,
           QuoteBlock
          ]
        }
      ]
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.