Multi-language site.yaml

Support Content & Markdown
1

Question: Is there a way to pass translations to site.yaml?

Reason: I wanted to provide multi-language meta tags in <head>.

I have tried to use a twig tag from my languages.yaml file a la {{ MY_THEME.METADATA.description|t|e }}, but apparently it doesn’t get parsed.

Maybe one can extend site.yaml with other files, for example site.en.yaml, site.de.yaml?

As a test I’ve tried using twig in my frontmatter of a page, but even this didn’t get parsed. Example:

page.md

process:
    markdown: true
    twig: true
twig_first: true
metadata:
    description: '{{ MY_THEME.METADATA.description|t|e }}'

Sorry if this question sounds silly, but I couldn’t find any infos about this in documentation.

Thanks in advance!

2

@kroetenstuhl,

If your theme’s languages.yaml contains:

en:
  MY_THEME:
    METADATA:
      DESCRIPTION:  My meta description
de:
  MY_THEME:
    METADATA:
      DESCRIPTION: Meine Meta-Beschreibung

you can get the translated value in Twig using:

{{ 'MY_THEME.METADATA.DESCRIPTION' | t | e }}

Notes:

  • Note the quotes. See documentation on Translations via Twig
  • No need to do anything in default.md
  • You might also want to take a look at the docs about Translations Override if you don’t want to edit the theme’s file
3

@pamtbaau Thanks for your reply.

Yes my theme contains this file (I’m building a theme from scratch at the moment) and I’m doing this with other translated variables.

My problem right now is, my base.html.twig contains an {% include 'partials/metadata.html.twig' %} which I assume pulls data from site.yaml first and then from the individual pages.

I would like to pass my translated strings (from languages.yaml or anywhere else if needed) to this twig function.

Maybe the language barrier made my initial questioning confusing. I hope this clears it up better.

4

@kroetenstuhl, Grav overrides metadata properties from site.yaml with metadata properties from the header of the page.

If you want meta properties to be translated, you can copy /system/templates/partials/metadata.html.twig into your theme’s folder /user/themes/mytheme/templates/partials and then edit that file.

  • Change all {{ meta.xyz | e }} into {{ meta.xyz | t | e }}
  • and {{ meta.content|raw }} into {{ meta.content | t | raw }}

Any meta property that has a value which is available in languages.yaml it will be translated. If the property has not translation, the value will be used verbatim.

5

@pamtbaau Thanks again.

I can’t get this to work, I think I might have the wrong syntax in my languages.yaml.

Created a duplicate of metadata.html.twig in the appropriate theme folder, edited the file according to your instructions.

Then tried following in my languages.yaml:

en:
  metadata:
    'description': Hello

de:
  metadata:
    'description': Hallo

I also tried other variants like:

en:
  metadata:
    'description': 
      'content': Hello

or

en:
  metadata:
    'name': 'description'
      'content': Hello

Tried all variants with and without single quotes.

Last one is so bad it gives me a “Crikey!”

I’m clearly messing up the syntax, I’m completely stuck now. :frowning:

6

@kroetenstuhl, hard so say what is going wrong because you’re only showing 1 part of the possible problem area…

“Here’s the battery, please tell me why the lights of my care don’t work” :slight_smile:

Please show the entire problem surface:

  • /user/config/site.yaml (relevant parts of it if any)
  • frontmatter of default.md
  • /user/themes/mytheme/languages.yaml (relevant parts of it)
  • /user/themes/templates/partials/metadata.hmtl.twig
7

Nothing of relevance. Am I missing something here? Do I need to declare the meta tags in there as well? Or do you mean there could be something that overrides my “site wide” ones? - In the latter case, no, none are overridíng from there.
I have tried once a simple

metadata:
    description: hello

just to test if the twig template even works. The template doesn’t seem to be the problem, the meta tag is showing up when using frontmatter.

I deleted everything else from it for the testing, so all that is left now is:

en:
  metadata:
    'description': Hello

de:
  metadata:
    'description': Hallo

{% for meta in page.metadata %}
    <meta {% if meta.name %}name="{{ meta.name|t|e }}" {% endif %}{% if meta.http_equiv %}http-equiv="{{ meta.http_equiv|t|e }}" {% endif %}{% if meta.charset %}charset="{{ meta.charset|t|e }}" {% endif %}{% if meta.property %}property="{{ meta.property|t|e }}" {% endif %}{% if meta.content %}content="{{ meta.content|t|raw }}" {% endif %}/>
{% endfor %}

EDIT: My site.yaml contains one statement, which would be a question for a new topic I suspect. I wanted to get rid of the generator tag, couldn’t find a way, so I just override it with something cryptic:

metadata:
  generator: 'v 0.0.10'
8

@kroetenstuhl, Maybe there is some misconception going on…

When using the translation filter |t in Twig, the dot-separated string, or variable containing a dot-separated string, is looked up in languages.yaml for the current language.

In you case:

{{ 'metadata.description' | t }}

will match the following in languages.yaml:

en:
  metadata:
    description: Hello

and print “Hello”

That means, that the values for the metadata inside site.yaml must match a string inside language.yaml.

In your case, your site.yaml (or frontmatter of page) should contain:

metadata:
  description: metadata.description

Note:

  • Yaml rarely needs quotes. Only in case a confusion might occur.
1 Like
9

@pamtbaau Thank you so much once again, it worked. Also thank you for your patience!