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

wiessonlast year

7

• 

  jesschow

  last year

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

• 

  cossackdisk7 months ago

  How about use relative path from /src/assets in imageURL?

  
  
  

  const QuoteBlock: Block = {
    slug: 'Quote', 
    imageURL: './assets/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',
      },
    ]
  };

• 

  arinji.5 months ago

  @cossackdisk did you manage to do a relative path?

• 

  zidde5 months ago

  @Arinji @cossackdisk I do it like this

  
• 

  arinji.5 months ago

  where is your thumbnails folder located?

• 

  zidde5 months ago

  It's a relative path from the block file definition

  
• 

  arinji.5 months ago

  oh, got it.. thanks :D