Hi CloudCannon community,
I recently built a couple of demos for a custom piece of tooling in CC’s visual editor, using the Visual Editor API. The objective was to add the ability to upload multiple images at once to a component (CC’s default file picker is one at a time), and have the newly uploaded images paths added to the component’s frontmatter, all in one editor action.
I built it twice, once for each of CloudCannon’s visual editing setups (Editable Regions and Bookshop), so there’s an example whichever one you’re on:
- Astro + Editable Regions: GitHub - tomrcc/astro-multi-image-uploader · GitHub
(live site: https://grey-charger.cloudvent.net/) - Jekyll + Bookshop: GitHub - tomrcc/jekyll-multi-image-uploader: jekyll-multi-image-uploader · GitHub
(live site: https://sturdy-wolf.cloudvent.net/)
In both, the gallery component gets a small “+ Add images” button in its corner while you’re in the editor. Pick or drag as many images as you like and they upload one after another, filling the grid as they land. The new images have been uploaded, and the component’s frontmatter also points at their uploaded location. The button only exists in the visual editor, so it never shows up on the published site.
If you want to try it on your own site, it’s a single file to copy in. The READMEs walk through the wiring.
Happy to answer any questions, and keen to hear if anyone has made any of their own tooling with the Visual Editor API!
Tom