How to create a link in a collection of icon (mache theme)

Support
1

Hello,
I’m a new user of grav. So sorry if my question is very basic. I would like to add a link to the images that display in a collection of pages. I have tried several tracks but without success. Here is the page header (projets.md)

projets:
    -
        title: x
        icon: s1.png
    -
        title: y
        icon: 's2.png'

and the twig template

{% if page.header.projets %}
        <div class="row">
            {% for projets in page.header.projets %}
            <div class="col-lg-3 col-sm-6 col-md-3 os-animation" data-os-animation="fadeInLeft" data-os-animation-delay="0.4s">
		{{ page.media.images[projets.icon].cache.html()|raw }}
                <h3>{{ projets.title|raw }}</h3>
            </div>
            {% endfor %}
        </div>
        {% endif %}

The theme is mache
I’ve tried to add icon_url in the page header but I have an error message. I don’t understand where i have to put the link and why I have this error message :

Error: Invalid Frontmatter (...) **Failed to read /.../grav/user/pages/01.home/_projets/projets.md: You cannot define a mapping item when in a sequence at line 4 (near "icon_url:

Thanks for your help !

2

@lunekiroule, Would you mind showing what the frontmatter looks like when you get the yaml error?

3

Yep, something doesn’t add up. Error is for icon_url, but in your pasted frontamtter there’s no such key at all

4

oh yes sorry. In the frontmatter, I wrote :

projets:
    -
        title: x
        icon: s1.png
        icon_url: https://example.com
    -
        title: y
        icon: 's2.png'
        icon_url: https://test.org
5

Wrap links with quotes. My best bet is that : is treated as YAML syntax symbol

6

@lunekiroule, I cannot reproduce the issue:

  • According to online linters, above yaml is valid
  • When running above Twig snippet and frontmatter seems to be working well. Images and titles render correctly. No errors.
7

I tried also, and it wrapped values in quotes on validating. And the error

You cannot define a mapping item when in a sequence

I bet it means you can’t map like

some:
  value: in: sequence

But this should work

some:
  value: "in: sequence"
8

BTW, some say it’s another issue.
@lunekiroule, is this your handwritten frontmatter or was it generated by Admin?
If it’s a handwritten, it must be 2 space tabs instead of four. Like

projets:
  -
    title: "x"
    icon: "s1.png"
    icon_url: "https://example.com"
  -
    title: "y"
    icon: "s2.png"
    icon_url: "https://test.org"
9

According the YAML specs:

On the use of the colon in values:

Normally, YAML insists the “ : ” mapping value indicator be separated from the value by white space. A benefit of this restriction is that the “ : ” character can be used inside plain scalars, as long as it is not followed by white space. This allows for unquoted URLs and timestamps. It is also a potential source for confusion as “ a:1 ” is a plain scalar and not a key: value pair.

Note the “This allows for unquoted URLs and timestamps.”

On the use of indentation:

In YAML block styles, structure is determined by indentation . In general, indentation is defined as a zero or more space characters at the start of a line.

To maintain portability, tab characters must not be used in indentation, since different systems treat tabs differently. Note that most modern editors may be configured so that pressing the tab key results in the insertion of an appropriate number of spaces.

The amount of indentation is a presentation detail and must not be used to convey content information.

Each node must be indented further than its parent node. All sibling nodes must use the exact same indentation level. However the content of each sibling node may be further indented independently.

If I interpret the above correctly, there is no requirement for using 2 spaces as long as siblings use exact same indentation level.

1 Like
10

OK, then I don’t know :slight_smile:
But I’m pretty sure I read somewhere on the 2 space requirement :thinking: Maybe imagined :smiley:

11

Great, it works ! Thanks to you, I understood my mistake.
I was using the tab key instead of the space key !

So, for beginners like me, here is the good code :

in the frontmatter

projets:
    -
        title: 'x'
        icon: s1.png
        icon_url: "https://itworks.!!!"
    -
        title: 'y'
        icon: s2.png
        icon_url: "https://itworksvery.well"

in the template, just add an html link with the new key icon_url :

        {% if page.header.projets %}
        <div class="row">
            {% for projets in page.header.projets %}
            <div class="col-lg-3 col-sm-6 col-md-3 os-animation" data-os-animation="fadeInLeft" data-os-animation-delay="0.4s">
		<a href="{{ projets.icon_url|raw }}">{{ page.media.images[projets.icon].cache.html()|raw }}</a>
                <h3>{{ projets.title|raw }}</h3>
            </div>
            {% endfor %}
        </div>
        {% endif %}
1 Like