Header and Footer editable in admin

Hi all, I’m just experimenting with Grav, coming from a WordPress background. I’ve installed Grav with the default “Quark” theme, and I’ve also installed the Admin plugin.

Now I want to know how I can enable the header and footer areas to be editable in the admin? So for example I’d like my clients to be able to change the logo and the navigation links on the header. In the footer they should be able to edit the social links.

I know I would need to create YAML files for the header and footer components, but how do I make these components editable in the admin?

Short answer: You can’t from within admin.

Yaml files are not editable in Admin.

Admin is an interface to set predefined values in the page-creating yaml (frontmatter in .md, config.yaml, etc).

Somewhat confusingly at first, configuring Admin to set the predefined values is ALSO done in yaml files.

To keep the two separate (page creation yaml vs Admin configuring yaml), the yaml for admin is referenced as “blueprints” (either in the file name, or in the folder containing it).

So to set it up for your clients, you would want to create your own blueprint yaml files to “extend” Admin so that it includes what you want to be made available to clients. That will have to be done in an editor.

Keep in mind - I’m a learner too. I started to pick Grav up ages ago but had to drop it for work, and am just now re/learning again from scratch. Also, I am not a developer. So I could well be wrong in my thought processes. Coming from a hobby SSG background before, it took me a while before I started to “grok” Grav but it is great for quickly building performant websites with admin login - once you have your theming etc setup.

Hope that helps.

Thanks for your reply, I think you misunderstood a little bit (my fault) - I’ve edited my post to make it a bit clearer.

Hi @GSTAR, I’ve done this for a Footer with my Bootstrap4 Open Matter theme by creating a Grav Page to hold footer content and then using Twig display that content in the appropriate spot - might this be an option for you too?

Here is how I do the addition via Twig:

And here is how the content stored looks like:

If you explore the Bootstrap4 Open Matter theme you will also I handle the Sidebar the same way - Twig is pretty amazing🙂

Hope the above helps,
Paul

An option for editing he logo would be to simply give them a FTP access to that ressource. So they could edit the image, and just upload and refresh.

The navigation links in the header are automatically composed (by default) based on the root pages (depending on them to be visible). So here to, a simple access to the admin panel and page edition, is necessary.

For the footer, the solution provided by @paulhibbitts seems very interesting. He simply used the “partial” feature (allowing to include twig files in twig files) to bypass the “base.html.twig” file (not accessible from the admin panel), and created a template for the footer, and connected it to a page through the markdowns’ template calling. This giving the ability to drive the footer’s page from the markdown in the admin panel. Very clever. :dark_sunglasses:

But I know what you feel : Wordpress used us to edit all parts as in a Tetris game. It may be confusing to have less editing power, client-side. But if you learn to use GRAV Blueprint’s feature (I personally don’t master it, for now), you can extend your admin panel and do what you want (or almost).