2

the language switch block looks like this:

enter image description here

I would like to display it as bootstrap buttons or whatever else is possible. At least not in plain links.

<button type="button" class="btn btn-primary">Primary</button>

Now in my D8 core, I found the PHP file for the language switcher, but I don't see where i can put my HTML code.

/**
 * Provides a 'Language switcher' block.
 *
 * @Block(
 *   id = "language_block",
 *   admin_label = @Translation("Language switcher"),
 *   category = @Translation("System"),
 *   deriver = "Drupal\language\Plugin\Derivative\LanguageBlock"
 * )
 */
class LanguageBlock extends BlockBase implements ContainerFactoryPluginInterface {

  /**
   * The language manager.
   *
   * @var \Drupal\Core\Language\LanguageManagerInterface
   */
  protected $languageManager;

  /**
   * The path matcher.
   *
   * @var \Drupal\Core\Path\PathMatcherInterface
   */
  protected $pathMatcher;

  /**
   * Constructs an LanguageBlock object.
   *
   * @param array $configuration
   *   A configuration array containing information about the plugin instance.
   * @param string $plugin_id
   *   The plugin_id for the plugin instance.
   * @param mixed $plugin_definition
   *   The plugin implementation definition.
   * @param \Drupal\Core\Language\LanguageManagerInterface $language_manager
   *   The language manager.
   * @param \Drupal\Core\Path\PathMatcherInterface $path_matcher
   *   The path matcher.
   */
  public function __construct(array $configuration, $plugin_id, $plugin_definition, LanguageManagerInterface $language_manager, PathMatcherInterface $path_matcher) {
    parent::__construct($configuration, $plugin_id, $plugin_definition);
    $this->languageManager = $language_manager;
    $this->pathMatcher = $path_matcher;
  }


  /**
   * {@inheritdoc}
   */
  public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
    return new static(
      $configuration,
      $plugin_id,
      $plugin_definition,
      $container->get('language_manager'),
      $container->get('path.matcher')
    );
  }


  /**
   * {@inheritdoc}
   */
  protected function blockAccess(AccountInterface $account) {
    $access = $this->languageManager->isMultilingual() ? AccessResult::allowed() : AccessResult::forbidden();
    return $access->addCacheTags(['config:configurable_language_list']);
  }

  /**
   * {@inheritdoc}
   */
  public function build() {
    $build = array();
    $route_name = $this->pathMatcher->isFrontPage() ? '<front>' : '<current>';
    $type = $this->getDerivativeId();
    $links = $this->languageManager->getLanguageSwitchLinks($type, Url::fromRoute($route_name));

    if (isset($links->links)) {
      $build = array(
        '#theme' => 'links__language_block',
        '#links' => $links->links,
        '#attributes' => array(
          'class' => array(
            "language-switcher-{$links->method_id}",
          ),
        ),
        '#set_active_class' => TRUE,
      );
    }
    return $build;
  }

  /**
   * {@inheritdoc}
   *
   * @todo Make cacheable in https://www.drupal.org/node/2232375.
   */
  public function getCacheMaxAge() {
    return 0;
  }

}

2 Answers 2

3

First choice
If you wants some design related change you can easily achieve using CSS.

Second choice
Enable twig.config: debug: true

See some template file where you can made changes.

FILE NAME SUGGESTIONS:
links--language-block.html.twig
links--language-block.html.twig
links.html.twig

Changing markup of the language switcher

Trird choice
Alter _language_switch_links_alter. How do I alter a language item link?

4
  • Thanks. Should I disable again twig config debug when I pass into live site?
    – Vasmir
    Commented Mar 3, 2017 at 13:36
  • yes you need to disable once move to live.
    – DRUPWAY
    Commented Mar 3, 2017 at 13:44
  • Okay. And for the CSS. The concept of modifying CSS in Drupal is really confusing to me. I found out the class of the language switcher with Inspector.class="language-link is-active". Now I don't get it where I put my CSS code. There is no apparent CSS folder in the core. Excuse me for asking such trivial things.
    – Vasmir
    Commented Mar 3, 2017 at 13:49
  • 1
    You can put css in you default themes style.css or the css files included for you site.
    – DRUPWAY
    Commented Mar 4, 2017 at 5:35
1

Ok I found now what helped me. Two modules do this:

  1. Language Switcher Dropdown + Language icon (the flags don't get displayed on D8 yet)

enter image description here

  1. Dropdown language Module

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.