How to add an "edit" button to front end

One of the very few things I miss from WordPress is the ability to jump straight from viewing a page to editing the content. Turns out this is very easy to get working with Grav.

First, in System Configuration, set the session split option to "no".

This will mean you log in to both front and back end simultaneously.

Now add this code to base.html.twig

        {% if config.plugins.admin.enabled and authorize(['admin.pages', 'admin.super']) %}
            {% if page.link == '/' %}
            {% set editPagePath = "/" ~ page.slug %}
          {% else %}
            {% set editPagePath = uri.path %}
          {% endif %}
          <a class="editpage" href="/admin/pages{{ editPagePath }}">Edit</a>
        {% endif %}

and you can style it by adding some code to css, for example:

.editpage {
  position: fixed;
  top: 0;
  right: 0;
  padding: 5px 10px 4px 10px;
  background: #023A71;
  color: #fff;
  display: block;
  font-weight: bold;
  text-decoration: none;
  border: none;
  text-transform: uppercase;
}
a.editpage:hover {
  color: #dadde1;
}

The result should look like this (I have also removed the login item from the menu):

Two things I will point out:

1. The link you generate won't work for Grav sites that live under a subpath (ie, http://www.example/mysite/)
2. The /admin prefix is configurable and so that should be taken into account.

This is how you can fix it:

{% set adminPath = base_url ~ config.get('plugins.admin.route') ~ '/pages' %}
<a class="editpage" href="{{ adminPath }}{{ editPagePath }}">Edit</a>

Other than that, great job on this and thank you for sharing!

Well done, indeed.

Never tried it, but FYI there's also the Frontend Edit Button plugin in the official repo.

Doh! There is indeed, right there in the list of plugins. Why didn't I see that. 😲

Note to self. Check all existing circular objects very carefully before spending time inventing a wheel.

That's alright, I learned a few extra tricks from both of your posts :)