Where to add language selector code?

Hello, I’m a new user of Grav, though I’m not new to programming or to flat file CMSs. I created a multilingual site and need to display a language selector. To this end, I installed and activated the LangSwitcher plugin, which requires adding {% include 'partials/langswitcher.hreflang.html.twig' %} to the theme. My site uses the Typhoon theme, which appears to be the current state of the art for Grav.

Can anyone please tell me exactly where this code (which path and file, which line number?) should go to add a language selector to the upper right of the navbar in both desktop and mobile views? I’ve been trying to add it to different files but Grav keeps returning error messages. Many thanks in advance for any assistance.

Not familiar with Typhoon theme, but most likely you’d want to put the snippet somewhere in the /templates/partials/base.html.twig. Also you should consider extending the Typhoon by creating your own theme using inheritance type. If you change Typhoon theme template directly, you are risking losing these changes on theme update.

Also you might run into a problem extending the base template. Here’s a recipe how to do this.

@Karmalakas: Thanks very much for your helpful reply. I installed devtools and created a theme with type “inheritance.” I have experience with WordPress child themes, and this sounds similar.

However, switching to the new “inheritance” theme (set to inherit from Typhoon) only returns an error, and the site is no longer live at all. I’ve been studying the instructions you kindly mentioned, but they’re really quite confusing to me as someone brand new to Grav.

Apart from the inheritance theme, I had already tried to edit /templates/partials/base.html.twig but that only returned errors. May I ask you (or anyone) the exact filename, path, and line number to add the code {% include 'partials/langswitcher.hreflang.html.twig' %} to get a language picker at the right of the navbar in the Typhoon theme?

What errors do you get?

I’m getting a very strange error: ‘0 - An exception has been thrown during the rendering of a template (“HEX color needs to be 6 or 3 digits long”).’

The only things I changed are the child (“inheritance”) theme, a new .yaml file inside the new theme folder, and editing /user/config/system.yaml to point to this new theme. These steps are outlined clearly here. No idea what color codes may be triggering this error.

This seems to have something to do with the apparently still-new Typhoon theme. Googling it reveals at least two other people who have encountered this error while trying to do different things with it.

May I therefore ask a simpler question? Putting aside theme inheritance for the time being, could anyone kindly tell me exactly which folder, file, and line number to add the code for the language switcher in the Typhoon theme? Ideally it should appear as the last item in the navbar.

Just now noticed this is a premium theme. Sorry, but I don’t have access to its files so can’t pinpoint the exact location. At this point you might ask in the dedicated issue tracker on GitHub


could anyone kindly tell me exactly which folder, file, and line number to add the code for the language switcher in the Typhoon theme

Nobody can… It entirely depends on where you wish the render the language-switcher. Sticky at the top? Part of the menu? Part of mobile menu?

As mentioned, in the menu (and mobile menu). (I’m an experienced programmer and web developer, just wondering why adding this code only returns error messages, as I’m new to Grav.)

@alkan, Sorry, you’re right. An oversight by me… As mentioned by Karmalakas, there is a dedicated repo for Premium products. You’ll get support from the devs on issues and questions.

1 Like

@pamtbaau: Many thanks. Turns out this is evidently due to CSS incompatibility between the LangSwitcher plugin and the Typhoon theme. The code is technically added but the links are hidden. A workaround would be to disable LangSwitcher’s internal CSS. For now I’ll try another plugin.

Update: Looks like the LangSwitcher plugin is the way to go for the Typhoon theme, but the developer said that additional CSS classes are needed.