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

default discord avatar
wiessonlast year
7

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
    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
          ]
        }
      ]
  • default discord avatar
    cossackdisk10 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',
        },
      ]
    };
  • default discord avatar
    arinji.7 months ago

    @cossackdisk did you manage to do a relative path?

  • default discord avatar
    zidde7 months ago

    @Arinji @cossackdisk I do it like this

    image.png
  • default discord avatar
    arinji.7 months ago

    where is your thumbnails folder located?

  • default discord avatar
    zidde7 months ago

    It's a relative path from the block file definition

    image.png
  • default discord avatar
    arinji.7 months ago

    oh, got it.. thanks :D

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

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