Download the PHP package wwwision/neos-mediabrowserdialog without Composer
On this page you can find all versions of the php package wwwision/neos-mediabrowserdialog. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download wwwision/neos-mediabrowserdialog
More information about wwwision/neos-mediabrowserdialog
Files in wwwision/neos-mediabrowserdialog
Package neos-mediabrowserdialog
Short Description JavaScripts to provide asset selection via Media Browser in Neos Backend Modules
License MIT
Informations about the package neos-mediabrowserdialog
Wwwision.Neos.MediaBrowserDialog
JavaScripts to provide asset selection via Media Browser in Neos Backend Modules
Installation
Install via composer:
composer require wwwision/neos-mediabrowserdialog
Usage
In the configuration of a Neos backend module, include the provided dist.js
file:
With that in place, the following data
attributes can be added to HTML elements in the module in order to include the
Neos Media Browser and/or asset preview:
Attribute | Effect | Allowed on elements |
---|---|---|
asset |
If not empty the specified asset id/s is/are used to populate preview and form fields (required) | container |
asset-constraints-media-types |
Comma separated list of allowed mediaTypes (optional) | container |
asset-constraints-asset-sources |
Comma separated list of allowed asset sources (optional) | container |
asset-multiple |
If set, multiple assets can be added (optional) | container |
asset-neos-uri-path |
Can be set if the Neos routes don't reside underneath /neos (optional) |
container |
asset-hide-if-set |
Element will be hidden if an asset is selected (optional) | any element within the container |
asset-hide-if-missing |
Element will be hidden if no asset is selected (optional) | any element within the container |
asset-field |
Element value will contain the identifier of the selected field (optional) | any input form field within the container, usually a hidden field |
asset-preview-template |
Template element that will be added to the DOM, if an asset is added (optional) | template element within the container |
asset-preview-container |
Element that the asset-preview-template template will be added to, if an asset is selected (optional) |
any element within the container |
asset-preview-label |
Element will contain the label of the asset, if one is selected (optional) | any element within the container |
asset-preview-image |
Element will render a preview of the asset, if one is selected (optional) | any img element within the container |
asset-browse |
Element will open the Media Browser on click (optional) | any element within the container that dispatches click events |
asset-replace |
Element will unset a previously selected asset (optional) | any element within the container that dispatches click events |
asset-move-up |
Element will move the selected asset one position up (optional, only for asset lists) | any element within the container that dispatches click events |
asset-move-down |
Element will move the selected asset one position down (optional, only for asset lists) | any element within the container that dispatches click events |
Example
Simple asset selection
To render just the input field and a button to open the Media Browser:
Asset preview
To render a preview image and the label of a previously selected asset:
Elements with the data-asset-hide-if-missing
attribute will be hidden when no asset is selected.
Elements with the data-asset-hide-if-set
attribute will only be visible if no asset is selected – this allows for
rendering fallbacks.
Example 01 (Single image upload, Fluid)
The following example renders a hidden field and browse button. If an asset is selected, the browse button is replaced with the label of the asset and a button to replace the asset. If the label is clicked, the Media Browser is opened allowing to inspect or replace the selected asset.
Furthermore, the Media Browser will be limited to only show documents and images of the neos
and someAssetSource
Asset sources (see Asset Constraints):
Example 02 (Multiple images upload, Fluid)
The following example, renders a list of {images}
as preview image. Next to every image, move buttons are shown and a delete button is shown that removes the specific asset from the list.
Underneath the list, a Browse button allows to select additional images and finally the whole list can be emptied with an additional button:
Note: For multiple assets to be mapped correctly, you might need to explicitly allow them in the MVC controller:
Events
The following events are dispatched on the container element (with the data-asset
attribute):
Event | Payload |
---|---|
assetChosen |
The asset identifier (in event.detail ) |
assetRemoved |
- |
Example
Acknowledgements
The idea for this package and parts of the implementation are inspired by Alois Rietzler from brandung GmbH, thank you!
Contribution
Contributions in the form of issues or pull requests are highly appreciated.
License
See LICENSE