Skip to content
Simple kirbyCMS Panel field for picking a single image in your page's content
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md
imagepicker.css
imagepicker.js
imagepicker.php
screenshot.png

README.md

Image Picker Field - Kirby CMS Panel

Simple kirbyCMS Panel field for picking a single image in your page's content. Can be useful to use as a "Featured Image" implementation.

Screenshot

This uses rvera's imagepicker jQuery Plugin and jQuery already present in your KirbyCMS Panel.

This field requires the Thumb Plugin installed in your kirby install, read about it here.

Install

After installing the kirbycms panel, create a directory site/panel/fields at the root of your kirby install (if not present already), cd into this directory and clone this repository in the imagepicker directory.

You should end up with the new directory: site/panel/fields/imagepicker

Usage

Once installed, when creating a panel blueprint, you can add the field using type: imagepicker, to set the placeholder that will appear when there is no images found in the content folder, you can use the placeholder: yourtext property and if your website is in multiple languages, you can use the Kirby Syntax for multi-lingual websites.

The width options defaults to 100 and represents the width in pixels at which image thumbs should be displayed / resized this should be set unitless if needed.

eg:

# default blueprint

title: Page
pages: true
files: true
fields:
  title:
    label: Title
    type:  text
  featured_img:
    label: Featured Image
    type:  imagepicker
    width: 100
    placeholder:
    	en: No uploaded images yet
    	fr: Pas encore d'images téléchargées

Behaviour

This field is simply an augmented <select> field using javascript, which means this works even without javascript. The chosen image's filename will be saved to your page's metadata like this

Title: Page Title
----
Featured_img: image.png
----

You can then use it in your templates like this

$featured_img = $page->images()->find((string)$page->featured_img());

<img src="<?php echo $featured_img->url() ?>">

License

This is released under the MIT License

Guillaume 'Wilhearts' PICARD, 2014

You can’t perform that action at this time.