[Resolved] Let the user choose an image in a Toolset form

[Author]

Posts

[Rune Brynestad]

I'm working on an Obituary page. One of the facilities I work with is a "Light a candle" function. You can see an example here:
hidden link
Click on the "Light a candle link" (See screenshot)

I wonder if it is possible to let the user choose from some predefined images like in this demo. I need some advice on what will be the best approach to get this done.

How can I give the user a set of predefined images to choose from in a Toolset form?
How can the user select an image and use it in their post?

Thanks in advice.

Kind regards
Rune

[Minesh]

Hello. Thank you for contacting the Toolset support.

Basically - Toolset forms allow the use of native media uploader to add/upload images which they can submit using forms.
=> https://toolset.com/documentation/user-guides/front-end-forms/using-the-native-wordpress-media-manager-in-front-end-forms/

I checked the demo URL you shared and there is no such feature available to implement such functionality where you can select the image.

However - you can always implement it if you have command over custom JS/jQuery. This may require custom and which is beyond the scope of our support policy.

However - Maybe you can add a radio button and as a source of the radio button title/value you should try to assign the image you require. If you can check the following link where there are number of examples given how to display radio button as image:
=> https://stackoverflow.com/questions/17541614/use-images-instead-of-radio-buttons
=> hidden link
=> https://stackoverflow.com/questions/3896156/how-do-i-style-radio-buttons-with-images-laughing-smiley-for-good-sad-smiley/3896259

[Rune Brynestad]

Hi Minesh

Thanks for looking into this.

I've been through the examples given on how to display radio button as image. As far as I can see, there are two approaches. Images can be placed in place of radio buttons by using label and span elements, or images could be attached to css classes as background images.

I've created a custom field as a radio group with some dummy labels and values. The radio gruup creates html output as shown below. Based on the output, how can I attach the images using labels or css classes?

<div class="js-wpt-field-items js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="radios-wpcf-symbol">
	
    <ul class="wpt-form-set wpt-form-set-radios wpt-form-set-radios-wpcf-symbol">
	
    <li class="wpt-form-item wpt-form-item-radio radio-image-1 radio"><label class="wpt-form-label wpt-form-checkbox-label">
	<input type="radio" id="form-841439132" name="wpcf-symbol" value="1" class="wpt-form-radio form-radio radio" data-wpt-type="radio" data-wpt-id="cred_form_3805_1_form-841439132" 
    data-wpt-name="wpcf-symbol" />Image 1</label></li>

	<li class="wpt-form-item wpt-form-item-radio radio-image-2 radio"><label class="wpt-form-label wpt-form-checkbox-label">
    <input type="radio" id="form-2010975885" name="wpcf-symbol" value="2" class="wpt-form-radio form-radio radio" data-wpt-type="radio" data-wpt-id="cred_form_3805_1_form-2010975885" 
    data-wpt-name="wpcf-symbol" />Image 2</label></li>

	</ul>
</div>

Thanks again for looking into this.

Kind regards
Rune

[Minesh]

Sorry but that will require a lot of custom javascript/jQuery code to add the image to each radio button option and again it will be static. I do not have any workaround to share and to support such custom requirement is beyond the scope of our support policy.

I already shared a few links that may help you and if you do not know how to do it, you may consider hiring a pro javascript developer or you can even choose from our certified partners:
=> https://toolset.com/contractors/

[Rune Brynestad]

I'll share the solution with you:

Rebild the radio with a cred_generic_field so you can easily add images.

[cred_generic_field type='radio' field='symbol' class='symbol']
{
"persist":1,
"required":0,
"default":["1"],
"options":[{"value":"1","label":"<img src='<em><u>hidden link</u></em>' alt='symbol 1' />"},{"value":"2","label":"<img src='<em><u>hidden link</u></em>' alt='symbol 2' />"}]
}
[/cred_generic_field]

Then add CSS similar to the fiddle example hidden link

.hide {
  display: none;
}

ul.wpt-form-set-radios-symbol {
  display: flex;
  padding-left: 0;
}
ul.wpt-form-set-radios-symbol li {
  margin: 15px 20px 15px 0;
}
.wpt-form-set-radios-symbol input{
  margin:0;
  padding:0;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}

.wpt-form-set-radios-symbol input:active + label {
  opacity: .9;
}
.wpt-form-set-radios-symbol input:checked + label {
  -webkit-filter: none;
  -moz-filter: none;
  filter: none;
  border: 2px solid #ecd18f;
}


.wpt-form-set-radios-symbol label {
  cursor:pointer;
  background-size:contain;
  background-repeat:no-repeat;
  display:inline-block;
  -webkit-transition: all 100ms ease-in;
  -moz-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
  -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
  -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
  filter: brightness(1.8) grayscale(1) opacity(.7);
  border: 2px solid #fff;
  border-radius: 30px;
  padding: 5px;
}
.wpt-form-set-radios-symbol label {
  -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
  -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
  filter: brightness(1.2) grayscale(.5) opacity(.9);
}

Finally, use the cred_save_data hook to update the custom field

add_action('cred_save_data', 'update_symbol',10,2);
function update_symbol($post_id, $form_data)
{
    // This is the CRED form ID
    if ($form_data['id']==3805)
    {
// 'symbol' is the field name in the CRED generic field setup
        if (isset($_POST['symbol']))
        {
            // 'wpcf-symbol' is the meta key that the value of 'symbol' will be added to
            add_post_meta($post_id, 'wpcf-symbol', $_POST['symbol'], true); // Update custom field
        }
    }
}