Kirby illustrated checkboxes
Add illustrations to checkboxes.
Overview
This plugin is completely free and published under the MIT license. However, if you are using it in a commercial project and want to help me keep up with maintenance, please consider making a donation of your choice or purchasing your license(s) through my affiliate link.
1. Installation
If you are looking to use this field with Kirby 2, please switch to the
kirby-2
branch.
Download and copy this repository to /site/plugins/imageboxes
Alternatively, you can install it with composer: composer require sylvainjule/imageboxes
2. Setup
The field is best used with the columns
option set.
2.1. Hardcoded options
If the field's options are hardcoded, images need to be placed in the assets/images
folder of your installation.
The image
value must be a filename, the field will automatically prefix it with the correct path.
myimageboxes:
label: Categories
type: imageboxes
columns: 3
options:
bears:
text: Brown bears
image: bears.jpg
bisons:
text: Bisons
image: bisons.jpg
marmots:
text: Marmots
image: marmots.jpg
2.2. Dynamic options
The field is compatible with both query
and api
fetch. You need to explicitely set the result text, stored value and image url.
The image
value must return an absolute url.
myimageboxes:
label: Categories
type: imageboxes
columns: 3
options: query
query:
fetch: page.images
text: "{{ file.filename }}"
value: "{{ file.id }}"
image: "{{ file.resize(512).url }}"
Notice the {{ file.resize(512).url }}
instead of {{ file.url }}
. Two reasons for this:
- Using a thumb url will prevent loading unnecessarily large images.
512
is the default value of the Files field's thumbs. Therefore it is likely that the thumb will have already been created.
I recommend using a resize
number already used by the panel (128, 256, 512, 768, 1024).
3. Global options
baseUrl
3.1. If you want the images to be queried from a different location than the assets/images
folder, you can set the baseUrl
option in your config.php
file to whatever folder you'd like. For example:
'sylvainjule.imageboxes.baseUrl' => '{{ kirby.url("assets") }}/my-custom-folder',
4. Per-field options
ratio
4.1.
The ratio of the image container, to be adjusted depending on your images. Default is 1/1
.
myimageboxes:
type: imageboxes
ratio: 1/1
fit
4.2.
Defines how the image should fit within its container, either contain
or cover
. Default is cover
.
myimageboxes:
type: imageboxes
fit: cover
mobile
4.3. By default, images are not displayed when the panel switches to its mobile view. Not recommended, but if you want to override this, set the option to true
.
myimageboxes:
type: imageboxes
mobile: false
gap
4.4.
Whether the field should add a 1rem
gap between each input, K2-like. Default is false
.
myimageboxes:
type: imageboxes
gap: false
5. License
MIT