PHPackages sylvainjule/imageboxes - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Image & Media](/categories/media) 4. / 5. sylvainjule/imageboxes ActiveKirby-plugin[Image & Media](/categories/media) sylvainjule/imageboxes ====================== Add illustrations to Kirby's checkboxes 2.1.0(9mo ago)352.5k2MITPHP Since Jan 7Pushed 9mo ago6 watchersCompare [ Source](https://github.com/sylvainjule/kirby-imageboxes)[ Packagist](https://packagist.org/packages/sylvainjule/imageboxes)[ RSS](/packages/sylvainjule-imageboxes/feed)WikiDiscussions master Synced 1w ago READMEChangelog (10)Dependencies (1)Versions (12)Used By (0) Kirby illustrated checkboxes ============================ [](#kirby-illustrated-checkboxes) Add illustrations to checkboxes. [![cover](https://private-user-images.githubusercontent.com/14079751/475278471-d9f57eb7-4cd1-454f-9e7d-f427ab4a62b5.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Nzg3NzIxNDksIm5iZiI6MTc3ODc3MTg0OSwicGF0aCI6Ii8xNDA3OTc1MS80NzUyNzg0NzEtZDlmNTdlYjctNGNkMS00NTRmLTllN2QtZjQyN2FiNGE2MmI1LmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA1MTQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNTE0VDE1MTcyOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQ1MjdmZGZmYjE2ZDJkNmQ5ZTE2YjYyOGEwYThlODhiOThlZGQwMTJlNjdlNmMzYjNlN2IyMzEwZTJhMTgxMzcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JnJlc3BvbnNlLWNvbnRlbnQtdHlwZT1pbWFnZSUyRmpwZWcifQ.9FMZfxqdsQn5CK2VCuobuWEhdihzPv3s97GgngYVa44)](https://private-user-images.githubusercontent.com/14079751/475278471-d9f57eb7-4cd1-454f-9e7d-f427ab4a62b5.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Nzg3NzIxNDksIm5iZiI6MTc3ODc3MTg0OSwicGF0aCI6Ii8xNDA3OTc1MS80NzUyNzg0NzEtZDlmNTdlYjctNGNkMS00NTRmLTllN2QtZjQyN2FiNGE2MmI1LmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA1MTQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNTE0VDE1MTcyOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQ1MjdmZGZmYjE2ZDJkNmQ5ZTE2YjYyOGEwYThlODhiOThlZGQwMTJlNjdlNmMzYjNlN2IyMzEwZTJhMTgxMzcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JnJlc3BvbnNlLWNvbnRlbnQtdHlwZT1pbWFnZSUyRmpwZWcifQ.9FMZfxqdsQn5CK2VCuobuWEhdihzPv3s97GgngYVa44) Overview -------- [](#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, you can consider [making a donation of your choice](https://www.paypal.me/sylvainjl). - [1. Installation](#1-installation) - [2. Setup](#2-setup) - [2.1. Hardcoded options](#21-hardcoded-options) - [2.2. Dynamic options](#22-dynamic-options) - [3. Global options](#3-global-options) - [4. Per-field options](#4-per-field-options) - [5. License](#5-license) 1. Installation --------------- [](#1-installation) > Kirby 3: Up to 1.0.5. Kirby 4: Up to 2.0.1. Kirby 5: 2.1.0+ Download and copy this repository to `/site/plugins/imageboxes` Alternatively, you can install it with composer: `composer require sylvainjule/imageboxes` 2. Setup -------- [](#2-setup) The field is best used with the `columns` option set. #### 2.1. Hardcoded options [](#21-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 [](#22-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](https://github.com/k-next/kirby/blob/a709a5728671c0b85a1f37db1d6b2a028151f013/config/api/models/File.php#L86) by the panel (128, 256, 512, 768, 1024). 3. Global options ----------------- [](#3-global-options) #### 3.1. `baseUrl` [](#31-baseurl) 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 -------------------- [](#4-per-field-options) #### 4.1. `ratio` [](#41-ratio) [![ratio](https://user-images.githubusercontent.com/14079751/48333927-58bc1880-e659-11e8-8ef2-d239985877ae.jpg)](https://user-images.githubusercontent.com/14079751/48333927-58bc1880-e659-11e8-8ef2-d239985877ae.jpg) The ratio of the image container, to be adjusted depending on your images. Default is `1/1`. ``` myimageboxes: type: imageboxes ratio: 1/1 ``` #### 4.2. `fit` [](#42-fit) [![fit](https://user-images.githubusercontent.com/14079751/48333925-58238200-e659-11e8-811c-074e43b43f2d.jpg)](https://user-images.githubusercontent.com/14079751/48333925-58238200-e659-11e8-811c-074e43b43f2d.jpg) Defines how the image should fit within its container, either `contain` or `cover`. Default is `cover`. ``` myimageboxes: type: imageboxes fit: cover ``` #### 4.3. `back` [](#43-back) Defines the background behind transparent / contained images. Accepts any CSS-valid property for the `background` property. Default is `false`. ``` myimageboxes: type: imageboxes back: white # or '#fefefe', or 'rgb(255, 0, 255)', etc. ``` #### 4.4. `mobile` [](#44-mobile) 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 ``` 5. License ---------- [](#5-license) MIT ### Health Score 46 — FairBetter than 93% of packages Maintenance57 Moderate activity, may be stable Popularity31 Limited adoption so far Community13 Small or concentrated contributor base Maturity67 Established project with proven stability Bus Factor1 Top contributor holds 98% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~266 days Recently: every ~157 days Total 10 Last Release 287d ago Major Versions 1.0.6 → 2.0.02024-05-05 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/14079751?v=4)[Sylvain Julé](/maintainers/sylvainjule)[@sylvainjule](https://github.com/sylvainjule) --- Top Contributors [![sylvainjule](https://avatars.githubusercontent.com/u/14079751?v=4)](https://github.com/sylvainjule "sylvainjule (48 commits)")[![johannschopplich](https://avatars.githubusercontent.com/u/27850750?v=4)](https://github.com/johannschopplich "johannschopplich (1 commits)") --- Tags checkboxesillustratedillustrationimagekirbykirby-plugin ### Embed Badge ![Health badge](/badges/sylvainjule-imageboxes/health.svg) ``` [![Health](https://phpackages.com/badges/sylvainjule-imageboxes/health.svg)](https://phpackages.com/packages/sylvainjule-imageboxes) ``` ### Alternatives [flokosiol/focus Better image cropping for Kirby CMS 18265.1k](/packages/flokosiol-focus)[sylvainjule/annotator Place pins / define zones on an image synced with a structure field 10915.2k](/packages/sylvainjule-annotator)[tobimori/kirby-thumbhash Kirby Image placeholders with the smarter ThumbHash integration 378.1k1](/packages/tobimori-kirby-thumbhash)[sylvainjule/imageradio Add illustrations to Kirby's radio buttons 5916.8k](/packages/sylvainjule-imageradio)[timnarr/kirby-imagex Modern images for Kirby CMS – This plugin helps you orchestrate modern, responsive and performant images in Kirby 797.5k1](/packages/timnarr-kirby-imagex)[felixhaeberle/kirby3-webp Kirby 3 CMS plugin for converting JPG, JPEG and PNG into much smaller WEBP – speed up your website! 397.5k](/packages/felixhaeberle-kirby3-webp) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)