How to add an "edit" button to front end

Showcase
1

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”.

session-split
session-split880×237 12.3 KB

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):

page
page1232×259 49.6 KB

1 Like
2

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!

2 Likes
3

Well done, indeed.

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

4

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

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

5

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

1 Like