Ordering both .RegularPages and .Sections

[BenBen]

Hello dear Hugo Community,

This is my first topic. With a webmster partner, I built my website inspired from the theme ANANKE (Ananke | Articles). From now I have to fly with my own wings, but I need your help.

I have a navigation interface with images, which I would like to order its as I defined the position parameter in the front matter of each page:

• Valeurs : 1
• Marque : 2
• Récompenses : 3
• Engagements : 4
• Biographie : 5
• Methodes : 6

But as you can see, it is not the expected order.

This is because there are two .RegularPages (Récompenses and Engagements) and four .Sections of _index.md pages as illustrated in the tree structure.

Below is the current code.

<section class="flex">
  {{ with .RegularPages }}
    {{ range sort . ".Params.position" }}
      <div class="w-20">
        {{- partial "summary-with-image.html" . -}}
      </div>
    {{ end }}
  {{ end }}

  {{ with .Sections }}
      {{ range sort . ".Params.position" }}
        <div class="w-20">
          {{- partial "summary-with-image.html" . -}}
        </div>
      {{ end }}
  {{ end }}
</section>

Idealy, I would need a shorter code as below, gathering both typology of pages, but I don’t have the right way.

<section class="flex">
  {{ with .RegularPages }} OR {{ with .Sections }}
    {{ range sort . ".Params.position" }}
      <div class="w-20">
        {{- partial "summary-with-image.html" . -}}
      </div>
    {{ end }}
  {{ end }}
</section>

Thanks a lot for your help.

[davidsneighbour]

Use menu and weight. In the frontmatter of the 4 section’s _index.html and in engagements.md and recompenses.md add something along the following:

---
menu:
  imagenav:
    weight: 10
---

Use weight to sort the items (I tend to use multiples of 10, so it’s easier to add a new item in between without having to touch all items.

Then range through the navigation like this:

{{ range site.Menus.imagenav }}
do something
{{ end }}

Have a read through the menu doc for details…

Menus

[BenBen]

Thanks @davidsneighbour,

I like the idea to call pages through a common paramater to include all pages. I tried to implement the range you proposed but I got this error message.

error calling partial: " My_directory": execute of template failed: template: partials/func/GetFeaturedImage.html:25:24: executing “partials/func/GetFeaturedImage.html” at <.Resources.ByType>: can’t evaluate field Resources in type navigation.MenuEntry

In fact, site was not correctly recognised

Then, I tried with a point before site.

{{ range .site.Menus.imagenav }}
do something
{{ end }}

And I had an other error message.
Error: Error building site: failed to render pages: render of “section” failed: “my_directory”: execute of template failed: template: _default/navigation_via_vignettes.html:26:24: executing “main” at <.site.Menus.imagenav>: can’t evaluate field site in type page.Pages

Which adjustment would be necessary?

Thanks

[cshoredaniel]

This is a theme issue. I suggest creating a Discussion in the Ananke theme:

Discussions · theNewDynamic/gohugo-theme-ananke

But you need to be prepared to provide more details and a likely a sample repository if you can’t show the one you are seeing this in (otherwise you can show the one with the error without creating a test case repo).

EDIT: Well, this is partly theme-specific, but I think I misread…reading…

EDIT2: In fact the issue is only partly related to the base theme (that is the GetFeaturedImage partial is theme-specific), but the bigger issue is that you are treating ‘Menu’ items as ‘Page’ items, which they are not.

I suggest you review the link davidsneighbor posted.

Also, you need to provide more information and context. The information you have provided in the last comment was insufficient to do more than stab in the dark.

EDIT3: I noticed you use .site.Menus.imagenav. The leading dot (.) is incorrect. If the you were in .Page context you could use .Site… but in this case you need site.Menus.imagenav.

EDIT4: When you range you alter the context. range site.Menus.imagenav means that the dot (.) context becomes each item in site.Menus.imagenav which are Menu items rather than Page items. Perhaps this will help:

Introduction to Hugo Templating

[bep]

You can do something like this:

{{ $pages := (.RegularPages | union .Sections).ByWeight }}

See union | Hugo

[BenBen]

@bep, it perfectly works ! Thanks a lot.