Entry Editor Links, a new Craft CMS plugin
I have published a new plugin on the Craft CMS plugin store: Entry Editor Links. This plugin is designed to help developers quickly create links to an entry’s edit page in the control panel for authorized users on the front end of a Craft site.
Use Twig instead
If you’re not statically caching your site, you can achieve a link in your Twig templates and avoid adding another plugin. One Darnley Road’s starter template has a concise example of how to create an editor link in their GitHub repo. I used their technique on my site initially.
Here’s the snippet for quick reference:
{# Element edit button
requires a currentUser, who can access the CP, and the request should not be an iframe live preview #}
{% if currentUser
and currentUser.can('accessCp')
and not (craft.app.request.getIsPreview() and craft.app.request.headers.get('sec-fetch-dest') == 'iframe') %}
{% html at endBody %}
{% set element = craft.app.getUrlManager().getMatchedElement() %}
{% if element and element.canSave(currentUser) %}
<a href="{{ element.getCpEditUrl() }}"
target="_blank"
class="fixed left-0 bg-black text-white bottom-0 px-5 py-2 mb-6 ml-6 font-mono uppercase">
Edit this page
</a>
{% endif %}
{% endhtml %}
{% endif %}
As you can see above, the snippet will only render the edit link when the logged-in user has permission to edit the post and is viewing the page on the site’s front end.
Static caching is great.
This Twig snippet worked for me until I implemented FastCGI Cache, as outlined in this post by nystudio107. How dos it work? Static page caching renders each page only once, and then, on subsequent visits, the previously rendered HTML is served instead.
This static cache helps a site perform well, even an underpowered server, because the server isn’t evaluating anything most of the time. It just provides a simple HTML document to the user. There is no page logic to bother with.
Static caching is great, but not in all cases.
Using the page you’re reading now as an example, the problem is that if I visit this page before you do, the link to edit this entry will be part of the statically cached page. I’ll see the link to edit this entry, and so will you. Craft CMS is secure, so if you clicked the “edit this entry” link, you would not gain access to the site’s back end. You’d be stuck at the login page.
Even so, the edit link should be presented only to me. Rendering that link to everyone would look like an error (because it would be an error!) and expose information about the site structure that I don’t want to be exposed.
JavaScript to the rescue
JavaScript allows a page to be altered after it’s rendered, and the Entry Editor Links plugin provides a helper method and a simple endpoint to query to help make this a easy process.
There are three steps to implement this on your site. (These instructions are also in the documentation for the Entry Editor Links plugin.
- Download and install the Entry Editor Links plugin. It’s free. :beer:
- Add a data attribute,
data-edit-link
, to the element that contains your entry’s headline and set the value to the ID of the entry in Craft. The plugin provides a helper method,isFrontEndPageView()
, to ensure you’re rendering the data attribute only to the front end of the page site and not in a preview window of the site. This means the full Twig looks like this:{% if isFrontEndPageView() %}data-edit-link="{{ entry.id }}"{% endif %}
. - Finally, you need some JavaScript that will look through the page for the presence of this data attribute. If you find one or more of them, loop through them, hitting the plugin’s API endpoint. This will determine if the user is logged in and if they can edit an entry. If they do, you’ll receive the URL to edit the page in the control panel. In the example JavaScript I provide in the documentation, you’ll create a new
a
element and insert it into the DOM right after the headline.
Customize the JavaScript
The JavaScript I include in the documentation is only an example. You may want the edit link to live elsewhere. You may want it to have different link text. Change it however you want. The example JS is to get you started.
If you have problems or suggestions, submit an issue on GitHub. Cheers.
I have published a new plugin on the Craft CMS plugin store: Entry Editor Links. This plugin is designed to help developers quickly create links to an entry’s edit page in the control panel for authorized users on the front end of a Craft site.
Use Twig instead #
If you’re not statically caching your site, you can achieve a link in your Twig templates and avoid adding another plugin. One Darnley Road’s starter template has a concise example of how to create an editor link in their GitHub repo. I used their technique on my site initially.
Here’s the snippet for quick reference:
{# Element edit button
requires a currentUser, who can access the CP, and the request should not be an iframe live preview #}
{% if currentUser
and currentUser.can('accessCp')
and not (craft.app.request.getIsPreview() and craft.app.request.headers.get('sec-fetch-dest') == 'iframe') %}
{% html at endBody %}
{% set element = craft.app.getUrlManager().getMatchedElement() %}
{% if element and element.canSave(currentUser) %}
<a href="{{ element.getCpEditUrl() }}"
target="_blank"
class="fixed left-0 bg-black text-white bottom-0 px-5 py-2 mb-6 ml-6 font-mono uppercase">
Edit this page
</a>
{% endif %}
{% endhtml %}
{% endif %}
As you can see above, the snippet will only render the edit link when the logged-in user has permission to edit the post and is viewing the page on the site’s front end.
Static caching is great. #
This Twig snippet worked for me until I implemented FastCGI Cache, as outlined in this post by nystudio107. How dos it work? Static page caching renders each page only once, and then, on subsequent visits, the previously rendered HTML is served instead.
This static cache helps a site perform well, even an underpowered server, because the server isn’t evaluating anything most of the time. It just provides a simple HTML document to the user. There is no page logic to bother with.
Static caching is great, but not in all cases. #
Using the page you’re reading now as an example, the problem is that if I visit this page before you do, the link to edit this entry will be part of the statically cached page. I’ll see the link to edit this entry, and so will you. Craft CMS is secure, so if you clicked the “edit this entry” link, you would not gain access to the site’s back end. You’d be stuck at the login page.
Even so, the edit link should be presented only to me. Rendering that link to everyone would look like an error (because it would be an error!) and expose information about the site structure that I don’t want to be exposed.
JavaScript to the rescue #
JavaScript allows a page to be altered after it’s rendered, and the Entry Editor Links plugin provides a helper method and a simple endpoint to query to help make this a easy process.
There are three steps to implement this on your site. (These instructions are also in the documentation for the Entry Editor Links plugin.
- Download and install the Entry Editor Links plugin. It’s free. :beer:
- Add a data attribute,
data-edit-link
, to the element that contains your entry’s headline and set the value to the ID of the entry in Craft. The plugin provides a helper method,isFrontEndPageView()
, to ensure you’re rendering the data attribute only to the front end of the page site and not in a preview window of the site. This means the full Twig looks like this:{% if isFrontEndPageView() %}data-edit-link="{{ entry.id }}"{% endif %}
. - Finally, you need some JavaScript that will look through the page for the presence of this data attribute. If you find one or more of them, loop through them, hitting the plugin’s API endpoint. This will determine if the user is logged in and if they can edit an entry. If they do, you’ll receive the URL to edit the page in the control panel. In the example JavaScript I provide in the documentation, you’ll create a new
a
element and insert it into the DOM right after the headline.
Customize the JavaScript #
The JavaScript I include in the documentation is only an example. You may want the edit link to live elsewhere. You may want it to have different link text. Change it however you want. The example JS is to get you started.
If you have problems or suggestions, submit an issue on GitHub. Cheers.