Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
When specifying that an input type should be a dropdown you will need to specify the values of that dropdown. In the JSON above you can specify the default
value of the dropdown if it does not have a value. Additionally, in the options
object you will specify the value of the option on the left and the text to be displayed on the right.
Set these in the Edit BREAD interface
Set either of these to false
to not include that input. Both default to true
.
Defines an onChange callback so that you can perform subsequent actions (such as using the Autocomplete Place address to populate another field) after the user changes any of the inputs in this formfield.
onChange callback is debounced at 300ms.
First parameter is eventType
("mapDragged", "latLngChanged", or "placeChanged"). Second parameter is data
object containing lat
, lng
, and place
properties.
The image input has many options. By default if you do not specify any options no problem... Your image will still be uploaded. But, if you want to resize an image, set the quality of the image, or specify thumbnails for the uploaded image you will need to specify those details.
resize If you want to specify a size you will need to include that in the resize
object. If you set either height or width to null it will keep the aspect ratio based on the width or height that is set. So, for the example above the width
is set to 1000
pixels and since the height
is set to null
it will resize the image width to 1000 pixels and resize the height based on the current aspect ratio.
quality If you wish to compress the image with a percentage quality you can specify that percentage in the quality
key. Typically between 70 and 100% there is little notice of image quality, but the image size may be dramatically lower.
upsize This is only valid if you have set your image to be resized. If you specify your image to resized to 1000 pixels and the image is smaller than 1000 pixels by default it will not upsize that image to the 1000 pixels; however, if you set upsize
to true. It will upsize all images to your specified resize values.
thumbnails Thumbnails takes an array of objects. Each object is a new thumbnail that is created. Each object contains 2 values, the name
and scale
percentage. The name
will be attached to your thumbnail image (as an example say the image you uploaded was ABC.jpg a thumbnail with the name
of medium
would now be created at ABC-medium.jpg). The scale
is the percentage amount you want that thumbnail to scale. This value will be a percentage of the resize width and height if specified.
In Voyager a Checkbox is converted into a toggle switch, and as you can see above the on
key will contain the value when the toggle switch is on, and the off
will contain the value that is set when the switch is off. If checked
is set to true the checkbox will be toggle on; otherwise by default it will be off.
You can create as many checkboxes as you want.
The Radio button is exactly the same as the dropdown. You can specify a default
if one has not been set and in the options
object you will specify the value of the option on the left and the text to be displayed on the right.
The date & timestamp input field is where you can input a date. In the JSON above you can specify the format
value of the output of the date. It allows you to display a formatted date
in browse and read views, using Carbon's formatLocalized()
method
These are standard attributes for number input field, default value for step is any if not defined.
If you want to customize TinyMCE within Voyager, you can do so by adding a additional JS file to your config.
In this file you have to define a function like
If you need to manipulate TinyMCE before it was initialized, you can use
If you want to customize TinyMCE init configuration Options you can merge your custom options in BREAD details as follow:
If you want to use tinyMCE outside it's default template rich_text_box
you'll need initialize it with:
For all possible variables, functions and configuration Options please refer to the TinyMCE documentation.
Formfields are the hearth of Voyagers BREAD-system. Each formfield represents a field in your database-table and one input (or output) in BREAD. To tweak your formfields you can insert JSON options which are described in the following pages.
All formfields share a handful options:
All types can include a description in order to help your future self or other users using your Voyager admin panel to understand exactly what a specific BREAD input field is for, this can be defined in the Optional Details
JSON input field:
There are also a few options that you can include to change the way your BREAD is displayed. You can add a display
key to your json object and change the width of the particular field and even specify a custom ID.
The width is displayed on a 12-grid system. Setting it with a width of 3 will span 25% of the width.
The id will let you specify a custom id wrapper around your element. example:
Most formfields allow you to define a default value when adding an entry:
You might want to save an input field into the database as a null
value instead of an empty string.
Simply enough, inside the BREAD you can include the following Optional Details for the field:
This will turn an empty string into a null
value. However you might want to be able to add both an empty string and a null
value to the database for that field. However you have to choose a replacement for the null
value, but it can be anything you wish. For example, if you want a field to change a string (ex. Nothing
) into a null
value you could include the following Optional Details for that field:
Now entering Nothing
into the field will end up as a null
value in the database.
Using the bread builder you may wish to automatically generate slugs of a certain input. Lets say you have some posts, which have a title and a slug. If you want to automatically generate the slug from the title attribute, you may include the following Optional Details:
This will automatically generate the slug from the input of the title
field. If a slug does already exists, it will only be updated if forceUpdate
is set enabled, by default this is disabled.
You can specify a custom view to be used for a formfield.
To do so, you have to specify the view
attribute for your desired field:
This will then load my_view
from resources/views
instead of the formfield.
You get plenty of data passed to your view for you to use:
$view
can be browse
, read
, edit
, add
or order
$content
the content for this field
$dataType
the DataType
$dataTypeContent
the whole model-instance
$row
the DataRow
$options
the DataRow details
Developing a custom formfield?
If you are developing a custom formfield and want to customize any of the views, you can do so by merging view
into $options
in your formfields createContent()
method.
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:
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
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:
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:
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 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 on the parent and set watermark
to true
for each thumbnail you want to insert the watermark to.
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 | [] |