PHPackages sylvainjule/imageradio - 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/imageradio ActiveKirby-plugin[Image & Media](/categories/media) sylvainjule/imageradio ====================== Add illustrations to Kirby's radio buttons 2.1.0(9mo ago)5916.8k↓33.3%8[2 PRs](https://github.com/sylvainjule/kirby-imageradio/pulls)MITPHP Since Jan 7Pushed 9mo ago7 watchersCompare [ Source](https://github.com/sylvainjule/kirby-imageradio)[ Packagist](https://packagist.org/packages/sylvainjule/imageradio)[ RSS](/packages/sylvainjule-imageradio/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (8)Dependencies (1)Versions (9)Used By (0) Kirby illustrated radios ======================== [](#kirby-illustrated-radios) Add illustrations to radio buttons. [![cover](https://private-user-images.githubusercontent.com/14079751/475278618-279f5068-b1b9-4f9a-80b2-d41d631749a8.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ4Njc3MjYsIm5iZiI6MTc3NDg2NzQyNiwicGF0aCI6Ii8xNDA3OTc1MS80NzUyNzg2MTgtMjc5ZjUwNjgtYjFiOS00ZjlhLTgwYjItZDQxZDYzMTc0OWE4LmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjAzMzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwMzMwVDEwNDM0NlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWEzNzQ1ZTk4NWRmZTMwOTkyNDQ1NmQxYTA4Mzc5NWJiZjMwZDlkNTMxMDgyYmUyNjRkNzY4OGVkM2NiMWUyNmYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.MpVkGuqZVMAJPnujYP0aT0E9RpbyQZ5vN6oTERygM-w)](https://private-user-images.githubusercontent.com/14079751/475278618-279f5068-b1b9-4f9a-80b2-d41d631749a8.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ4Njc3MjYsIm5iZiI6MTc3NDg2NzQyNiwicGF0aCI6Ii8xNDA3OTc1MS80NzUyNzg2MTgtMjc5ZjUwNjgtYjFiOS00ZjlhLTgwYjItZDQxZDYzMTc0OWE4LmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjAzMzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwMzMwVDEwNDM0NlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWEzNzQ1ZTk4NWRmZTMwOTkyNDQ1NmQxYTA4Mzc5NWJiZjMwZDlkNTMxMDgyYmUyNjRkNzY4OGVkM2NiMWUyNmYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.MpVkGuqZVMAJPnujYP0aT0E9RpbyQZ5vN6oTERygM-w) 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/imageradio` Alternatively, you can install it with composer: `composer require sylvainjule/imageradio` 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. ``` myimageradio: label: Pick a theme type: imageradio columns: 3 options: light: text: Light theme image: light.jpg dark: text: Dark theme image: dark.jpg blue: text: Blue theme image: blue.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**. ``` myimageradio: label: Pick a theme type: imageradio 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.imageradio.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/48334059-a769b280-e659-11e8-8195-9aa68da30091.jpg)](https://user-images.githubusercontent.com/14079751/48334059-a769b280-e659-11e8-8195-9aa68da30091.jpg) The ratio of the image container, to be adjusted depending on your images. Default is `1/1`. ``` myimageradio: type: imageradio ratio: 1/1 ``` #### 4.2. `fit` [](#42-fit) [![fit](https://user-images.githubusercontent.com/14079751/48334056-a769b280-e659-11e8-897a-53e371c22026.jpg)](https://user-images.githubusercontent.com/14079751/48334056-a769b280-e659-11e8-897a-53e371c22026.jpg) Defines how the image should fit within its container, either `contain` or `cover`. Default is `cover`. ``` myimageradio: type: imageradio 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`. ``` myimageradio: type: imageradio 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`. ``` myimageradio: type: imageradio mobile: false ``` 5. License ---------- [](#5-license) MIT ### Health Score 48 — FairBetter than 95% of packages Maintenance57 Moderate activity, may be stable Popularity38 Limited adoption so far Community17 Small or concentrated contributor base Maturity66 Established project with proven stability Bus Factor1 Top contributor holds 91.1% 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 ~343 days Recently: every ~337 days Total 8 Last Release 287d ago Major Versions 1.0.5 → 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 (51 commits)")[![distantnative](https://avatars.githubusercontent.com/u/3788865?v=4)](https://github.com/distantnative "distantnative (2 commits)")[![schnti](https://avatars.githubusercontent.com/u/1868482?v=4)](https://github.com/schnti "schnti (2 commits)")[![S1SYPHOS](https://avatars.githubusercontent.com/u/12161504?v=4)](https://github.com/S1SYPHOS "S1SYPHOS (1 commits)") --- Tags illustratedillustrationimagekirbykirby-pluginradio ### Embed Badge ![Health badge](/badges/sylvainjule-imageradio/health.svg) ``` [![Health](https://phpackages.com/badges/sylvainjule-imageradio/health.svg)](https://phpackages.com/packages/sylvainjule-imageradio) ``` ### 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)[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)[sylvainjule/colorextractor Extract dominant / average color from any image. 423.4k1](/packages/sylvainjule-colorextractor) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)