[Resolved] Using an image as a filter

[Author]

Posts

[nelsonT-2]

Hi,

My client asked me if it was possible to use an image as a filter in the search form... It would be so much easier if, in addition to drop-down/select, radio and checkboxes, we could have an image input field...

I'm able to do it with jQuery/JavaScript, but it's static...

So, I added a field to my taxonomy (we are showing fields, but filter with taxonomy) to insert an image... That works, but I can't get the image as a source (again, would be great with input type="image").

So, now I use jQuery to preprend an image (with static url, that's the problem) to the radio buttons and hide the input with CSS (and with format="" I can also hide the label).

Is there a better way, that would allow me to use the taxonomy image and therefore would be easier for my client to change the image and also be dynamic if we change the path...?

Thank you.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Nelson

Sorry, I just noticed that I sent a reply to you a few hours ago, but it seems to be lost.

Coincidentally I have another client asking about doing something similar, and because Views doesn't offer any way to customise the output of filter controls, this is actually rather difficult.

I've been trying to think of a solution this morning and I'm not sure there is one that doesn't depend on a lot of custom JS, but I'm going to circle back to this shortly to have another crack at it, and I'll update you again.

[nelsonT-2]

Currently, I use that jQuery code, but like I said, it's pretty static... Adding the "sel" class allows me to add some CSS styling...

var url = window.location.origin + "/FSM"; // enlever + "/FSM" quand le site sera mis en ligne

jQuery(document).ready(function($){
jQuery('.form-group input:checked').parent().addClass('sel');
jQuery('.form-group .radio label').each(function(){
jQuery('.form-group .radio label:hover').css('cursor', 'pointer');
jQuery('.form-group .radio label').remove('img');
var slug = jQuery(this).find('input').val();
jQuery(this).prepend('<img src="' + url + '/wp-content/uploads/2020/01/' + slug + '.jpg" alt="' + slug + '">');
});
});

jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
jQuery('.form-group .radio label').each(function(){
jQuery('.form-group .radio label').remove('img');
var slug = jQuery(this).find('input').val();
jQuery(this).prepend('<img src="' + url + '/wp-content/uploads/2020/01/' + slug + '.jpg" alt="' + slug + '">');
});
});

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
jQuery('.form-group input').parent().removeClass('sel');
jQuery('.form-group input:checked').parent().addClass('sel');
});

Unfortunately, I can't use a shortcode in JavaScript, so can't use my image field for the taxonomy...

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

I have a solution for you, but it's quite complex and I'm out of time today, so I'll post the solution when I start in the morning, I hope that's okay.

[nelsonT-2]

Thank you.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Nelson

I just shared the—lengthy—reply on the other client's thread.

Could you read through that and then come back here with any questions?

https://toolset.com/forums/topic/custom-icons-in-search-form-along-with-field-terms/#post-1450281

[nelsonT-2]

Thank you for your time!

Hopefully, at some point the "input type='image'" will be added and it's going to be easier and also be more dynamic, but thank for that solution.