How to implement a drop-down language selector in Mundana Theme

Support Plugins
,
1

Hello,

I am using an inherited theme based on the Mundana theme.

I would like to have my site in 3 languages (en, es, de). My goal is to have a drop-down language selector in the navigation.

After reading the documentation on multi-language sites I did the following:

In /grav-admin/user/config/system.yaml added:

languages:

 supported:
- en
- es
- de

Result: now in the URL appears the “en” in the end: http://127.0.0.1:8000/en but no language selection drop-down appears.

I was not sure what to do or where to look for how to implement a visible drop-down selector so I investigated the Mundana template files and found that there is already a partial template called “langswitcher.html.twig”.

 {% extends 'partials/langswitcher-logic.html.twig' %}
    1 
    2 {% block language_block_start %}
    3 <ul class="navbar-nav mx-auto d-flex align-items-center">
    4 {% endblock %}
    5 
    6 {% block language_block_end %}
    7 </ul>
    8 {% endblock %}
    9 
   10 {% block language_item %}
   11     {% if show_language %}
   12     <li class="nav-item"><a href="{{ lang_url ~ uri.params ~ (uri.query|le      ngth > 1 ? '?' ~ uri.query) }}" class="nav-link external {{ active_class }      }">{% include 'partials/langswitcher-' ~ display_format ~ '.html.twig' %}<      /a></li>
   13     {% endif %}
   14 {% endblock %}

Having read this issue my approach was to add this line: {% include 'langswitcher.html.twig’ %} to the templates specified below, which are copied on my mundana inherited custom theme:

{% include 'langswitcher.html.twig’ %} in the templates of:

  • default.html.twig
{% extends ‘partials/base.html.twig’ %}

{% include ‘partials/langswitcher.html.twig’ %}

–> Result: Nothing happens

  • modular.html.twig (same code as the above)

–> Result: ERROR: A template that extends another one cannot include content outside Twig blocks. Did you forget to put the content inside a {% block %} tag?

  • base.html.twig

–> Result: ERROR: Template “partials/langswitcher-logic.html.twig” is not defined in “partials/langswitcher.html.twig” at line 1.

(By the way: I could not find the “partials/langswitcher-logic.html.twig”)

After these intents and my limited knowledge, I did not know what else to do with what comes with the theme itself.

My next idea then was to install and use this plugin and I followed what it is said in the Readme.md documentation, the part of “2. Integration”. However, I also did not manage to get any visible drop-down menu in the navigation. This is anyway not my preferred way to go, for I think that it’s better to use the langswitcher.html.twig that the theme itself seems to have, right?

Other:

Checking then if I could find something I could have missed in the admin UI, I saw that the pages section does show me the 3 languages:

image
image384×238 10.7 KB

I also checked in grav-admin/user/config/themes/mundana-custom.yaml and I have:

menu_langswitcher: true

Thanks a lot in advance in case anyone has an idea on how to approach this :slight_smile:

2

Hello, idk about mundana theme but i will tell what i would do in case it may help a little.

  1. GitHub - clemdesign/grav-plugin-language-selector: Language Selector plugin with flags for Grav CMS is an old plugin so i would expect it may not work.

  2. as you did(i guess) i would install langswitcher plugin and add {% include 'langswitcher.html.twig’ %} to header or something like that which all pages shows. that will show languages that your website have.

  3. i would add css to make it dropdown selector. when you see original html code that {% include 'langswitcher.html.twig’ %} puts to your page, you will see it creates list from ul and li. so you can just add css to make that list a dropdown.

1 Like
3

Hello Gin,

Thanks a lot, it worked by just downloading the langswitcher plugin. I had not done it, but now looking better I found this on the documentation for mundana:

menu_langswitcher:              # Enable/Disable langswitcher icon in menu (langswitcher plugin needed)

I actually find it very pretty already with each language next to each other, so I believe that unless I add more languages, I will not make it dropdown by the moment. Thanks a lot for the suggestion though and the help!! :slight_smile:

1 Like
4

In future versions, I may make the language switcher a dropdown menu.

1 Like