Enable placeholder translation for exposed filters

Question

I'm building a multilingual site using Drupal 8 and I already managed the creation of a search tool using Views and Exposed Filters. My issue is with the translation of this tool: Drupal gives me the option for the translation of most of the elements of the view, but I can't find any options to translate the placeholder used in the exposed filter.

Is there any way to translate placeholders for those filters?

Answer 1

I'll post the solution I worked out just in case someone might need it. Using the hook_form_alter() function:

/**
 * @param $form
 *   Nested array of form elements that comprise the form.
 */
function YOUR_THEME_form_alter(&$form){
  if($form['#id'] == 'your_form_id'){
    foreach ($form['#info'] as $filter_info) {
      $filter = $filter_info['value'];
      if ($form[$filter]['#type'] == 'field_type' && $filter == 'field_title') {
        $form[$filter]['#attributes']['placeholder'] = t('your_placeholder');
      }
    }
  }
}

Answer 2

Just a note that you must visit the page in the translated language. If you never visit the page, the string will not be generated and not be available as an option in admin/config/regional/translate.

Answer 3

I found a really interesting way to do this which really doesn't affect core or mess with code. Rather, play with twig files this way:

1. Copy the input.html.twig file to your theme

2. Edit that file and include the following lines

   {% if (attributes.placeholder is defined) %}
     {% set placeholder = attributes.placeholder|render|trans %}
     <input{{ attributes.addClass("form-control")|without('placeholder') }} placeholder="{{ placeholder }}" />{{ children }}
   {% else %}
     <input{{ attributes.addClass("form-control")|without('placeholder') }} />{{ children }}
   {% endif %}
   

3. Clear the cache

4. Open the translated page so that Drupal picks up that new string to translate

5. Head over to your translation UI (admin/config/regional/translate)

If you are fortunate, your placeholder text will now be available to translate.