Media Picker
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:
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 | [] |
Allowed types
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:
or
Expressions
The base_path
and rename
can contain the following placeholders:
{pk}
the primary-key of the entry (only forbase_path
){uid}
the user-id of the current logged-in user{date:format}
the current date in the format defined informat
. For example{date:d.m.Y}
{random:10}
random string with N characters
So a base_path
can, for example, look like the following:
Watermark
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
Thumbnails
You can generate thumbnails for each uploaded image. A thumbnail can be one of three types:
Fit
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:
Crop
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:
Resize
Resize the image to the given dimensions. You have to pass width
and/or height
.
Some examples for resize
:
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.
Last updated