Skip Navigation

[Resolved] Using an image as a filter

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 4.99 hours from now. Thank you for your understanding.

This topic contains 6 replies, has 2 voices.

Last updated by nelsonT-2 1 year, 10 months ago.

Assigned support staff: Nigel.

Author
Posts
#1448041

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.

#1448843

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00: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.

#1448987

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...

#1449035

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00: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.

#1449039

Thank you.

#1450295

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00: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

#1455153

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.