https://github.com/sebobo/shel.neos.previewselectbox
Selectbox variant for NeosCMS allowing custom previews
https://github.com/sebobo/shel.neos.previewselectbox
neos-cms
Last synced: 2 months ago
JSON representation
Selectbox variant for NeosCMS allowing custom previews
- Host: GitHub
- URL: https://github.com/sebobo/shel.neos.previewselectbox
- Owner: Sebobo
- License: gpl-3.0
- Created: 2021-05-26T12:12:39.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-10-04T19:45:30.000Z (over 1 year ago)
- Last Synced: 2025-03-26T10:04:43.585Z (3 months ago)
- Topics: neos-cms
- Language: JavaScript
- Homepage:
- Size: 182 KB
- Stars: 4
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- Funding: FUNDING.yml
- License: LICENSE.txt
Awesome Lists containing this project
README
# Neos CMS selectbox editor with preview
This plugin adds a new variant of the Neos selectbox editor that supports `preview` properties on options
and shows those when selecting an items in the selectbox.
In Neos CMS only the `AssetEditor` and `NodeEditor` have this feature and
it's not possible yet to use this for other data types.
⚠️ This feature is integrated into Neos CMS (7.3+) and this plugin allows to use it for older Neos versions 4.3+.
Check the [pull request](https://github.com/neos/neos-ui/pull/2930) and related issue for details.
No new features will be added to this package and it will be archived, when Neos 7.3 is EOL!
## Installation
Install the package `shel/neos-previewselectbox` via composer as
dependency of your sitepackage.
## How to use
Instead of setting the `icon` property for each value, you set `preview` to an absolute uri.
⚠️ Relative uris might work, but are not officially supported, as they might not resolve in a reliable way depending on the hosting environment.
### With a datasource
Make sure the datasource returns a `preview` property with an absolute url
for each item returned.
```yaml
'My.Vendor:Content.Something':
superTypes:
Neos.Neos:Content: true
ui:
label: i18n
properties:
icon:
type: string
ui:
label: 'Icon'
reloadIfChanged: true
inspector:
group: icon
editor: Shel.Neos/PreviewSelectBoxEditor
editorOptions:
placeholder: Select an icon
allowEmpty: true
dataSourceIdentifier: my-icon-datasource
```
### Without datasource
```yaml
'My.Vendor:Content.Something':
superTypes:
Neos.Neos:Content: true
ui:
label: i18n
properties:
icon:
type: string
ui:
label: 'Icon'
reloadIfChanged: true
inspector:
group: icon
editor: Shel.Neos/PreviewSelectBoxEditor
editorOptions:
placeholder: Select an icon
allowEmpty: true
values:
'foo':
label: Foo
preview: https://some.url/my-foo-icon.svg
'bar':
label: Bar
preview: https://some.url/my-bar-icon.svg
```