Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Themes & Styling

Where to add language selector code?

Started by Alkan 5 years ago · 11 replies · 1656 views
5 years ago

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.

5 years ago

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.

5 years ago

@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?

5 years ago

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.

5 years ago

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.

5 years ago

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

5 years ago

@alkan,

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?

5 years ago

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.)

5 years ago

@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
5 years ago

@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.

5 years ago

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.

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by Pedro M, 2 months ago
4 193 2 months ago
Themes & Styling · by Ian, 2 months ago
3 90 2 months ago
Themes & Styling · by Norbert, 2 years ago
11 449 3 months ago
Themes & Styling · by Lukáš Findeis, 3 months ago
0 44 3 months ago
Themes & Styling · by Sebadamus, 4 months ago
5 123 3 months ago