Custom Radio Button with Images

Sometimes, we need to create dialogs that show in a clearer way to the user, what are the choices that he is selecting. For example, if we create some sort of charts rendering component, and in the dialog, we have to choose which type of chart we need to display, it’s obvious that we can’t be making a text description of each kind of chart, instead of doing that, we must show the user the options in a graphic way, using images for each chart.

This post shows a simple way to create a dialog with radio buttons that use an image instead of the dot+text that is usually displayed. The final result of this tutorial must be something like this:



Locate the dialog where you want to place the Image Radio Buttons.

Inside the panel that you want to add a radiogroup, create a node, and call it radiofieldset and select the cq:Widget type. Add the following properties to it:



Keep creating nodes until you have a structure as in the image below.



Make sure that all the nodes have the correct properties like the ones listed next.

Items
Type: cq:WidgetCollection
Example label

First, Second and Third Options

boxLabel: this is going to be the content of the radio. Here you should put an img tag with the size and URL of the image you want to display. An example of this is:

<img style=”width:75px;height:75px;” src=”http://i.imgur.com/ydvVWgz.png”>

cls: radiocss

inputValue: firstOption, secondOption or thirdOption depending on which node you put it.

jcr:primaryType: cq:Widget
name: ./exampleRadio
xtype: radio
First option



Second option


Third option


After creating all the structure, you need to add a CSS file to the component folder, which will allow us to customize the display of the buttons.

To do this, create a cq:ClientLibraryFolder inside the example component node, and call it clientlib, and add it two new text files, css.txt, and radio.css. The structure should look like the following image.


Those two files should contain the following lines:
css.txt
radio.css


radio.css
.radiocss {
display:none ! important;
}

.radiocss + label {
width: 75px ! important;
height:75px ! important;
display:inline-block;
padding: 2px 2px;
margin-bottom: 0;
vertical-align: middle;
border: 1px solid #ccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}

input[type=radio].radiocss:checked + label{
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
background-color:#e0e0e0;
}

After everything is finished and properly created, you should drag your component to the page, and you will see that the radio buttons on your dialog are displayed like this: