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

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

Solved by Andy Miller View solution

Started by Stephane 9 years ago · 2 replies · 2685 views
9 years ago

Hello Grav Community,

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

Original site.yaml contains :

YAML
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):

TWIG
{% 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

YAML
 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):

YAML
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

TWIG
{% 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

TWIG
{% 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

TWIG
{% 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.

9 years ago Solution

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

YAML
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:

YAML
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:

TWIG
  {% 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!

9 years ago

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.

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by Pedro M, 2 months ago
4 196 2 months ago
Themes & Styling · by Ian, 2 months ago
3 92 2 months ago
Themes & Styling · by Norbert, 2 years ago
11 452 3 months ago
Themes & Styling · by Lukáš Findeis, 3 months ago
0 46 3 months ago
Themes & Styling · by Sebadamus, 4 months ago
5 126 3 months ago