Add the language-selector plugin.

user/plugins/language-selector/CHANGELOG.md

+
+# v1.1.0
+## 11/23/2018
+
+1. [](#improved)
+    * Add pull-request [#7](https://github.com/clemdesign/grav-plugin-language-selector/pull/7): Need jQuery 1.8 or later.
+    
+
+# v1.0.1
+## 08/10/2018
+
+1. [](#improved)
+    * Add pull-request [#1](https://github.com/clemdesign/grav-plugin-language-selector/pull/1)
+    
+2. [](#bugfix)
+    * Fix issue [#2](https://github.com/clemdesign/grav-plugin-language-selector/issues/2)
+      -> Improve jQuery integration
+
+# v1.0.0
+## 07/22/2017
+
+1. [](#new)
+    * ChangeLog started...

user/plugins/language-selector/LICENSE

+The MIT License (MIT)
+
+Copyright (c) 2017 Clemdesign (http://www.clemdesign.fr)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

user/plugins/language-selector/README.md

+# Grav Language Selector Plugin
+
+![Language Selector](assets/readme_1.jpg)
+
+`Language Selector` is a [Grav](http://github.com/getgrav/grav) plugin that provides native language selector with flags to switch between [Multiple Languages](http://learn.getgrav.org/content/multi-language).
+
+# Installation
+
+Installing the Language Selector plugin can be done in one of two ways. GPM (Grav Package Manager) installation method enables you to quickly and easily install the plugin with a simple terminal command, while the manual method enables you to do so via a zip file or GIT.
+
+## GPM Installation (Preferred)
+
+The simplest way to install this plugin is via the [Grav Package Manager (GPM)](http://learn.getgrav.org/advanced/grav-gpm) through your system's Terminal (also called the command line).  From the root of your Grav install type:
+
+    bin/gpm install language-selector
+
+This will install the Language Selector plugin into your `/user/plugins` directory within Grav. Its files can be found under `/yoursite/user/plugins/language-selector`.
+
+## Manual Installation (Download)
+
+To install this plugin, just download the zip version of this repository and unzip it under `user/plugins`. Then, rename the folder to `language-selector`. You can find these files either on [GitHub](https://github.com/clemdesign/grav-plugin-language-selector).
+
+You should now have all the plugin files under
+
+    /yoursite/user/plugins/language-selector
+
+
+## Manual Installation (Using GIT)
+
+In `user/plugins` folder, apply the following command:
+```
+git clone https://github.com/clemdesign/grav-plugin-language-selector language-selector
+```
+
+This will clone this repository into the _language-selector_ folder.
+
+# Usage
+
+## 1. Define the supported languages
+
+In `system.yaml`, add the supported languages in `languages.supported` parameter.
+
+Example:
+
+    languages:
+      supported:
+        - fr
+        - en
+
+## 2. Integration
+
+You do need to add the included Twig partials template into your own theme somewhere you want the available languages to be displayed.
+
+```
+{% include 'partials/language-selector.html.twig' %}
+```
+
+Something you might want to do is to override the look and feel of the langswitcher, and with Grav it is super easy.
+
+Copy the template file [language-selector.html.twig](templates/partials/language-selector.html.twig) into the `templates` folder of your custom theme:
+
+```
+/yoursite/user/themes/custom-theme/templates/partials/language-selector.html.twig
+```
+
+You can now edit the override and tweak it however you prefer.
+
+`language-selector` need jQuery (1.8 -> later) to display dropdown language menu.
+
+## 3. Usage of the `hreflang` partial
+
+A second template is available for `hreflang` annotations in the header of the page. In order to emit language annotations for the available languages of a page you need to add the corrsponding Twig partial template into the `<head>` section of your page, which can typically be found in `base.html.twig`:
+
+```
+{% include 'partials/language-selector.hreflang.html.twig' %}
+```
+
+This will generate something like:
+
+```
+<link rel="alternate" href="http://example.com/en" hreflang="en" />
+<link rel="alternate" href="http://example.com/fr" hreflang="fr" />
+<link rel="alternate" href="http://example.com/zh-cn" hreflang="zh-cn" />
+```
+
+# Configuration
+
+## Plugin
+
+Simply copy the `user/plugins/language-selector/language-selector.yaml` into `user/config/plugins/language-selector.yaml` and make your modifications.
+
+```
+enabled: true
+built_in_css: true
+button_display: default
+select_display: default
+```
+
+Options `enabled` and `built_in_css` are pretty self explanatory.
+
+For `button_display`, this one define how button of selected language will be displayed. There are 3 possibilities:
+- `default`: Flag and Language name are displayed
+- `flag`: Only flag is displayed
+- `name`: Only language name is displayed
+
+For `select_display`, this one define how language selector will be displayed. There are 3 possibilities:
+- `default`: Flag and Language name are displayed
+- `flag`: Only flag is displayed
+- `name`: Only language name is displayed
+
+## Redirecting after switching language
+
+To have Grav redirect to the default page route after switching language, you must add the following configuration to `user/config/system.yaml`
+```
+pages:
+  redirect_default_route: true
+```
+
+# Contribute
+
+## Languages
+
+For Administration panel, `Language Selector` is available in English and French. You could contribute for another languages.
+
+For flags and language names, it is available for both match between flag images (content in `language-selector/flags`) and the list of language name in `Grav/Common/Language/LanguageCodes.php`.  
+You could contribute by adding new flags to match with list of language name, or the opposite.
+
+Flag images are sized 24 x 12 pixels in PNG.
+
+
+
+# Credits
+
+[Language Selector](https://github.com/clemdesign/grav-plugin-language-selector) is based on [Lang Switcher](https://github.com/getgrav/grav-plugin-langswitcher) plugin.

user/plugins/language-selector/blueprints.yaml

+name: Language Selector
+version: 1.1.0
+description: Language Selector is a [Grav](http://github.com/getgrav/grav) plugin that provides native language selector with flags to switch between [multiple languages](http://learn.getgrav.org/content/multi-language).
+icon: globe
+author:
+  name: Clément G.
+  email: contact@clemdesign.fr
+  url: http://www.clemdesign.fr
+homepage: https://github.com/clemdesign/grav-plugin-language-selector
+keywords: mulitlang, multilanguage, translation, switcher, selector, flag
+bugs: https://github.com/clemdesign/grav-plugin-language-selector/issues
+docs: https://github.com/clemdesign/grav-plugin-language-selector/blob/master/README.md
+license: MIT
+
+form:
+  validation: strict
+  fields:
+    enabled:
+      type: toggle
+      label: PLUGINS.LANGUAGE_SELECTOR.PLUGIN_STATUS
+      highlight: 1
+      default: 1
+      options:
+        1: PLUGIN_ADMIN.ENABLED
+        0: PLUGIN_ADMIN.DISABLED
+      validate:
+        type: bool
+
+    built_in_css:
+      type: toggle
+      label: PLUGINS.LANGUAGE_SELECTOR.BUILT_IN_CSS
+      highlight: 1
+      default: 1
+      options:
+        1: PLUGIN_ADMIN.ENABLED
+        0: PLUGIN_ADMIN.DISABLED
+      validate:
+        type: bool
+
+    untranslated_pages_behavior:
+      type: select
+      label: PLUGINS.LANGUAGE_SELECTOR.UNTRANSLATED_PAGES.LABEL
+      help: PLUGINS.LANGUAGE_SELECTOR.UNTRANSLATED_PAGES.HELP
+      default: none
+      options:
+        none: PLUGINS.LANGUAGE_SELECTOR.UNTRANSLATED_PAGES.OPT_NONE
+        redirect: PLUGINS.LANGUAGE_SELECTOR.UNTRANSLATED_PAGES.OPT_REDIR
+        hide: PLUGINS.LANGUAGE_SELECTOR.UNTRANSLATED_PAGES.OPT_HIDE
+
+    button_display:
+      type: select
+      label: PLUGINS.LANGUAGE_SELECTOR.BUTTON_DISPLAY.LABEL
+      help: PLUGINS.LANGUAGE_SELECTOR.BUTTON_DISPLAY.HELP
+      default: default
+      options:
+        default: PLUGINS.LANGUAGE_SELECTOR.SELECT_DISPLAY.OPT_DEFAULT
+        flag: PLUGINS.LANGUAGE_SELECTOR.SELECT_DISPLAY.OPT_FLAG
+        name: PLUGINS.LANGUAGE_SELECTOR.SELECT_DISPLAY.OPT_NAME
+
+    select_display:
+      type: select
+      label: PLUGINS.LANGUAGE_SELECTOR.SELECT_DISPLAY.LABEL
+      help: PLUGINS.LANGUAGE_SELECTOR.SELECT_DISPLAY.HELP
+      default: default
+      options:
+        default: PLUGINS.LANGUAGE_SELECTOR.SELECT_DISPLAY.OPT_DEFAULT
+        flag: PLUGINS.LANGUAGE_SELECTOR.SELECT_DISPLAY.OPT_FLAG
+        name: PLUGINS.LANGUAGE_SELECTOR.SELECT_DISPLAY.OPT_NAME

user/plugins/language-selector/css/language-selector.css

+.language-selector {
+		float: right;
+		position: relative;
+	  top: 50%;
+		vertical-align: middle;
+	  -webkit-transform: translateY(-50%);
+	  -moz-transform: translateY(-50%);
+	  -o-transform: translateY(-50%);
+	  -ms-transform: translateY(-50%);
+	  transform: translateY(-50%);
+	  margin: 0 1rem !important;
+	  display: inline-block;
+}
+
+.language-selector>.btn:first-child {
+	  margin-left: 0;
+}
+
+.language-selector .btn {
+	  float: left;
+	  position: relative;
+	  display: inline-block;
+	  margin-bottom: 0;
+	  font-weight: 400;
+	  text-align: center;
+	  white-space: nowrap;
+	  vertical-align: middle;
+	  touch-action: manipulation;
+	  cursor: pointer;
+	  user-select: none;
+	  background-image: none;
+	  border: 1px solid transparent;
+	  /* size */
+	  padding: 5px 10px;
+	  font-size: 0.8rem;
+	  line-height: 1.5;
+	  border-radius: 3px;
+	  /* Aspect */
+	  color: #333;
+	  background-color: #fff;
+	  border-color: #ccc;
+}
+
+.language-selector .dropdown-menu {
+	  position: absolute;
+	  top: 100%;
+	  left: 0;
+	  z-index: 1000;
+	  display: none;
+	  float: left;
+	  padding: 5px 0;
+	  margin: 2px 0 0;
+	  font-size: 1rem;
+	  text-align: left;
+	  list-style: none;
+	  background-color: #fff;
+	  background-clip: padding-box;
+	  border-radius: 4px;
+	  box-shadow: 0 6px 12px rgba(0,0,0,.175);
+}
+
+.language-selector .dropdown-menu img {
+		width: 24px;
+		height: 12px;
+		max-width: inherit;
+}
+
+.language-selector .dropdown-menu li {
+    line-height: 1rem;
+    font-color: #c0c0c0;
+    display: list-item;
+    text-align: -webkit-match-parent;
+}
+
+.language-selector .dropdown-menu li:hover {
+    background-color: #eee;
+}
+
+.language-selector .dropdown-menu>li>a {
+    display: block;
+    padding: 3px 15px;
+    clear: both;
+    font-weight: 400;
+    line-height: 1.42857143;
+    color: #333;
+    white-space: nowrap;
+}

user/plugins/language-selector/js/language-selector.js

+/*!
+ * Language Selector JS plugin
+ * Copyright 2017 Clement G., Inc.
+ * Licensed under MIT
+ */
+
+var dropdownmenu={
+	animspeed: 200, 			//reveal animation speed (in milliseconds)
+	showhidedelay: [150, 150], 	//delay before menu appears and disappears when mouse rolls over it, in milliseconds
+
+	//***** NO NEED TO EDIT BEYOND HERE
+	builtdropdownids: [], 		//ids of dropdown already built (to prevent repeated building of same dropdown)
+	stubboxenable: false,
+
+	showbox:function($, $dropdown){
+		this.stubboxenable = false;
+		clearTimeout($dropdown.data('timers').hidetimer);
+		$dropdown.data('timers').showtimer=setTimeout(function(){$dropdown.show(dropdownmenu.animspeed)}, this.showhidedelay[0])
+	},
+
+	hidebox:function($, $dropdown){
+		if(this.stubboxenable === false) {
+			clearTimeout($dropdown.data('timers').showtimer);
+			$dropdown.data('timers').hidetimer=setTimeout(function(){$dropdown.hide(100)}, this.showhidedelay[1]) //hide dropdown plus all of its sub ULs
+		}
+	},
+
+	stubbox:function($, $dropdown){
+		this.stubboxenable = true;
+		clearTimeout($dropdown.data('timers').hidetimer);
+		$dropdown.data('timers').showtimer=setTimeout(function(){$dropdown.show(dropdownmenu.animspeed)}, this.showhidedelay[0])
+	},
+
+
+	builddropdown:function($, $menu, $target){
+		$menu.css({display:'none'}).addClass('jqdropdown');
+		$menu.bind('mouseenter', function(){
+			clearTimeout($menu.data('timers').hidetimer)
+		});
+		$menu.bind('mouseleave', function(){ //hide menu when mouse moves out of it
+			dropdownmenu.hidebox($, $menu)
+		});
+		$menu.data('dimensions', {w:$menu.outerWidth(), h:$menu.outerHeight()}); //remember main menu's dimensions
+		$menu.data('timers', {});
+		this.builtdropdownids.push($menu.get(0).id) //remember id of dropdown that was just built
+	},
+
+
+
+	init:function($, $target, $dropdown){
+		if (this.builtdropdownids.length === 0){ //only bind click event to document once
+			$(document).bind("click", function(e){
+				if (e.button === 0){ //hide all dropdown (and their sub ULs) when left mouse button is clicked
+					$('.jqdropdown').find('ul').addBack().hide()
+				}
+			})
+		}
+		if (jQuery.inArray($dropdown.get(0).id, this.builtdropdownids) === -1) //if this dropdown hasn't been built yet
+			this.builddropdown($, $dropdown, $target);
+		if ($target.parents().filter('ul.jqdropdown').length>0) //if $target matches an element within the dropdown markup, don't bind ondropdown to that element
+			return;
+		$target.bind("mouseenter", function(e){
+			dropdownmenu.showbox($, $dropdown)
+		});
+		$target.bind("mouseleave", function(e){
+			dropdownmenu.hidebox($, $dropdown)
+		});
+		$target.bind("click", function(e){
+			dropdownmenu.stubbox($, $dropdown)
+		})
+	}
+};
+
+//By default, add dropdown to anchor links with attribute "data-dropdown"
+jQuery(document).ready(function($){
+
+  jQuery.fn.adddropdown=function(dropdownid){
+    var $=jQuery;
+    return this.each(function(){ //return jQuery obj
+      var $target=$(this);
+      var $dropdownId = $('#'+dropdownid);
+      if ($dropdownId.length === 1) //check dropdown is defined
+        dropdownmenu.init($, $target, $dropdownId)
+    })
+  };
+
+	var $anchors=$('*[data-dropdown]');
+	$anchors.each(function(){
+		$(this).adddropdown(this.getAttribute('data-dropdown'))
+	})
+});

user/plugins/language-selector/language-selector.php

+<?php
+namespace Grav\Plugin;
+
+use Grav\Common\Language\LanguageCodes;
+use Grav\Common\Page\Page;
+use \Grav\Common\Plugin;
+
+class LanguageSelectorPlugin extends Plugin
+{
+    /**
+     * @return array
+     */
+    public static function getSubscribedEvents()
+    {
+        return [
+            'onPluginsInitialized' => ['onPluginsInitialized', 0]
+        ];
+    }
+
+    /**
+     * Initialize configuration
+     */
+    public function onPluginsInitialized()
+    {
+        if ($this->isAdmin()) {
+            $this->active = false;
+            return;
+        }
+
+        $this->enable([
+            'onTwigInitialized'   => ['onTwigInitialized', 0],
+            'onTwigTemplatePaths' => ['onTwigTemplatePaths', 0],
+            'onTwigSiteVariables' => ['onTwigSiteVariables', 0]
+        ]);
+    }
+
+    /** Add the native_name function */
+    public function onTwigInitialized()
+    {
+        $this->grav['twig']->twig()->addFunction(
+            new \Twig_SimpleFunction('native_name', function($key) {
+                return LanguageCodes::getNativeName($key);
+            })
+        );
+    }
+
+    /**
+     * Add current directory to twig lookup paths.
+     */
+    public function onTwigTemplatePaths()
+    {
+        $this->grav['twig']->twig_paths[] = __DIR__ . '/templates';
+    }
+
+    /**
+     * Set needed variables to display Language-Selector.
+     */
+    public function onTwigSiteVariables()
+    {
+        $data = new \stdClass;
+
+        // Manage Data content
+        $page = $this->grav['page'];
+        $data->page_route = $page->rawRoute();
+        if ($page->home()) {
+            $data->page_route = '/';
+        }
+
+        $languages = $this->grav['language']->getLanguages();
+        $data->languages = $languages;
+
+        if ($this->config->get('plugins.language-selector.untranslated_pages_behavior') !== 'none') {
+            $translated_pages = [];
+            foreach ($languages as $language) {
+                $translated_pages[$language] = null;
+                $page_name_without_ext = substr($page->name(), 0, -(strlen($page->extension())));
+                $translated_page_path = $page->path() . DS . $page_name_without_ext . '.' . $language . '.md';
+                if (file_exists($translated_page_path)) {
+                    $translated_page = new Page();
+                    $translated_page->init(new \SplFileInfo($translated_page_path), $language . '.md');
+                    $translated_pages[$language] = $translated_page;
+                }
+            }
+            $data->translated_pages = $translated_pages;
+        }
+
+        $data->current = $this->grav['language']->getLanguage();
+
+        // Manage Twig Variables
+        $path_flags = $this->grav['locator']->findResource('plugin://language-selector/flags/', false) . "/";
+        $path_flags = $this->grav['base_url'] ."/". ltrim($path_flags, '/');
+        $this->grav['twig']->twig_vars['language_selector'] = $data;
+        $this->grav['twig']->twig_vars['language_display'] = array(
+            "select" => $this->config->get('plugins.language-selector.select_display'),
+            "button" => $this->config->get('plugins.language-selector.button_display'),
+        );
+        $this->grav['twig']->twig_vars['path_flags'] = $path_flags;
+
+        // Manage Assets
+        $this->grav['assets']->add('plugin://language-selector/js/language-selector.js');
+        if ($this->config->get('plugins.language-selector.built_in_css')) {
+          $this->grav['assets']->add('plugin://language-selector/css/language-selector.css');
+        }
+    }
+
+    public function getNativeName($code) {
+
+    }
+}

user/plugins/language-selector/language-selector.yaml

+enabled: true
+built_in_css: true
+untranslated_pages_behavior: none
+button_display: default
+select_display: default

user/plugins/language-selector/languages.yaml

+# English
+en:
+  PLUGINS:
+    LANGUAGE_SELECTOR:
+      PLUGIN_STATUS: 'Plugin status'
+      BUILT_IN_CSS: 'Use built in CSS'
+      UNTRANSLATED_PAGES:
+        LABEL: 'Untranslated pages behavior'
+        HELP: 'Determine what to do with a language link when the current page doesn''t exist in that language or it exists but it''s not published.'
+        OPT_NONE: 'Show language (default)'
+        OPT_REDIR: 'Show language, link to home route'
+        OPT_HIDE: 'Hide language'
+      BUTTON_DISPLAY:
+        LABEL: 'Button Display'
+        HELP: 'Define how button of selected language will be displayed'
+      SELECT_DISPLAY:
+        LABEL: 'Selector Display'
+        HELP: 'Define how language selector will be displayed'
+        OPT_DEFAULT: 'Flag + Language name'
+        OPT_FLAG: 'Only the flag'
+        OPT_NAME: 'Only the language name'
+
+# French
+fr:
+  PLUGINS:
+    LANGUAGE_SELECTOR:
+      PLUGIN_STATUS: 'Statut du plugin'
+      BUILT_IN_CSS: 'Utiliser CSS du plugin'
+      UNTRANSLATED_PAGES:
+        LABEL: 'Comportement des pages non-traduites'
+        HELP: 'Définit le comportement des liens lorsque la page n''existe pas dans la langue courante, ou bien existe mais non publié'
+        OPT_NONE: 'Affiche le langage (par défaut)'
+        OPT_REDIR: 'Affiche le langage, lié à l''URL de base'
+        OPT_HIDE: 'Cache le langage'
+      BUTTON_DISPLAY:
+        LABEL: 'Affichage du boutton'
+        HELP: 'Définit l''affichage du bouton de language sélectioné'
+      SELECT_DISPLAY:
+        LABEL: 'Affichage du sélecteur'
+        HELP: 'Définit l''affichage du sélecteur de language'
+        OPT_DEFAULT: 'Drapeau + Nom de la langue'
+        OPT_FLAG: 'Seulement le drapeau'
+        OPT_NAME: 'Seulement le nom de la langue'
+        
+# Italian
+it:
+  PLUGINS:
+    LANGUAGE_SELECTOR:
+      PLUGIN_STATUS: 'Status del plugin'
+      BUILT_IN_CSS: 'Utilizzare CSS del plugin'
+      UNTRANSLATED_PAGES:
+        LABEL: 'Comportamento delle pagine non-tradotte'
+        HELP: 'Determina il comportamento del link quando la pagina attuale non esiste in quella lingua, oppure esiste ma non è stata pubblicata.'
+        OPT_NONE: 'Esibire lingua (default)'
+        OPT_REDIR: 'Esibire lingua, linkare all''URL di base'
+        OPT_HIDE: 'Nascondere lingua'
+      BUTTON_DISPLAY:
+        LABEL: 'Presentazione del tasto'
+        HELP: 'Definisce la presentazione del tasto della lingua selezionata'
+      SELECT_DISPLAY:
+        LABEL: 'Presentazione del selettore'
+        HELP: 'Definisce la presentazione del selettore di lingua'
+        OPT_DEFAULT: 'Bandiera + Nome della lingua'
+        OPT_FLAG: 'Soltanto la bandiera'
+        OPT_NAME: 'Soltanto il nome della lingua'       
+      
+# Portuguese (Brazil)
+pt-br:
+  PLUGINS:
+    LANGUAGE_SELECTOR:
+      PLUGIN_STATUS: 'Status do plugin'
+      BUILT_IN_CSS: 'Utilizar CSS do plugin'
+      UNTRANSLATED_PAGES:
+        LABEL: 'Comportamento das páginas não-traduzidas'
+        HELP: 'Determina o comportamento do link quando a página atual não existe naquela língua, ou existe mas não está publicada.'
+        OPT_NONE: 'Mostrar língua (default)'
+        OPT_REDIR: 'Mostrar língua, linkar para o URL de base'
+        OPT_HIDE: 'Esconder língua'
+      BUTTON_DISPLAY:
+        LABEL: 'Apresentação do botão'
+        HELP: 'Define a apresentação do botão da língua selecionada'
+      SELECT_DISPLAY:
+        LABEL: 'Apresentação do seletor'
+        HELP: 'Define a apresentação do seletor de língua'
+        OPT_DEFAULT: 'Bandeira + Nome da língua'
+        OPT_FLAG: 'Apenas a bandeira'
+        OPT_NAME: 'Apenas o nome da língua' 
\ No newline at end of file

user/plugins/language-selector/templates/partials/language-selector.hreflang.html.twig

+{% set langobj = grav['language'] %}
+{% for key in language_selector.languages %}
+{% if key == language_selector.current %}
+	{% set lang_url = page.url %}
+{% else %}
+	{% set lang_url = base_url_simple ~ langobj.getLanguageURLPrefix(key) ~ language_selector.page_route ~ page.urlExtension ?: '/' %}
+{% endif %}
+<link rel="alternate" hreflang="{{ key }}" href="{{ lang_url ~ uri.params }}" />
+{% endfor %}
\ No newline at end of file

user/plugins/language-selector/templates/partials/language-selector.html.twig

+<div class="language-selector">
+  <button class="btn" type="button" data-dropdown="langSelectorList">
+    {% if language_display.button == 'default' or language_display.button == 'flag' %}
+    <img alt="{{ native_name(language_selector.current)|capitalize }}" src="{{ path_flags ~ language_selector.current }}.png" />
+    {% endif %}
+    {% if language_display.button == 'default' or language_display.button == 'name' %}
+    {{ native_name(language_selector.current)|capitalize }}
+    {% endif %}
+    <i class="fa fa-caret-down"></i>
+  </button>
+
+  <ul class="dropdown-menu" id="langSelectorList">
+{% for language in language_selector.languages %}
+
+    {% set show_language = true %}
+    {% if language == language_selector.current %}
+        {% set lang_url = page.url %}
+    {% else %}
+        {% set base_lang_url = base_url_simple ~ grav.language.getLanguageURLPrefix(language) %}
+        {% set lang_url = base_lang_url ~ language_selector.page_route ~ page.urlExtension %}
+        {% set untranslated_pages_behavior = grav.config.plugins.language_selector.untranslated_pages_behavior %}
+        {% if untranslated_pages_behavior != 'none' %}
+            {% set translated_page = language_selector.translated_pages[language] %}
+            {% if (not translated_page) or (not translated_page.published) %}
+                {% if untranslated_pages_behavior == 'redirect' %}
+                    {% set lang_url = base_lang_url ~ '/' %}
+                {% elseif untranslated_pages_behavior == 'hide' %}
+                    {% set show_language = false %}
+                {% endif %}
+            {% endif %}
+        {% endif %}
+    {% endif %}
+
+    {% if show_language %}
+        <li>
+          <a href="{{ lang_url ~ uri.params }}">
+            {% if language_display.select == 'default' or language_display.select == 'flag' %}
+            <img alt="{{ native_name(language)|capitalize }}" src="{{ path_flags ~ language }}.png" />
+            {% endif %}
+            {% if language_display.select == 'default' or language_display.select == 'name' %}
+            {{ native_name(language)|capitalize }}
+            {% endif %}
+          </a>
+        </li>
+    {% endif %}
+
+{% endfor %}
+  </ul>
+</div>