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

wiesson

6 months ago

1

• 

  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
        ]
      }
    ]