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:

{
    "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

[]

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:

["image", "audio", "video"]

or

["image/jpeg", "image/png", "image/bmp"]

Expressions

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}/"
}

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:

{
    "thumbnails": [
        {
            "type": "fit",
            "name": "fit-500",
            "width": 500, // Required
            "height": 500, // Optional
            "position": "center" // Optional. Refer to http://image.intervention.io/api/fit
        }
    ]
}

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:

{
    "thumbnails": [
        {
            "type": "crop",
            "name": "crop-500-500",
            "width": 500, // Required
            "height": 500, // Required
            "x": 50, // Optional. Left offset
            "y": 50, // Optional. Top offset
        }
    ]
}

Resize

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.

Last updated