I want to make a carousel gallery with WordPress Gutenberg but I'm facing an dilemma. How do I add images dynamically?

I could go and add like 10 MediaUpload but this isn't very reliable.

I'm thinking about a button that might create MediaUpload

el(MediaUpload, {
    onSelect: onSelectInfoImage,
    type: 'image',
    value: attributes.smallMediaURL,
    render: function (obj) {
      return el(components.Button, {
        className: attributes.smallMediaID ? 'image-button' : 'button button-large',
        onClick: obj.open
      },
      !attributes.smallMediaID ? i18n.__('Bild hochladen') : el('img', { src: attributes.smallMediaURL })
      )
    }
})

and the button should be something like

el(IconButton,{
    className: 'media-create',
    icon: 'no',
    label: 'Add slide',
    onClick: function (media) {
        ***spawn new media***
      }
})

I want to make a carousel gallery with WordPress Gutenberg but I'm facing an dilemma. How do I add images dynamically?

I could go and add like 10 MediaUpload but this isn't very reliable.

I'm thinking about a button that might create MediaUpload

el(MediaUpload, {
    onSelect: onSelectInfoImage,
    type: 'image',
    value: attributes.smallMediaURL,
    render: function (obj) {
      return el(components.Button, {
        className: attributes.smallMediaID ? 'image-button' : 'button button-large',
        onClick: obj.open
      },
      !attributes.smallMediaID ? i18n.__('Bild hochladen') : el('img', { src: attributes.smallMediaURL })
      )
    }
})

and the button should be something like

el(IconButton,{
    className: 'media-create',
    icon: 'no',
    label: 'Add slide',
    onClick: function (media) {
        ***spawn new media***
      }
})

• block-editor

Share Improve this question asked Mar 21, 2019 at 10:44 Razvan CuceuRazvan Cuceu 24822 silver badges1414 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default -1

You can set the multiple and gallery props to {true} which enables to select multiple images and make a gallery. More information in the GitHub readme: https://github/WordPress/gutenberg/tree/master/packages/block-editor/src/components/media-upload