[Resolved] Any way to show description (images) in a taxonomy checkboxes filter?

[Author]

Posts

[bobA-2]

I've got a Taxonomy with tv channels. I've put channel icons in the description field like this

<img title="Channel name" src="/pics/channellogos/channellogo.png" alt="Channel name" width="50px" height="50px" />

Say i wanted to use the taxonomy in a Custom Search View checkboxes filter is there any way to show the channel logo instead of just the name like with the code below?

[wpv-control-post-taxonomy taxonomy="tv-channels" type="checkboxes" url_param="wpv-tv-channels"]

[Christian Cox]

Hi, the available options for the wpv-control-post-taxonomy shortcode are elaborated upon here:
https://toolset.com/documentation/user-guides/views-shortcodes/#vf-521572

As far as what's shown in the format section, there aren't any options for displaying custom termmeta values or the description field from the term itself. If you want to display icons instead of "name" or "count", you will have better luck using CSS that targets individual "label" elements and adds a background image somehow based on the corresponding input field.

For example, if your term name is "blue" and you have a background image called "blue.jpg" in some special background image directory, then you could target the label for this checkbox and add a background image. Something like this very simple example CSS:

label[for="your-taxonomy-slug-blue"] {
  background-image: url("<em><u>hidden link</u></em>");
}

https://css-tricks.com/attribute-selectors/
The syntax to target your checkbox labels might be slightly different, so you'll have to check the DOM. I'm attaching an example here showing how I set a background color, but you could just as easily use a background image.

Since you can't use Types or Views shortcodes effectively in CSS, this approach is only possible if you predefine the terms and images. Then with some CSS tweaks, you could display this background image instead of term text, or you could indent the text and display the background image before the text, or any other CSS effect.