docs/bread/formfields/media-picker.md
The media picker formfield allows you to upload/delete/select files directly from the media-manager.
You can customize the behaviour with the following options:
{
"max": 10,
"min": 0,
"expanded": true,
"show_folders": true,
"show_toolbar": true,
"allow_upload": true,
"allow_move": true,
"allow_delete": true,
"allow_create_folder": true,
"allow_rename": true,
"allow_crop": true,
"allowed": [],
"hide_thumbnails": false,
"quality": 90,
"watermark": {
"source": "...",
"position": "top-left",
"x": 0,
"y": 0
}
}
If you want your users to only be able to upload specific file-types you can do so by passing an object with mime-types to the `allowed` prop, for example:
["image", "audio", "video"]
or
["image/jpeg", "image/png", "image/bmp"]
The base_path and rename can contain the following placeholders:
{pk} the primary-key of the entry (only for base_path){uid} the user-id of the current logged-in user{date:format} the current date in the format defined in format. For example {date:d.m.Y}{random:10} random string with N charactersSo a base_path can, for example, look like the following:
{
"base_path": "/my-bread/{pk}/{date:Y}/{date:m}/"
}
A watermark can be added to uploaded images. To do so, you need to define a source property relative to Voyagers storage-disk.
There are a few optional arguments you can use:
position the position where the watermark is placed. Can be:
x Relative offset to the position on the x-axis. Defaults to 0
y Relative offset to the position on the y-axis. Defaults to 0
size the size (in percent) of the watermark relative to the image. Defaults to 15
You can generate thumbnails for each uploaded image.
A thumbnail can be one of three types:
Fit combines cropping and resizing to find the best way to generate a thumbnail matching your dimensions.
You have to pass width and can pass height and position.
An example for fit would be:
{
"thumbnails": [
{
"type": "fit",
"name": "fit-500",
"width": 500, // Required
"height": 500, // Optional
"position": "center" // Optional. Refer to http://image.intervention.io/api/fit
}
]
}
Crop an image by given dimensions and position.
You have to pass width and height and can pass x and y.
An example for crop would be:
{
"thumbnails": [
{
"type": "crop",
"name": "crop-500-500",
"width": 500, // Required
"height": 500, // Required
"x": 50, // Optional. Left offset
"y": 50, // Optional. Top offset
}
]
}
Resize the image to the given dimensions.
You have to pass width and/or height.
Some examples for resize:
{
"thumbnails": [
// Width will be 500px, height will be calculated based on the aspect-ratio
{
"type": "resize",
"name": "resize-500",
"width": 500,
"upsize": true, // Optional. Set to false to prevent upsizing
},
// Resizes the image to 500x500px
{
"type": "resize",
"name": "resize-500-500",
"width": 500,
"height": 500
},
// Height will be 500px, width will be auto-calculated
{
"type": "resize",
"name": "resize-500",
"width": null,
"height": 500
}
]
}
A watermark can also be inserted into each thumbnail. Just define the watermark-options on the parent and set watermark to true for each thumbnail you want to insert the watermark to.