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}}
Name | Description | Type | Default |
base_path | The start path relative to the filesystem | String | /bread-slug/ |
rename | Rename uploaded files to a given string/expression | String | Original name |
delete_files | Delete files if the BREAD entry is deleted. Use with caution! | bool | false |
show_as_images | Shows stored data as images when browsing | bool | false |
min | The minimum amount of files that can be selected | int | 0 |
max | The maximum amount of files that can be selected. 0 means infinite | int | 0 |
expanded | If the media-picker should be expanded by default | bool | true |
show_folders | Show subfolders | bool | true |
show_toolbar | Shows/hides the whole toolbar | bool | false |
allow_upload | Allow users to upload new files | bool | true |
allow_move | Allow users to move files/folders | bool | true |
allow_delete | Allow users to delete files | bool | true |
allow_create_folder | Allow users to create new folders | bool | true |
allow_rename | Allow users to rename files. Use with caution! | bool | true |
allow_crop | Allow users to crop images | bool | true |
hide_thumbnails | Hides known thumbnails and shows them as children of the parent image | bool | true |
quality | Sets the quality of uploaded images and thumbnails | int | 90 |
allowed | The allowed types to be uploaded/selected. Empty object means all types. Files with other types won't be displayed. | Object | [] |
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 characters
So 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:
top-left (default)
top
top-right
left
center
right
bottom-left
bottom
bottom-right
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.