Add illustrations to Kirby's radio buttons
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets/css Kirby cli readiness. Sep 28, 2017
LICENSE Initial commit Jul 12, 2017
README.md Update README.md Jul 13, 2017
imageradio.php Shorter Image object creation Oct 6, 2017
package.json Update package.json Sep 29, 2017

README.md

Imageradio - Kirby illustrated radio

This field allows you to add illustrations to radio buttons. Suggestions welcome.

illustrated-radio

Installation

Put this field in the site/fields directory.
The field folder must be named imageradio :

|-- site/fields/
    |-- imageradio/
        |-- assets/
        |-- imageradio.php

Usage

Basic usage in blueprint:

  fieldname:
    label: Field label
    type: imageradio
    columns: 3
    options: 
      light:
        label: Light theme
        image: light.jpg
      dark:
        label: Dark theme
        image: dark.jpg
      blue:
        label: Blue theme
        image: blue.jpg

By default, images must be put in the main assets/images folder of your website.

Options

Other options are not required.

Custom ratio

If ratio is specified, images will be displayed as background images and the ratio set for its container. You can then set the background position with a CSS syntax (not mandatory, default position is : center center).

  fieldname:
    label: Field label
    type: imageradio
    columns: 3
    display:
      ratio: 3/2
      position: top left
    options:
      (...)

Enable for mobiles

By default, images are not displayed when the panel switches to its mobile view. If you want to override this, set :

    display:
      mobile: true

Fetch images

You can query images from existing pages to populate the buttons.

Please note that fetch must be set to images in order for this to work properly.

The appropriate syntax is then :

  fieldname:
    label: Field label
    type: imageradio
    columns: 3
    options: query
    query:
      page: path/to/page
      fetch: images
      value: '{{filename}}'
      text: 
        label: '{{filename}}'
        image: '{{filename}}'

Use color instead of image

You can choose to use a background-color instead of an image. In this case, ratio should be specified (fallback is 4/1).

fieldname:
    label: Field label
    type: imageradio
    columns: 2
    display:
      ratio: 5/1
    options:
      light:
        label: Light theme
        color: '#f0f0f0'
      dark:
        label: Dark theme
        color: '#0f0f0f'

License

MIT