Using Image Checkbox Input

  Written by The Jahia Team
 
Marketers
   Estimated reading time:

I this guide I will walk you through the functionality of checkbox images, explain its features and teach you how to set up your own image checkbox input.

 

Add input to your form

 

To add image checkbox to your form open the side panel by pressing the “Add element” button and then select “Image checkbox”

 

Screen Shot 2017-07-31 at 9.37.00 AM.png

 

Using bootstrap grid system

 

Image checkboxes are displayed using bootstrap grid system. The way it works is you specify the size of device (large, medium, small) and then you specify the number of columns you want to be displayed in a row on device of that size. Once device size gets smaller than the specified target size bootstrap will display all images in one column. Finding a target size can be a little tricky and will depend on the number of checkboxes you have and their sizes. One thing you should do is hide the site settings panel so that your inputs are displayed in full width.

 

Screen Shot 2017-07-31 at 10.02.28 AM.png

 

You should note that “Bootstrap col number” doesn’t specify the number of columns but the number in the bootstrap’s col class (i. e. col-md-4). To get the actual number of columns you need to divide twelve by the col number. For example for col number 4 you would get 12 / 4 = 3 columns.

 

Using key-value pairs

 

The key-value pair is similar to key-value pairs used in regular checkbox inputs but offers you additional functionality. You should specify a key and a value the value will be displayed in results just like it is with a regular checkbox input.

To see additional functionality click on the chevron on the right side of the key-value pair.

 

Screen Shot 2017-07-31 at 10.11.23 AM.png

 

You can specify image url by typing or picking one from your site, you can provide popup text or html and modify checkbox size.

If you want to pick image from your site’s folder click on the image icon next to the image url to see image picker. Navigate your site’s folder structure to locate desired image and then click on that image.

 

Screen Shot 2017-07-31 at 10.18.01 AM.png

 

To close the panel with additional functionality click on the chevron area again.

 

You are now ready to use image checkbox input.