GRAV cms Twig access to specific array index in theme blueprint yaml

Question

I have a theme I made that hold some configuration value in its config file:

enabled: true
dropdown:
  enabled: true

motto: 'il desiderio di coltivare.'
color1: '#0522ff'
color2: '#ff0000'
custom_logo:
  user/themes/terretinte/images/ttlogoh.svg:
    name: ttlogoh.svg
    type: image/svg+xml
    size: 3416
    path: user/themes/terretinte/images/ttlogoh.svg

to access the custom_logo path I have used in the twig:

<img src="{{config.themes.terretinte.custom_logo|first.path}}" alt="Terre Tinte" width="160" height="38">

My question is: is this the correct way? since "config.themes.terretinte.custom_logo" returns an array... couldn't I just specify the index value instead of first? (i.e. in a situation where the value I need is the second) I've tried:

{{config.themes.terretinte.custom_logo[0].path}} -- doesn't work
{{config.themes.terretinte.custom_logo(0).path}} -- doesn't work
{{config.themes.terretinte.custom_logo|path}} -- doesn't work
{{config.themes.terretinte.custom_logo.path}} -- doesn't work

what would it be the best way to access the specifc key at any position without iterating with a for loop all keys?

Thanks.

Answer 1

Your YAML syntax has actually created subobjects, as opposed to a list. At the time of writing this answer, you have the YAML entry of:

custom_logo:
  user/themes/terretinte/images/ttlogoh.svg:
    name: ttlogoh.svg
    type: image/svg+xml
    size: 3416
    path: user/themes/terretinte/images/ttlogoh.svg

By using the [] notation, you're trying to access this as an array, but you have not actually created an array. Rather, you've created a sub variable. I'm not entirely sure how well twig handles the / in variable names, but since it isn't throwing an error, it's likely fine. The fix for this will change slightly based on how you want to procede.

Do you really want multiple custom logos in an array?

It seems slightly odd to me that a theme would have multiple logos. If you're only going to use the first, there's no reason to create an array. This is a simple fix.

custom_logo:
  name: ttlogoh.svg
  type: image/svg+xml
  size: 3416
  path: user/themes/terretinte/images/ttlogoh.svg

One the line user/themes/terretinte/images/ttlogoh.svg: has been removed, we can now access each of the variables much more easily.

<img src="{{config.themes.terretinte.custom_logo.path}}" alt="Terre Tinte" width="160" height="38">

If you really want multiple logos in an index

As listed above, using a text field with a : creates a named variable. If we simply remove that entire line and replace it with a -, we now have an indexable array. Add as many - as you'd like.

custom_logo:
  -       
    name: ttlogoh.svg
    type: image/svg+xml
    size: 3416
    path: user/themes/terretinte/images/ttlogoh.svg

Do you really want named logos?

I can actually think of a few cases in which you'd want multiple logos. That being said, I'm unsure as to when you'd want to see them in an array, as opposed to named variables. Below is an example of how you could have multiple logos that are named and would then be used in twig.

custom_logo:
  normal:
    name: ttlogoh.svg
    type: image/svg+xml
    size: 3416
    path: user/themes/terretinte/images/ttlogoh.svg
  black_and_white:
    name: ttlogoh_bw.svg
    type: image/svg+xml
    size: 3416
    path: user/themes/terretinte/images/ttlogoh_bw.svg

These could then be referenced as:

<img src="{{config.themes.terretinte.custom_logo.normal.path}}" alt="Terre Tinte" width="160" height="38">
<img src="{{config.themes.terretinte.custom_logo.black_and_white.path}}" alt="Terre Tinte" width="160" height="38">