junohamburg/kirby-visual-block-selector

Kirby Visual Block Selector

Maintainers

Details

github.com/junohamburg/kirby-visual-block-selector

Source

Issues

Installs: 1 288

Dependents: 0

Suggesters: 0

Security: 0

Stars: 43

Watchers: 2

Forks: 2

Open Issues: 0

Language:JavaScript

Type:kirby-plugin

2.1.0 2024-01-31 11:21 UTC

Requires

MIT e34b904ea14b3cc3437adc21a4933268b84ee295

  • JUNO <github.woop@juno-hamburg.com>

This package is auto-updated.

Last update: 2024-10-30 01:59:46 UTC

README

This plugin for Kirby 4 replaces the block selector with a customized version that displays a preview image for each block.

Visual block selector

Please note: If you are using Kirby 3, please install v1.1.2.

Installation

Download

Download and copy this repository to /site/plugins/kirby-visual-block-selector.

Composer

composer require junohamburg/kirby-visual-block-selector

Git submodule

git submodule add https://github.com/junohamburg/kirby-visual-block-selector.git site/plugins/kirby-visual-block-selector

Setup

  1. Create the block preview images in 480×270 pixel. The images are displayed in a fixed aspect ratio of 16/9.
  2. Create the folder assets/block-previews.
  3. Save the images in the assets/block-previews folder with the same name as the block. For example, the preview image of heading.yml is heading.png. Any image format (png, jpg, gif, svg) should work.

Tip: You can define fieldset groups for the blocks field: Kirby docs

⚠️ Please note: If there are no preview images for a blocks field, the default Kirby block selector will be displayed.

License

MIT

Credits