Referencing 2nd level array item from language.yaml - FOR loop syntax?

Support Themes & Styling
1

Hello Grav Community,

1st post here. Trying to make a Boxify-Themed site bi-lingual.

Original site.yaml contains :

header:
  title: "Title of the site"
  buttons:
    -
      text: 'Sample Text 1'
      link: 'http://www.example.fr'
      class: 'use-btn animated fadeInUp'
    -
      text: "What I''m up to"
      link: '#about'
      class: 'learn-btn animated fadeInUp'
      icon: arrow-down
    -
      text: 'Sample Text 3'
      link: '#333'
      class: 'learn-btn animated fadeInUp'
      icon: arrow-down

And the code in the original twig file that works is (it is called header.html.twig in the Boxify theme):

{% for button in site.header.buttons %}
   <a href="{{ button.link }}" class="{{ button.class }}">{{ button.text }} {% if button.icon %}<i class="fa fa-{{ button.icon }}"></i>{% endif %}</a>
            {% endfor %}

So, my actions to go bi-lingual :

Replaced the header section in site.yaml to be

 header:
  title: 'site.header.title'
  buttons: 'site.header.buttons'

Created en.yaml and fr.yaml in /user/languages directory

Here’s my en.yaml (fr.yaml is similar):

header:
  title: 'Title of the site'
  buttons:
    -
      text: 'Sample Text 1'
      link: 'http://www.example.fr'
      class: 'use-btn animated fadeInUp'
    -
      text: 'What I''m up to'
      link: '#about'
      class: 'learn-btn animated fadeInUp'
      icon: arrow-down
    -
      text: 'Sample Text 3'
      link: '#333'
      class: 'learn-btn animated fadeInUp'
      icon: arrow-down

Now, in my twig file, I can call my title from my language yaml easily enough with

{% if site.header.title %}
   <h1 class="animated fadeInDown">{{ site.header.title|t }}</h1>
 {% endif %}

The |t filter does its job.

But I am unable to extract the data from the “buttons” array within the language files.

And I’ve been trying

{% if site.header.buttons %}
{% for button in site.header.buttons[language.getActive] %}
              <a href="{{ button.link }}" class="{{ button.class }}">{{ button.text }} {% if button.icon %}<i class="fa fa-{{ button.icon }}"></i>{% endif %}</a> 
          {% endfor %}
  {% endif %}

which does nothing. Adding the |t filter on the fields creates an error.

I also tried

{% if site.header.buttons %}
            {% if button.text %}{{ grav.language.getLangage }}/{% endif %}
    {% for button in site.header.buttons %}
            <h1 class="animated fadeInDown">{{ button.text }}</h1>
    {% endfor %}
{% endif %}

without anymore success.

I’m trying to learn by example but here I’ve reached a point where it is necessary to have some real understanding of the use of language-related variables and how to reference data across files.

Thus my coming here for help

References :

Grav’s documentation states :

The first place Grav looks for translation files is in the system/languages folder. Files are expected to be created in the format: en.yaml, fr.yaml, etc. Each yaml file should contain an array or nested arrays of key/values pairs:

but it lacks explanations on how to recover said values

Note that others have achieved expected result : https://wallabag.org/fr but they hardcoded the text in their twig file - something that I don’t want to do.

2

You can’t have arrays like that in a language file, they must be this format for user/langauges/en.yaml for example:

SAMPLE_TEXT_1: "Sample Text 1"
SAMPLE_TEXT_2: "What I'm up to"
SAMPLE_TEXT_3: "Sample Text 3"
...

Then in your site config you would put:

header:
  title: "Title of the site"
  buttons:
    -
      text: SAMPLE_TEXT_1
      link: 'http://www.example.fr'
      class: 'use-btn animated fadeInUp'
    -
      text: SAMPLE_TEXT_2
      link: '#about'
      class: 'learn-btn animated fadeInUp'
      icon: arrow-down
    -
      text: SAMPLE_TEXT_3
      link: '#333'
      class: 'learn-btn animated fadeInUp'
      icon: arrow-down

Then in your Twig you could have:

  {% for button in site.header.buttons %}
    <a href="{{ button.link }}" class="{{ button.class }}">{{ button.text|t }} {% if button.icon %}<i class="fa fa-{{ button.icon }}"></i>{% endif %}</a> 
  {% endfor %}

What it’s doing is it’s going to get the lang lookup string, say SAMPLE_TEXT_1 for the first button, then pass that through the |t translate filter.

Not tested this, but should work!

3

Dear Andy,
I confirm this works.
I needed a savvy person to show me “obvious simplicity” !
Us beginners tend to entangle ourselves in tortuous logic.
Glad (and impressed) that developers are active on the forum.

Thank you and the Grav team.