I have a taxonomy terms with image field.

How can I expose terms of this taxonomy field as a filter with Term and image ?

Comments

Nightbird09x created an issue. See original summary.

mikeker’s picture

Status: Active » Closed (won't fix)

This is outside the scope of BEF and should be handled in a custom theme. Sorry.

You can add the image variables in a preprocess and override the BEF template file so display them. (Eg: see template_preprocess_bef_checkboxes and bef-checkboxes.html.twig).

makbuk’s picture

Did you find a solution? I try to realise the same functionality.

makbuk’s picture

I was prompted how to do it. Thanks a lot to xandeadx. http://dru.io/question/8048

function MYMODULE_form_views_exposed_form_alter(&$form, &$form_state) {

foreach ($form['TAXONOMY_ELEMENT']['#options'] as $tid => &$name) {
    $term = taxonomy_term_load($tid);
    $name = '<img src="' . file_create_url($term->FIELD_IMAGE['und'][0]['uri']) . '" />' . $name;
  }
}

In my version TAXONOMY_ELEMENT = tid_1

SEVENTH7’s picture

How can i find the right TAXONOMY_ELEMENT ? tid_1 is not working for me?

Please help :)

ajFernandez’s picture

I think TAXONOMY_ELEMENT is the filter identifier in the view.

Dubs’s picture

Issue tags: -image field +image field

Hey - I know this is an old issue, but I had to do the same thing. Easiest way for me was to create a new better_exposed_filter plugin, and extend the existing one, e.g.

/**
 * Default widget implementation.
 *
 * @BetterExposedFiltersFilterWidget(
 *   id = "srm_bikes_image_links",
 *   label = @Translation("SRM Image Links"),
 * )
 */
class ImageLinks extends Links {}

Then you can extend / change the exposedFormAlter function to suit, e.g.


      public function exposedFormAlter(array &$form, FormStateInterface $form_state) {

        /* Call the parent, or whatever you need to do in your use case. */

        foreach ($form[$field_id]['#options'] as $tid => $option) {
          if (is_numeric($tid)) {
            $term = \Drupal\taxonomy\Entity\Term::load($tid);
            if (!empty($term->get('field_image')->target_id)) {
              try {
                $image_uri = $term->get('field_image')->entity->field_media_image->entity->uri->value;
                $form[$field_id]['#options'][$tid] = [
                  '#type' => 'container',
                ];
                $form[$field_id]['#options'][$tid]['image'] = [
                  '#theme' => 'image_style',
                  '#style_name' => 'thumbnail',
                  '#uri' => $image_uri,
                ];
                $form[$field_id]['#options'][$tid]['title'] = [
                  '#markup' => $option,
                ];
              }
              catch (\Throwable $ex) {
                // Do nothing - just ignore any image exceptions.
              }
            }
          }
        }

In my case I created a custom theme function too further down so we could target the rendering with a new twig file, but you don't need to do that unless required.

You can just change the $form[$field_id]['#theme'] variable if you need to do that, and of course implement the custom theme hook in hook_theme in your module.

I hope that helps :-)