[Resolved] Custom icons in search form along with field terms

[Author]

Posts

[Aditya Deshmukh]

Tell us what you are trying to do?
I'm designing a real estate directory website. I'm trying to design a search form which will have custom icons for the taxonomy "Property Choices".

Is there any documentation that you are following?
No.

Is there a similar example that we can see?
This is what I'm trying to achieve: hidden link

What is the link to your site?
This is the link to the website's search page where we need to make the required change: hidden link

Thank you!!

[Nigel]

The source of the image icons would be a term image custom field, yes?

You need to use custom CSS for this, I can prepare some information to help you implement this, give me a little while and I'll get back to you.

[Aditya Deshmukh]

Thanks for the quick response!!

I don't understand by "Term image custom field." So I've added the screenshots to let you get more info about the taxonomies.

Looking forward to hearing from you.

[Nigel]

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.

[Aditya Deshmukh]

It's okay, Nigel. Thank you!!

[Nigel]

OK, here we go.

You can see it working in the screenshot, where I'm using radio controls for a filter and have replaced the text labels with images.

(Note you can still see the radio inputs, which you can fix simply with CSS, I have a demo of that here: hidden link. You will want some CSS to modify your image for the selected state, such as adding a border.)

In this example, the images are coming from term meta, that is to say, custom fields of the taxonomy terms.

To set those up, go to Toolset > Custom Fields and a field group to your taxonomy (rather than to a post type, as you typically would). Add an image field to this group. Then when you go to manage the terms of this taxonomy you will be able to add an image (e.g. some icon) to the term, and that will be used to provide the label in this example.

It would be simpler if you simply hard-coded some img tags, but I'm describing this more dynamic solution here.

When you insert a filter control into a View it doesn't provide many possibilities to customise the generated markup, and you need to change the labels to use images.

The first step is to insert the filter control for the taxonomy to be dispayed as radio buttons, as normal.

Then visit a page displaying the View on the front end. Use your browser dev tools to inspect the resulting markup, and copy the markup for this filter control.

Return to edit the View and replace the markup and shortcode for the filter control with the generated markup you copied from the front end.

If you go back to the front end you should see the same filter control as before.

A couple of gotchas:

1. in my testing, if this was the only filter control nothing would be rendered from the filter control section. It seems you need at least one filter generated by shortcode for the section to render. If you don't have any other filter controls, try adding the text search filter, for example, and then hiding that with CSS.

2. because the markup for all the terms is added manually, you can't use the option to "Show only available options for each input" if you are using the setting to update results by ajax whenever a filter changes, you must use "Always show all values for inputs", which you can do when manually choosing settings.

Now, without making any other changes, the first problem you will notice is that if you change the selected option on the filter and the results (and filter controls) are updated, it doesn't remember which filter was selected.

To fix this you will need to register a custom shortcode which is going to add the attribute "checked" to a filter control if that filter was selected.

Here's the code you will need to add (e.g. in a code snippet at Toolset > Settings > Custom code):

/**
 * Register shortcode to output 'checked' if filter set
 */
add_shortcode('set-checked', function ($atts = [], $content = null) {

    // provide defaults
    extract( shortcode_atts(
        array(
            'param' => '',
            'value' => ''
        ),
        $atts
    ) );

    $output = '';
    if ( isset( $_GET[$param] ) && $_GET[$param] == $value ) {
        $output = 'checked';
    }

    return $output;
});

Now you need to go back to edit the markup for the filter control that you manually pasted in to use this shortcode.

Here is an example from my test site. My taxonomy is colour, and the term here is blue, so I'm editing the input tag for that particular radio input:

        <input type="radio" id="colour-blue" class="js-wpv-filter-trigger form-check-input" name="wpv-colour" value="blue" [set-checked param='wpv-colour' value='blue']>

Note where at the end of the tag I inserted my custom shortcode set-checked, providing two attributes, the first "param" whose value is the same as the name attribute of the same input tag, the second "value" which is the same as the value attribute for this particular input.

You'll need to do the same for each of the input tags for this filter control.

That fixes the first problem of remembering which radio input had been selected when the results update.

Now to the actual question of replacing the labels with images.

If you are happy to just hardcode the images the next step is easy, because it is just a question of replacing the text inside the label tags with img tags as required.

However, if you want to use more dynamic images, i.e. ones you added to an image field in the term meta, then we'll need some more custom code to retrieve the right image in each case.

Here is the code for a second custom shortcode we will need (which you can add to the same code snippet as before):

/**
 * Register shortcode termmeta to output a term field value
 *
 */
add_shortcode('termmeta', function ($atts = [], $content = null) {
 
    // provide defaults
    extract( shortcode_atts(
        array(
            'tax'   => '',
            'term'  => '',
            'field' => ''
        ),
        $atts
    ) );
 
    $return = '';
 
    if (isset($tax) && isset($field) && isset($term)) {

        $term_obj = get_term_by( 'slug', $term, $tax );
        $return = get_term_meta($term_obj->term_id, 'wpcf-'.$field, true);
    }
 
    return $return;
});

You will then need to update the markup for the filter control, specifically replacing the text from the label with something like the following example from my test site:

<label for="colour-blue" class="form-check-label">
  <img src="[termmeta tax='colour' term='blue' field='colour-icon']" width="60" height="60">
</label>

Note that I use my custom shortcode termmeta to provide the value for the src attribute of the img tag.

The termmeta shortcode needs 3 attributes to tell it which field to output for which term of which taxonomy. (As you use this on the other inputs you will only be changing the term attribute as required.)

I think that's it. You will have some CSS to add to style things to your needs, but the functionality is all there.

I appreciate this is quite complex, and it wouldn't be a bad idea to file a feature request to have this ability: https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

Indeed, it was more complex than I appreciated it would be when I began. As I have another client asking for the same I spent some time on this, but more than I had intended. So my last note is just to set expectations by saying that this really is custom development work beyond the normal scope of normal support, so please don't be surprised if you ask a similar question in future and you are directed to recruit a developer.

Let me know how you get on.